들어가기 전에
<table>은 이름에서 느껴지는 바와 같이 데이터를 표로 나타낼 때 사용되는 태그입니다.
복잡한 데이터들을 기술할 때 표를 많이 사용합니다. 이번 강에서는 <table>의 기본 구조를 알아보고
관련 태그와 속성을 이용해 접근성을 높이는 방법을 알아보도록 하겠습니다.
핵심키워드
- table
- th
- tr
- td
학습하기
들어가기 전에
<table>은 이름에서 느껴지는 바와 같이 데이터를 표로 나타낼 때 사용되는 태그입니다.
복잡한 데이터들을 기술할 때 표를 많이 사용합니다. 이번 강에서는 <table>의 기본 구조를 알아보고
관련 태그와 속성을 이용해 접근성을 높이는 방법을 알아보도록 하겠습니다.
핵심키워드
학습하기
표의 구성 요소
표는 셀(내용이 들어가는 하나의 칸)로 이루어져 있습니다.
표의 행(가로 방향)을 row, 열(세로 방향)을 column이라 합니다.
하나의 <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>
표의 구조와 관련된 태그
표가 복잡해지면 표를 해석해서 음성으로 전달해야 하는 스크린 리더기와 같은 보조 기기를 통해서는 표의 내용을 이해하는 것이 더욱 어려워질 것입니다.
따라서 표를 구조적으로 파악하기 위해 도움이 되는 태그를 사용해야 합니다.
<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>의 위치가 변경되었습니다.
참고링크
https://developer.mozilla.org
https://www.edwith.org
comment
2021-07-05
<table>tag
<tr> : 가로태그
<td> : 세로태그
<caption> : 표 제목
<thead> : 제목 행 - <tr> - <th>
<tfoot> : 바닥 행
<tbody> : 내용, 본문
<colspan> : 셀 가로 병합
<rowspan> : 셀 세로 병합
테이블의 구조적으로 파악하기에 도움을 주는 태그들의 중요성을 알게되었어요.
왜 foot 을 body보다 먼저 적을까 궁금했는데 밑에 설명이 있었네요 ~ ~
HTML5.1 ~ 현재(5.2): <tfoot>이 <tbody> 뒤에 위치해야 합니다. <tfoot>의 위치가 <tbody> 앞에 나올 경우 웹 접근성의 키보드의 초점 이동 순서 항목에 문제가 있기 때문에 변경되었습니다.
앞으로는 foot을 body 뒤에 적으면 되겠군요, 영상을 찍을 시점에는 HTML4~5 시점이라 foot이 먼저나온걸로 !
5분5초에서 <tr>로 시작했으면</tr>로 닫아야하는거 아닌가요? 궁금합니다
<table> 표
<td>/<th> 셀과 column
<tr>: 행,row
<caption> 제목
<thead> 제목행
<tbody>본
<tfoot> 바닥행
<colspan="2"> 가로병합
<rowspan="2"> 세로병합
<table> : 표
<td>/<th> : 셀, column
<tr> : 행, row
<caption> : 제목
<thead> : 제목행
<tbody> : 본문행
<tfoot> : 바닥행
<colspan = "2"> : 가로 병합
<rowspan = "2"> : 세로 병합
<table> , <td> , <th> , <tr> , <caption> , <thead> , <tbody> , <tfoot> , colspan , rowspan
<table>:테이블 태그
<td>데이터 셀
<th>셀 제목
<tr>행
<caption>표의 제목
<thead>제목행 그룹
<tbody>본문행 그룹
colspan: 가로 뱡향 병합
rowspan:세로 방향 병합
테이블 태그
데이터 표를 나타내는 태그.
<td>, <th> : 데이터 셀
<tr> : 행
<table> : 표
<caption> : 표의 제목. table태그 안에서 가장 위에 선언되야한다.
<thead> : 제목 행을 그룹
<tfoot> : 바닥행을 그룹
<tbody> : 본문 행을 그룹.
병합
colspan : 셀을 가로방향으로 병합
rowspan : 셀을 세로방향으로 병합
table 태그를 자제하라는 말이 많아서 대체로 ul,li 혹은 dl dt dd 태그로 대체해서 많이사용하고 있습니다. 적시적소에 맞는 테이블 사용법이 있을련지요.
비공개 글입니다.
감사합니다.
꾸준히 웹접근성에대해 강조해 주셔서
html 작성시 태그의 의미에더욱 고민 해볼수 있었습니다.
/tr로 닫았다고 이해하시면 될듯해요
영상에서 <tr>태그를 </td>태그로 닫으셨는데 아무런 문제가 없는건가요?
그리고 왜 tfoot이 tbody 다음이 아니라 먼저 오게되는건가요? 실제 화면에서는 순서대로 나오는데 입력할때는 순서를 왜 바꿔서 입력하는지 궁금합니다. 아니면 순서는 상관없는건가요?