표를 만드는 태그
1. 표를 만드는 태그
표(table) : 자료를 보기 좋게 정리
표를 만드는 태그
- <table> ~ </table> : 표 전체
- <tr> ~ </tr> : 행
- <td> ~ </td> : 셀, <th> ~ </th> 제목 셀
<body>
<!-- <table></table> : 표 구성 -->
<!-- 테이블에서 border="0"이 기본값으로 표시 안됨 -->
<!-- <table border="0"> -->
<table border="1">
<!-- <tr></tr>:행 추가 -->
<tr>
<!-- <td></td>: 열 추가 -->
<!-- <th></th>: 제목 셀: 굵게 표시 -->
<th>제목셀</th>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<!-- <td></td>: 열 추가 -->
<!-- <th></th>: 제목 셀: 굵게 표시 -->
<th>제목셀</th>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
</table>
</body>
colspan, rowspan 속성 - 행 또는 열 합치기
<body>
<table border="1">
<tr>
<th>이름</th>
<!-- style="width~ : 스타일을 줘서 열 너비를 늘림 -->
<td style="width: 120px;"></td>
<th>연락처</th>
<td style="width: 120px;"></td>
</tr>
<tr>
<th>주소</th>
<!-- colspan : 열을 병합 -->
<td colspan="3"></td>
</tr>
<tr>
<th>자기소개</th>
<td colspan="3"></td>
</tr>
</table>
</body>
<caption> - 표 제목
<body>
<table border="1">
<!-- caption : 표의 제목으로 가운데 정렬 -->
<caption>
<p>
국내에서 자주 사용하는 모던 브라우저
</p>
</caption>
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<td>Google</td>
<td>https://www.google.com/chrome/</td>
</tr>
<tr>
<th>파이어폭스(Firefox)</th>
<td>Mozila</td>
<td>https://www.mozila.org/kor/firefox</td>
</tr>
<tr>
<th>엣지(Edge)</th>
<td>Microsoft</td>
<td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td>
</tr>
</table>
</body>
<figure>, <figcaption> - 표 제목
- <figcaption> 위치에 따라 표의 위나 아래에 제목 표시
<body>
<!-- figure, figcaption 으로 표의 제목 -->
<figure>
<!-- <b></b> : 강조해서 진하게 표시 -->
<!-- <figcaption>
<p>
국내에서 자주 사용하는 <b>모던 브라우저</b>
</p>
</figcaption> -->
<table border="1">
<!-- caption : 표의 제목으로 가운데 정렬 -->
<!-- <caption>
<p>
국내에서 자주 사용하는 모던 브라우저
</p>
</caption> -->
<tr>
<th>브라우저</th>
<th>제조업체</th>
<th>다운로드</th>
</tr>
<tr>
<th>크롬(Chrome)</th>
<td>Google</td>
<td>https://www.google.com/chrome/</td>
</tr>
<tr>
<th>파이어폭스(Firefox)</th>
<td>Mozila</td>
<td>https://www.mozila.org/kor/firefox</td>
</tr>
<tr>
<th>엣지(Edge)</th>
<td>Microsoft</td>
<td>https://www.microsoft.com/ko-kr/windows/microsoft-edge</td>
</tr>
</table>
<figcaption>
<p>
<!-- <b></b> : 강조해서 진하게 표시 -->
국내에서 자주 사용하는 <b>모던 브라우저</b>
</p>
</figcaption>
</figure>
</body>
<thead>, <tbody>, <tfoot> - 표 구조 정의하기
- 표의 구조를 제목 부분과 실제 본문 그리고 요약 부분이 있는 부분으로 나눈다.
- <thead>, <tbody>, <tfoot> 태그 사용
- 시각 장애인도 화면 판독기를 통해 표의 구조를 쉽게 이해할 수 있다.
- 표의 본문이 길 경우 자바스크립트를 이용하면 제목과 바닥 부분을 고정하고 본문만 스크롤되도록 할 수 있다.
<col>, <colgroup> – 열끼리 묶어 스타일 지정
- <col> 태그 - 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용. 닫는 태그 없음.
- <col> 태그에 span 속성을 사용해 여러 열을 묶을 수 있음.
- <colgroup> 태그로 여러 열을 묶을 수도 있는데, <colgroup> 태그 안에 묶는 열의 개수만큼 <col> 태그를 사용. 닫는 태그 있음.
- <col> 태그와 <colgroup> 태그는 <caption> 태그 뒤에, <tr>, <td> 태그 전 에 사용해야 함.
- <colgroup> 태그 안에 있는 <col> 태그를 비롯해 단독 으로 사용한 <col> 태그의 개수와 표의 열의 개수가 같아야함.
<body>
<table border="1">
<colgroup>
<!-- <col style="background-color: blue;"> -->
<!-- span="2" => 영역을 2개의 열로 지정 -->
<!-- background-color:blue; => 배경색을 파란색 -->
<col span="2" style="background-color: blue;">
<col>
<col style="background-color: yellow;">
</colgroup>
<caption>colgroup 연습</caption>
<tr>
<!-- width: 100px; height: 30px => 너비 100px, 높이 30px -->
<td style="width: 100px; height: 30px;"></td>
<td style="width: 100px; height: 30px;"></td>
<td style="width: 100px; height: 30px;"></td>
<td style="width: 100px; height: 30px;"></td>
</tr>
<tr>
<!-- width: 100px; height: 30px => 너비 100px, 높이 30px -->
<td style="width: 100px; height: 30px;"></td>
<td style="width: 100px; height: 30px;"></td>
<td style="width: 100px; height: 30px;"></td>
<td style="width: 100px; height: 30px;"></td>
</tr>
</table>
</body>
목차로 돌아가기
