[HTML] table 태그 정복하기

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

---

기본형

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

 

<table>

표를 나타내는 html 태그

행을 나타내는 <tr>과 셀을 나타내는 <th>, <td> 태그 등이 사용됨.

 

<tr>

- table row

- 표 내부에서 행을 나타내는 태그

 

<th>

- table header

- header의 cell을 나타내는 태그

- 기본 스타일 : text-align:center, font-weight:bold

 

<td>

- table data

- 일반적인 칸(cell)을 나타내는 태그

- 기본 스타일 : text-align:left

 

colspan, rowspan 속성 - 행 또는 열 합치기

※ 이러한 속성들을 적어줄 때 합쳐지는 셀들은 html 상에서 지워줘야 한다.

 

colspan

- 가로로 이웃한 셀을 합칠 때

- column이 열이라는 뜻, 열 하나하나를 합치니깐 가로로 합치게 되는 것.

 

 

rowspan

- 세로로 이웃한 셀을 합칠 때

- row(행), 행 하나하나를 합치니깐 세로로 합치게 되는 것.

 

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

 

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

<caption>

- 표 제목을 표시하는 태그

- <table> 태그 바로 다음에 사용.

- 기본 스타일 : 표의 위쪽 가운데 정렬

<table>
	<caption>
    	<strong>큰 제목</strong>
        <span>작은 제목</span>
    </caption>
    <tr>
    	<td></td>
    </tr>
</table>

 

<figcaption>

표의 제목을 표시하는 두번째 방법으로 <figure>태그와 <figcation> 태그를 사용할 수 있다.

- caption 태그는 사용하지 않으며 가운데정렬 되지 않는다.

- figure 태그로 table 태그를 감싼 후 <figcaption 태그를 이용해 표에 제목을 붙인다.

 

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

aria-describedby 속성 - 표에 대한 설명 제공하기

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

<table> 태그 안에 aria-desccibedby 속성을 추가해 연결하면 표를 이해하는 데 도움을 줄 수 있다.

 

예를 들면 #summary 라는 부분의 설명을 aria-describedby="summary"를 이용해 설명을 연결할 수 있다.

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

 

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

일부 표에서는 제목, 본문, 요약과 같은 내용들을 표시하기도 한다.

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

위와 같이 표의 구조를 정의하면 시각장애인들도 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있다.

이뿐만 아니라, css를 사용해 표의 제목, 바디, 푸터 부분에 각각 다른 스타일을 지정할 수도 있다.

 

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

표에서 하나의 열에 스타일을 지정하거나 열을 몇 개씩 묶어 스타일을 한꺼번에 지정할 수도 있다.

 

<col>

한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용한다.

닫는 태그가 없다.

둘 이상의 열을 선택할 때는 span 속성을 이용해 몇 개를 함께 묶어줄지 지정할 수 있다.

<colgroup> 태그를 사용해 묶는 열의 개수만큼 <col> 태그를 넣으면 된다.

 

※ 위치는 <caption> 태그 다음, <tr>,<td> 태그 전에 사용되어야 한다.

 

※ 행을 묶는 태그는 없는가?
html에서 표를 만들 때 기본적으로 <tr>태그로 행을 만들기 때문에 따로 행을 묶는 태그는 없다.
반면, 표를 만들 때 열을 만드는 태그는 없기 때문에 열의 스타일을 따로 줄 때는 <col>, <colgroup>태그를 따로 사용한다.

 

See the Pen by seyoungjoy (@seyoungjoy) on CodePen.

 

 

참고

두잇 HTML5 CSS3 웹 표준의 정석