표의 구성 요소
표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있습니다.
표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 합니다.
- <table> : 표를 나타내는 태그
- <tr> : 행을 나타내는 태그
- <th> : 제목 셀을 나타내는 태그
- <td> : 셀을 나타내는 태그
하나의 <table>은 하나 이상의 <tr>로 이루어져 있으며,
<tr>은 셀을 나타내는 <th>, <td>를 자식으로 가지게 됩니다.
표를 구성할 때는 위에서 밑으로, 좌측에서 우측으로 작성하면 됩니다.
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>13</td>
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
</table>
위는 1부터 16을 표현한 4행 4열의 표를 나타내는 코드입니다.
브라우저 화면을 확인해보면 테두리가 없어 표가 어색해 보일 수 있습니다.
브라우저에서 제공하는 테이블의 기본 스타일에는 테두리가 없기 때문입니다.
확인을 위해 아래의 CSS 코드를 <head> 안에 입력하면 테두리가 나타나는 걸 확인할 수 있습니다.
<style>
th, td { border: 1px solid; }
</style>
표의 구조와 관련된 태그
표가 복잡해지면 표를 해석해서 음성으로 전달해야 하는 스크린 리더기와 같은 보조 기기를 통해서는 표의 내용을 이해하는 것이 더욱 어려워질 것입니다.
따라서 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야 합니다.
- <caption>: 표의 제목을 나타내는 태그
- <thead>: 제목 행을 그룹화하는 태그
- <tfoot>: 바닥 행을 그룹화하는 태그
- <tbody>: 본문 행을 그룹화하는 태그
<table>
<caption>Monthly Savings</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
</table>
<tfoot>은 <thead> 다음에 있지만, 실제 화면에서는 표의 맨 아래에 위치하게 된다는 점을 주의해야 합니다.
내용 추가 및 정정합니다.
1. 영상 속 실습 코드의 오타가 있습니다. 3:40 경부터 시작하는 코드에서 <tr>을 </td>로 잘못 닫았습니다.
<tr></tr>이 맞습니다.
2. HTML 버전에 따라 <tfoot>의 위치가 변경되었습니다.
- HTML4: <tfoot> 위치가 <tbody> 전에 위치합니다. 이유는 데이터의 양이(<tbody>) 잠재적으로 매우 클수도 있기 때문에 그 전에 <tfoot>을 렌더해야 했기 때문입니다.
- HTML5: <tfoot>의 위치가 <tbody> 앞에 와도 되고, 뒤에 와도 상관없습니다.
- HTML5.1 ~ 현재(5.2): <tfoot>이 <tbody> 뒤에 위치해야 합니다. <tfoot>의 위치가 <tbody> 앞에 나올 경우 웹 접근성의 키보드의 초점 이동 순서 항목에 문제가 있기 때문에 변경되었습니다.
'코딩 공부' 카테고리의 다른 글
| 비전공자를 위한 HTML/CSS-폼 요소1 (0) | 2022.05.02 |
|---|---|
| 비전공자를 위한 HTML/CSS - 테이블 요소2 (0) | 2022.05.02 |
| 비전공자를 위한 HTML/CSS-이미지 요소 (0) | 2022.05.02 |
| 비전공자를 위한 HTML/CSS-리스트 요소 (0) | 2022.05.02 |
| 비전공자를 위한 HTML/CSS-의미가 없는 컨테이너 요소 (0) | 2022.05.02 |