<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#button1{
background-color: red;
border: 0px solid white;
height: 30px;
color: white;
border-radius: 3px;
}
table{
border-collapse: collapse;
text-align: left;
}
td{
width: 150px;
height: 20px;
text-align: left;
vertical-align: top;
}
tr{
width: 250px;
height: 20px;
text-align: left;
}
#author{
width: 40px;
}
thead{
background-color: orange;
}
img{
margin: 10px;
}
.table2{
margin: 10px;
}
.table2 th{
background-color: white;
}
.table2 tr{
border-top: 1px solid black;
border-collapse: collapse;
}
</style>
</head>
<body>
<form action="http://www.naver.com" method="get">
<table width="300px">
<tr>
<td><label for="name">이름</label></td>
<td><input type="text" id="name" value="홍길동"></td>
</tr>
<tr>
<td><label for="dep"></label>부서</label></td>
<td><input type="text" id="dep" value="개발"></td>
</tr>
<tr>
<td><label for="pos"></label>직책</label></td>
<td><input type="text" id="pos" value="대리"></td>
</tr>
<tr>
<td><label for="picture"></label>사진</label></td>
<td><input type="file" id="picture" value="홍길동"></td>
</tr>
</table>
<br />
<input type="submit" value="새 사원 추가" id="button1" >
</form>
<hr />
<input type="submit" value="선택 삭제" id="button2" >│검색:
<select name="검색">
<option value="이름">이름</option>
<option value="번호">번호</option>
<option value="작성자">작성자</option>
</select>
<input type="text" id="search" value="">
<form action="http://www.naver.com" method="get">
<table border="1">
<thead>
<td><input type="checkbox"></td>
<td>번호</td>
<td>사진</td>
<td>사원명</td>
<td>부서</td>
<td>직급</td>
<td>수정</td>
<td>삭제</td>
</thead>
<tr>
<td rowspan="3"><input type="checkbox"></td>
<td rowspan="3">1043</td>
<td><img src="test.png" alt="풍경" align-items="center" width="200px" height="150px"/></td>
<td>홍길동</td>
<td>개발</td>
<td>대리</td>
<td rowspan="3"><input type="submit" value="edit" id="button3" ></td>
<td rowspan="3"><input type="submit" value="delete" id="button4" ></td>
</tr>
<tr>
<td colspan="4">
<table class="table2">
<tr>
<th>번호</th>
<th>댓글 내용</th>
<th>작성자</th>
<th>수정</t>
<th>삭제</th>
</tr>
<tr>
<td>1</td>
<td>멋진 사진입니다.</td>
<td>박문수</td>
<td>수정</td>
<td>삭제</td>
</tr>
<tr>
<td>2</td>
<td>좋아요^^ 퍼가요~</td>
<td>일지매</td>
<td>수정</td>
<td>삭제</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="4" style="text-align: center;">
댓글<input type="text" id="comment" value="">
작성자<input type="text" id="author" value="">
<input type="submit" value="댓글입력" id="button4">
</td>
</tr>
</table>
</form>
</body>
</html>
