[Do it] 02-2장 텍스트 관련 태그들
표를 만드는 태그
<table>, <tr>, <td>, <th> 태그 - 기본적인 표 만들기
표를 만드는 기본형을 알아보겠습니다.
<table>
<tr>
<td>내용</td>
<td>내용</td>
...
</tr>
...
</table>
기본적인 표 만들기
웹에서 표를 만들때 여러 태그가 함께 사용됩니다.
<table> 태그를 이용해 표 저네 윤곽을 잡고 행와 셀을 만들어 주면 됩니다.
순서는 다음과 같습니다.
-
<table> 태그로 표 자리를 먼저 만듭니다.
<table> </table>
-
<tr> 태그로 2개의 행을 만듭니다.
<table> <tr> </tr> <tr> </tr> </table>
-
<td> 태그로 각 행마다 셀을 3개씩 만듭니다.
<table> <tr> <td> .... </td> <td> .... </td> <td> .... </td> </tr> <tr> <td> .... </td> <td> .... </td> <td> .... </td> </tr> </table>
-
각 셀에 들어갈 내용은 <td>와 </td>사이에 입력합니다.
<th>태그 - 표에 제목 셀 만들기
<th>태그를 사용하면 해당 셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시하는 제목 셀을 만들 수 있습니다.
<table>
<tr>
<th>제목 셀</th>
<td>내용</td>
<td>내용</td>
</tr>
<tr>
<th>제목 셀</th>
<td>내용</td>
<td>내용</td>
</tr>
</table>
colspan, rowspan 속성- 행 또는 열 합치기
행이나 열을 합치려면 <td>태그나 <th>태그안에서 colspan
, rowspan
속성을 사용해서 몇 개의 셀을 합칠지 지정합니다.
colspan은 가로로 합쳐질 셀, rowspan은 세로로 합쳐질 셀의 개수 입니다.
<caption> 태그, <figcaption> 태그 - 표에 제목 붙이기
<caption> 태그 사용하기
<caption>태그는 <table> 태그 바로 다음에 사용합니다. <caption> 태그를 사용한 표 제목은 표의 위쪽 중앙에 표시됩니다.
<table>
<caption><strong>표 제목</strong><p>
소 제목
</p></caption>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</table>
<figcaption> 태그 사용하기
figure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure>태그로 감싼 후 <figcaption> 태그를 이용해 제목이나 설명 글을 입력합니다.
(중앙에 정렬되지 않습니다.)
<figcaption>태그를 <table> 태그보다 앞에 사요하면 표 위에 제목이 표시되고 </table> 태그 다음에 추가하면 표 아래에 제목이 표시됩니다.
<figure>
<figcaption>
<p>
figcaption을 <b> 사용하는 제목</b>
</p>
</figcaption>
<table>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</table>
</figure>
aria-describrdby 속성 - 표에 대한 설명 제공하기
화면 낭독기에서 표를 읽어줄 때 도움이 되도록 표 설명을 별도의 문장으로 자석한 <table>태그 안에 aria-describedby 속성을 추가해 연결하면 표를 이해하는 데 도움이 됩니다.
<thead>, <tbody>, <tfoot> 태그 - 표 구조 정의하기
제목이 있는 부분의 셀과 내용이 있는 부분의 셀을 구분하기 위해서 <thead> - 제목 부분, <tbody> - 본문 부분, <tfoot> - 요약 부분으로 표를 구성합니다.
<table>
<caption>표의 제목</caption>
<thead>
<tr>제목 영역
<th>제목</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr>본문
<th>...</th>
<th>...</th>
</tr>
</tbody>
<tfoot>
<tr>요약 부분
<th>...</th>
<th>...</th>
</tr>
</tfoot>
</table>
이렇게 표의 구조를 정의하면 시각장애닏르도 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있습니다.
표의 본문이 길어 한 화면을 넘어갈 경우, 자바스크립트를 이용해 제목 부분(<thead>)과 요약부분(<tfoot>)은 표의 위아래에 고정하고 본문(<tbody>)만 스크롤되도록 만들 수 있습니다.
<col>, <colgroup> 태그 - 여러 열 묶어 스타일 지정하기
표에서 하나의 열에 스타일을 지정하거나 열(column)을 몇 개씩 묶어 스타일을 한꺼번에 지정할 수도 있습니다.
<col>태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용하는 것으로 닫는 태그가 없습니다.
만약 <col>태그를 사용해 둘 이상의 열을 묶어 같은 스타일을 지정하려면 span 속성을 이용해 몇 개를 함께 묶어줄 지 지정가능합니다.
<colgroup>을 통해서도 묶어줄 수 있는데 태그 안에 묶는 열의 개수만큼 <col> 태그를 넣으면 됩니다.
주의
<col>태그와 <colgroup>태그는 <caption> 태그 뒤와 <tr>, <td> 태그 전에 사용해야 한다는 점입니다.
<colgroup> 태그 안에 있는 <col> 태그를 비롯해 단독으로 사용한 <col> 태그의 개수와 표의 열의 개수가 같아야 합니다.
<table>
<caption>colgroup 연습하기</caption>
<colgroup>
<col> #별다른 스타일을 지정하지 않고 열 개수를 맞추기 위한 태그입니다.
<col span="2" style="background-color:blue;">
<col style="background-color:yellow;">
</colgroup>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
복습하기
빈칸 채우기
<table>
<caption>
<small>(단위:kg)</small>
</caption>
<colgroup>
<col style="bakcground:#eee;">
<col>
</colgroup>
<tr>
<th>WHO권장량</th>
<td>18.25</td>
</tr>
...
</table>
댓글남기기