Front-end/HTML&CSS
HTML) 테이블 만들기
luana_eun
2022. 1. 17. 23:58
728x90
1. 테이블 요소
<table> 테이블을 만들겠다. -> 테이블 범위 표시
<caption> 테이블 제목
<thead> 테이블 헤더 그룹 지정.
<tr> 행 구역 지정, <tr>이나 <td>를 포함해야한다.
<th> 헤더 셀 표시.
<tbody> 테이블 바디 그룹 지정.
<td> 셀 하나하나 지정
<table border="1">
<caption>테이블 제목</caption>
<thead>
<tr>
<th>과일</th><th>색깔</th>
<tr>
</tead>
<tbody>
<tr>
<td>사과</td><td>빨강</td>
<tr>
<tr>
<td>바나나</td><td>노랑</td>
<tr>
</tbody>
</table>
2. 열과 행 합치기
열 합치기: rowspan="숫자"
행 합치기: colspan="숫자"
<table border="1">
<h3>지원 양식</h3>
<tr>
<th rowspan="4">개인정보</th>
<th width="60">이름</th><td width="150"></td>
</tr>
<tr>
<th>학과</th><td></td>
</tr>
<tr>
<th>학번</th><td></td>
</tr>
<tr>
<th>연락처</th><td></td>
</tr>
<tr>
<th>지원분야</th>
<td colspan="2"></td>
</tr>
</table>
728x90