<thead>, <tbody>, <tfoot> 태그는 각 각 머리글, 본문, 바닥 글을 의미 합니다.
테이블의 내용이 많을 때 <thead>와 <tfoot>는 머리글과 바닥 글을 고정시켜 놓는 요소로 사용합니다.
이 요소들은 테이블의 레이아웃에 영향을 미치지 않습니다.
하지만 CSS를 사용하여 디자인의 스타일을 지정할 수 있습니다.
<html>
<head>
<title>
회원가입
</title>
<meta charset="utf-8">
<style>
table,
td,
th {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 2px;
padding: 10px;
}
tfoot {
text-align: center;
}
</style>
</head>
<body>
<form name="frm1" method="POST" action="result.html">
<table border="1" align="center" width="50%">
<thead>
<tr>
<th colspan="2">회원가입</th>
</tr>
</thead>
<tbody>
<tr>
<td>이름</td>
<td><input type="text" name="name" autofocus="autofocus"></td>
</tr>
<tr>
<td>비번</td>
<td><input type="password"></td>
</tr>
<tr>
<td>성별</td>
<td>
남
<input type="radio" name="gender" value="male">
여
<input type="radio" name="gender" value="female" checked="checked">
</td>
</tr>
<tr>
<td>취미</td>
<td>
<input type="checkbox" checked="checked">JavaScript/JQuery
<input type="checkbox">HTML/CSS
<input type="checkbox">Java
<input type="checkbox">Ruby
</td>
</tr>
<tr>
<td colspan="2">자기소개</td>
</tr>
<tr>
<td colspan="2">
<textarea cols="80" rows="10"></textarea>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">
<input type="submit" value="전송">
</td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>