HTML 테이블
table 태그
- 표를 만들때 사용되는 태그
<tr><td></td><tr> 태그 등과 함께 쓰입니다. - colspan, rowspan 를 사용해서 셀을 합칠 수 있습니다.
<table border="1">
<tr>
<td>data(1,1)</td>
<td>data(1,2)</td>
<td>data(1,3)</td>
</tr>
<tr>
<td>data(2,1)</td>
<td>data(2,2)</td>
<td>data(2,3)</td>
</tr>
<tr>
<td>data(3,1)</td>
<td>data(3,2)</td>
<td>data(3,3)</td>
</tr>
</table>가로로 테이블 합치기
- 가로로 합칠 땐 colspan=“숫자” 를 사용합니다.
<table border="1">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td>2,1</td>
<td colspan="2">2,2</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
</tr>
</table>세로로 테이블 합치기
- 세로로 합칠 땐 rowspan=“숫자” 를 사용합니다.
<table border="1">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td rowspan="2">2,1</td>
<td>2,2</td>
<td>2,3</td>
</tr>
<tr>
<td>3,2</td>
<td>3,3</td>
</tr>
</table>가로, 세로 테이블 합치기
- 적절하게 colspan 과 rowspan 을 사용합니다.
<p>테이블 가로, 세로 합치기</p>
<table border="1">
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
</tr>
<tr>
<td rowspan="2">2,1</td>
<td colspan="2">2,2</td>
</tr>
<tr>
<td>3,2</td>
<td>3,3</td>
</tr>
</table>테이블 합치기 문제
<p>테이블 합치기 문제</p>
<table border="1">
<tr>
<td colspan="2">모집직군</td>
<td>모집전공</td>
<td>비고</td>
</tr>
<tr>
<td colspan="2">생산기술직</td>
<td>화학공학</td>
<td rowspan="3">전공관련 자격증 우대</td>
</tr>
<tr>
<td rowspan="2">생산지원직</td>
<td>공무</td>
<td>기계, 전기</td>
</tr>
<tr>
<td>안전환경</td>
<td>안전, 환경</td>
</tr>
<tr>
<td colspan="2">연구개발직</td>
<td>화학, 화학공학</td>
<td>석사</td>
</tr>
</table>
thead, tbody, tfoot
- 의미에 맞게 테이블을 구조화 합니다.
<caption>제주특별자치도 학교현황</caption>
<thead> <!-- alt + shift + 드래그로 같은 열 드래그 가능 -->
<tr>
<th>구분</th>
<th>학교수</th>
<th>학급수</th>
<th>학생수</th>
<th>교원수</th>
</tr>
</thead>
<tbody>
<tr> <!-- td * 5 로 자동완성 가능 -->
<th>유치원</th>
<td>117</td>
<td>252</td>
<td>5547</td>
<td>474</td>
</tr>
<tr>
<th>초등학교</th>
<td>111</td>
<td>1720</td>
<td>37686</td>
<td>2632</td>
</tr>
<tr>
<th>중학교</th>
<td>44</td>
<td>699</td>
<td>21274</td>
<td>1412</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>
<td>272</td>
<td>2671</td>
<td>64507</td>
<td>4518</td>
</tr>
</tfoot>
</table>colgroup, col
- 테이블의 열(col) 폭을 지정합니다.
<table border="1">
<colgroup>
<col style="width:120px;"> <!-- css 활용하는 것이 좋은 방법 -->
<col style="width:60px;">
<col style="width:60px;">
<col style="width:80px;">
<col style="width:100px;">
</colgroup>
<caption>제주특별자치도 학교현황</caption>
<thead> <!-- alt + shift + 드래그로 같은 열 드래그 가능 -->
<tr>
<th>구분</th>
<th>학교수</th>
<th>학급수</th>
<th>학생수</th>
<th>교원수</th>
</tr>
</thead>
<tbody>
<tr> <!-- td * 5 로 자동완성 가능 -->
<th>유치원</th>
<td>117</td>
<td>252</td>
<td>5547</td>
<td>474</td>
</tr>
<tr>
<th>초등학교</th>
<td>111</td>
<td>1720</td>
<td>37686</td>
<td>2632</td>
</tr>
<tr>
<th>중학교</th>
<td>44</td>
<td>699</td>
<td>21274</td>
<td>1412</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>합계</th>
<td>272</td>
<td>2671</td>
<td>64507</td>
<td>4518</td>
</tr>
</tfoot>
</table>테이블 합치기 연습문제
<h2>9. 테이블 합치기 연습문제</h2>
<table border="1">
<thead>
<tr>
<th colspan="2">모집직군</th>
<th>모집전공</th>
<th>비고</th>
<th>근무지/th>
</tr>
</thead>
<tbody>
<tr>
<th colspan="2">생산기술직</th>
<td>화학공학</td>
<td rowspan="3">전공관련 자격증 우대</td>
<td rowspan="5">충남 서산</td>
</tr>
<tr>
<th rowspan="2">생산지원직</th>
<th>공무</th>
<td>기계, 전기</td>
</tr>
<tr>
<th>안전환경</th>
<td>안전, 환경</td>
</tr>
<tr>
<th colspan="2">연구개발직</th>
<td>화학, 화학공학</td>
<td>석사</td>
</tr>
<tr>
<th colspan="2">경원지원직</th>
<td>상경계열</td>
<td></td>
</tr>
<tr>
<th colspan="2">영업마케팅직</th>
<td>상경계열</td>
<td></td>
<td>서울 중구</td>
</tr>
</tbody>
</table>