[HTML] 표를 만드는 태그

 

 

 

표(table)은 행(row)와 열(column)으로 이루어져 있고,

행과 열이 만나 이루는 영역을 셀(cell)이라고 부른다.

 

table, tr, td, th 태그 - 기본적인 표 만들기

<table>
	<tr>
		<th>제목 셀</th>
		<td>내용</td>
		<td>내용</td>
		...
	</tr>
	...
</table>

- th : 표에 제목 셀 만들기

- tr : 행 만들기

- td : 행마다 셀 만들기

 

- 행 또는 열을 합치기 위해서는 colspan 또는 rowspan 속성을 사용

- colspan="합칠 셀의 개수"  또는  rowspan="합칠 셀의 개수"

 

 

 

caption 태그, figcaption 태그 - 표에 제목 붙이기

<table>
    <caption>
    	표 제목
    </caption>
    <tr>
    	...
    </tr>
</table>

- caption 태그 안에 다른 태그를 사용해 제목을 여러줄로 표시하거나 텍스트를 꾸밀 수 있음

- 표의 위쪽 중앙에 표시

 

<figure>
    <figcaption>
    	표 제목
    </figcaption>
    <table>
        ...
    </table>
</figure>

- figcaption 태그를 사용할 때는 caption 태그는 사용하지 않는다

- 표의 위쪽 좌측에 표시

- figcaption 태그를 </table> 태그 밑에 사용하면 표 아래쪽에 표시됨

 

 

* aria-describedby 속성 : 표에 대한 설명 제공

화면 낭독기에서 표를 읽어줄 때 도움이 되도록 표 설명을 별도의 문장으로 작성한 후,

table 태그에 aria-describedby="설명태그id" 속성을 추가해 연결하면 표를 이해하는 데 도움이 된다

<p id="summary">표에 대한 설명</p>
<table aria-describedby="summary">
	<caption>표 제목</caption>
    <tr>
	    ...
    </tr>
</table>

 

 

 

thead, tbody, tfoot 태그 - 표 구조 정의하기

일부 표에서는 제목이 표시된 셀과 자료가 표시된 셀 외에도 표 아래쪽에 합계나 요약 내용을 표시하기도 한다.

<table>
    <thead>
    	<tr> ... </tr>
    </thead>
    <tbody>
    	<tr> ... </tr>
    </tbody>
    <tfoot>
    	<tr> ... </tr>
    </tfoot>
</table>

- thead : 제목 부분, tbody : 본문, tfoot : 요약 부분

- HTML5 부터는 tbody, tfoot 위치를 바꾸어도 된다.

- 장점:

  - 이렇게 표의 구조를 정의하면 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있다

  - 구역에 따라 css를 사용해 스타일을 정할 수 있다

  - 자바스크립트를 이용해 제목 부분과 요약 부분을 표의 위아래에 고정하고 본문만 스크롤되도록 만들 수 있다

 

 

 

col, colgroup 태그 - 여러 열 묶어 스타일 지정하기

표에서 하나의 열에 스타일을 지정하거나 열(column)을 몇 개씩 묶어 스타일을 한꺼번에 지정할 수 있음

<table>
    <caption>표 제목</caption>
    <colgroup>
    	<col>
        <col span="2" style="backgroud-color:blue;">
    </colgroup>
    <tr>
    	<td></td>
        <td></td>
        <td></td>
    </tr>
</table>

- col은 닫는 태그가 없다- 여러개를 함께 묶어 스타일을 지정할 때는 span 속성을 이용한다

- colgroup 태그를 사용해서 여러 열을 묶어 스타일을 적용할 수 있다 

  - colgroup 태그 안에 묶는 열의 개수만큼 col 태그를 넣으면 된다

- col과 colgroup 사용시 주의점 

  - caption 태그 뒤, 그리고 tr, td 태그 전에 사용해야 한다 

  - colgroup 태그 안에 있는 col 태그를 비롯, 단독으로 사용한 col 태그의 개수와 표의 열의 개수가 같아야 한다