[HTML] 6강 표 관련 태그

표 관련 태그에 대하여

 웹 문서에서 자료를 정리 할 때 뿐만 아니라 자료의 위치를 정렬하고 싶을 때 사용되는 태그입니다.

 보통 행(row)과 열(column)으로 이루어져이으며, 그 영역을 셀(cell)이라고 표현합니다. 

 한마디로 셀(cell)이 모여서 행(row)과 열(column)을 이루고 그 행열을 표(table)라고 부릅니다.

 이러한 표(table)는 <table>태그, <tr>태그, <td>태그, <th>태그 등으로 구성됩니다.

ex)

표(table)

셀(cell)			행(row)
열(column)

 

---

표 만들어보기

 표를 만들기 위해선 <table>태그를 부모태그로 하여, <tr>태그를 작성한 뒤, <tr>태그의 자식태그로 <td>태그, <th>태그를 작성해줍니다.

 여기서 <table>태그는 전체적인 윤곽을 잡아주는 역할을 하고, <tr>태그는 행을 만들어주는 역할을 합니다.

 <td>태그는 행마다 생성될 셀을 선언해주는 역할을 하며, <th>태그는 셀의 제목을 만들어주는 역할을 합니다.

ex) 

1행제목	1행2셀
2행제목	2행2셀

<table border="2">

<tr>

<th>1행제목</th>

<td>1행2셀</td>

</tr>

<tr>

<th>2행제목</th>

<td>2행2셀</td>

</tr>

</table>

---

셀 합치기

 다양한 표를 표현할 때 셀끼리 행 혹은 열단위로 합쳐야 되는 경우가 생깁니다.

 행단위로 합칠 경우엔 <th>태그나 <td>태그 속성에 rowspan을 지정해준 후, 원하는 갯수 만큼 입력해주면 되며, 열단위로 합칠경우에는 colspan으로 속성을 지정한 뒤 , 원하는 갯수를 입력하면 됩니다.

ex)

행제목합침	1행2셀3셀합침
	2행2셀	2행3셀

<table border="2">

<tr>

<th rowspan="2">행제목합침</th>

<td colspan="2">1행2셀3셀합침</td>

</tr>

<tr>

<td>2행2셀</td>

<td>2행3셀</td>

</tr>

</table>

---

표 제목삽입하기

 표를 표현할 때, 대부분 해당 표가 표현하고자 하는 주제를 제목으로 쓰는 경우가 많습니다.

 그럴 때는 <caption>태그나 <figure>태그와<figcaption>태그를 사용합니다. (<figure>태그와<figcaption>태그는 한 셋트입니다)

 <caption>태그는 <table>태그 바로 다음 줄에 입력해서 사용하며, <figure>태그는 <table>태그 밖에서 감싼 뒤 <figcaption>태그를 <table>태그 전에나 </table>태그 후에 선언하여 사용합니다.

ex)

caption표예제

표예제입니다

행제목합침	1행2셀3셀합침
	2행2셀	2행3셀

<table border="2">

<caption>

<b>caption표예제</b>

<p>표예제입니다</p>

</caption>

<tr>

<th rowspan="2">행제목합침</th>

<td colspan="2">1행2셀3셀합침</td>

</tr>

<tr>

<td>2행2셀</td>

<td>2행3셀</td>

</tr>

</table>

ex)

행제목합침	1행2셀3셀합침
	2행2셀	2행3셀

figcaption표예제

표예제입니다

<figure>

<table border="2">

<tr>

<th rowspan="2">행제목합침</th>

<td colspan="2">1행2셀3셀합침</td>

</tr>

<tr>

<td>2행2셀</td>

<td>2행3셀</td>

</tr>

</table>

<figcaption>

<b>figcaption표예제</b>

<p>표예제입니다</p>

</figcaption>

<figure>

---

표에 대한 설명 삽입하기

 스크린 리더에서 표에 대한 설명을 삽입할 때 <table>태그의 속성 중 aria-describedby를 설정하면 됩니다.

ex)

설명삽입예제입니다

행제목합침	1행2셀3셀합침
	2행2셀	2행3셀

 

<p id="des">설명삽입예제입니다</p>

<table border="2" aria-describedby="des">

<tr>

<th rowspan="2">행제목합침</th>

<td colspan="2">1행2셀3셀합침</td>

</tr>

<tr>

<td>2행2셀</td>

<td>2행3셀</td>

</tr>

</table>

---

 

표에 대한 구조 정의하기

 표를 작성할 때, 데이터를 좀 더 쉽게 표현하기 위해 제목 부분, 내용, 요약 부분으로 구분지어 작성하는 경우가 있습니다.   그럴 때 제목 부분은 <thead>태그로 내용 부분은 <tbody>태그로 그리고 요약 부분은 <tfoot>태그로 작성합니다.

 <tfoot>태그와 <tbody>태그는 서로 위치가 변경이 가능합니다.

ex)

표구조정의예제

표예제입니다

1행1셀	1행2셀3셀합침
2행1셀	2행2셀	2행3셀
3행1셀	3행2셀	3행3셀

<table border="2">

<caption>

<b>표구조정의예제</b>

<p>표예제입니다</p>

</caption>

<thead>

<tr>

<th>1행1셀</th>

<td colspan="2">1행2셀3셀합침</td>

</tr>

</thead>

<tbody>

<tr>

<th>2행1셀</th>

<td>2행2셀</td>

<td>2행3셀</td>

</tr>

</tbody>

<tfoot>

<tr>

<th>3행1셀</th>

<td>3행2셀</td>

<td>3행3셀</td>

</tr>

</tfoot>

</table>

---

표에 여러 열들을 병합하기

 표를 작성할 때, 여러 열을 묶어서 스타일을 지정하거나, 하나의 열에 스타일을 지정할 수도 있습니다.

 이럴 때 <col>태그를 사용하며 여러열을 묶을 때는 보통 <colgroup>태그를 사용하며 <col>태그의 span태그를 이용하여 묶습니다.

ex)

표구조정의예제

표예제입니다

1행1셀	1행2셀	2행3셀
2행1셀	2행2셀	2행3셀
3행1셀	3행2셀	3행3셀

<table border="2">

<caption>

<b>표구조정의예제</b>

<p>표예제입니다</p>

</caption>

<colgroup>

<col span="2" style="background-color:red;">

<col style="background:green">

</colgroup>

<tr>

<th>1행1셀</th>

<td>1행2셀</td>

<td>2행3셀</td>

</tr>

<tr>

<th>2행1셀</th>

<td>2행2셀</td>

<td>2행3셀</td>

</tr>

<tr>

<th>3행1셀</th>

<td>3행2셀</td>

<td>3행3셀</td>

</tr>

</table>

---

지금까지 표 관련 태그에 대해 알아봤습니다. 다음 강의에서는 이미지 관련 태그에 대해 알아보겠습니다.