<table>, <th>, <tr>, <td> : 표를 만드는 태그

HTML 에서는 표를 table, 행(가로)를 row, 열(세로)을 column, 행과 열이 만나는 영역을 cell 이라고 한다.

 

1. 기본적인 표 만들기

<table border="1">
	<tr>
    	<td>내용 1</td>
        <td>내용 2</td>
    </tr>
    <tr>
    	<td>내용 3</td>
        <td>내용 4</td>
    </tr>
</table>

<tr> 태그는 row 를 나타내고, <td> 태그는 cell 을 나타낸다.

즉 위의 예시는 2개의 행 그리고 2개의 열인 표를 만든 것이다.

 

table의 속성 중에는 border 라는 속성이 있는데, 이 값을 지정해 주지 않으면 윤곽선이 보이지 않아 구분이 힘들다.

 

 

2. <th> 태그 : 제목 셀

<table border="1">
	<tr>
    	<th></th>
        <th>제목 1</th>
        <th>제목 2</th>
    </tr>
	<tr>
    	<th>제목 3</th>
    	<td>내용 1</td>
        <td>내용 2</td>
    </tr>
    <tr>
    	<th>제목 4</th>
    	<td>내용 3</td>
        <td>내용 4</td>
    </tr>
</table>

예시와 같이 각 행과 열의 제목을 달아 줄 수 있으며,

<th> 태그로 작성하는 내용은 <td> 태그로 작성하는 내용에 비하여 더 굵게 작성된다는 특징을 가지고 있다.

 

 

 

3. colspan, rowspan 속성 : 행 또는 열 합치기

<table border="1">
	<tr>
    	<th></th>
        <th>제목 1</th>
        <th>제목 2</th>
        <th>제목 3</th>
        <th>제목 4</th>
    </tr>
	<tr>
    	<th>제목 5</th>
    	<td>내용 1</td>
        <td>내용 2</td>
        <td>내용 3</td>
        <td>내용 4</td>
    </tr>
    <tr>
    	<th>제목 6</th>
    	<td colspan="4">내용 5</td>
    </tr>
</table>

colspan 속성은 다음과 같이 같은 열에 있는 cell 을 합치는 기능이다.

합치고자 하는 셀의 개수를 작성해주면 쉽게 응용 가능하다.

<table border="1">
	<tr>
    	<th></th>
        <th>제목 1</th>
        <th>제목 2</th>
        <th>제목 3</th>
        <th>제목 4</th>
    </tr>
	<tr>
    	<th>제목 5</th>
    	<td>내용 1</td>
        <td>내용 2</td>
        <td>내용 3</td>
        <td rowspan="2">내용 4</td>
    </tr>
    <tr>
    	<th>제목 6</th>
    	<td>내용 5</td>
        <td>내용 6</td>
        <td>내용 7</td>
    </tr>
</table>

rowspan 은 반대로 같은 행에 있는 cell 을 합치는 속성이다.

colspan 과 마찬가지로 몇 개의 셀을 합칠 것인지 지정해 주기만 하면 되기 때문에 활용이 쉽다.

 

 

 

4. <caption> 태그, <figcaption> 태그 : 표 제목 붙이기

 

표에 제목을 붙이는 태그는 <caption> 태그와 <figcaption> 태그 이렇게 두 가지가 있다. 

 

👉 <caption> 태그

<table border="1">
	<caption>
        <strong>표 제목</strong>
        <p>표 제목</p>
        표 제목
    </caption>
	<tr>
    	<th></th>
        <th>제목 1</th>
        <th>제목 2</th>
    </tr>
	<tr>
    	<th>제목 3</th>
    	<td>내용 1</td>
        <td>내용 2</td>
    </tr>
    <tr>
    	<th>제목 4</th>
    	<td>내용 3</td>
        <td>내용 4</td>
    </tr>
</table>

<caption> 태그는 <table> 태그 바로 다음에 위치하며, 별 다른 옵션을 주지 않아도 가운데 정렬이 된다는 특징이 있다.

 

 

👉 <figcaption> 태그

 

figure 와 caption 의 합성어로 <figure> 태그와 함께 쓰인다는 특징을 가진다.

<figure>
    <figcaption>
        <p>table 위의 표 제목</p>
    </figcaption>
        <table border="1">
            <tr>
                <th></th>
                <th>제목 1</th>
                <th>제목 2</th>
            </tr>
            <tr>
                <th>제목 3</th>
                <td>내용 1</td>
                <td>내용 2</td>
            </tr>
            <tr>
                <th>제목 4</th>
                <td>내용 3</td>
                <td>내용 4</td>
            </tr>
        </table>
    <figcaption>
        <p>table 아래의 표 제목</p>
    </figcaption>
</figure>

 

<figcaption> 은 <figure> 태그와 함께 써야 하고, 위치는 <table> 태그 위 또는 아래에 올 수 있다.

<caption> 태그와 달리 가운데 정렬이 되지 않고 왼쪽 정렬이 된다는 특징이 있다.

 

 

 

5. aria-describedby 속성 : 표 설명

<p id="summary">
	다음 표는 표를 만드는 예시 작업입니다.
</p>
<table border="1" aria-describedby="summary">
	<tr>
    	<th></th>
        <th>제목 1</th>
        <th>제목 2</th>
    </tr>
	<tr>
    	<th>제목 3</th>
    	<td>내용 1</td>
        <td>내용 2</td>
    </tr>
    <tr>
    	<th>제목 4</th>
    	<td>내용 3</td>
        <td>내용 4</td>
    </tr>
</table>

화면 낭독 기능 사용 시에 표에 대한 설명을 할 수 있도록 하는 기능이다.

설명을 나타내는 부분에 id 값을 주고 해당 id 값을 table 의 aria-describedby 속성에 명시해주면 된다.

 

 

 

6. <thead>, <tbody>, <tfoot> 태그 - 표 구조 정의

<table border="1">
	<thead>
        <tr>
            <th></th>
            <th>제목 1</th>
            <th>제목 2</th>
        </tr>
	</thead>
    <tbody>
        <tr>
            <th>제목 3</th>
            <td>내용 1</td>
            <td>내용 2</td>
        </tr>
        <tr>
            <th>제목 4</th>
            <td>내용 3</td>
            <td>내용 4</td>
        </tr>
	</tbody>
    <tfoot>
    	<tr>
        	<th>제목 5</th>
            <td>내용 5</td>
            <td>내용 6</td>
        </tr>
    </tfoot>
</table>

표의 구조를 좀 더 명시적으로 구분하기 위한 것으로 

화면 상에는 표현되지 않지만 코드 작성 시, 그리고 화면 낭독 기능에 유리하다.

 

 

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

<table border="1">
        <colgroup>
                <col span="2" style="background-color:blue;">
                     파란색
                <col span="1" style="background-color:yellow;">
        </colgroup>
        <thead>
            <tr>
                <th></th>
                <th>제목 1</th>
                <th>제목 2</th>
            </tr>
        </thead>
        <tbody>
            
            <tr>
                <th>제목 3</th>
                <td>내용 1</td>
                <td>내용 2</td>
            </tr>
            <tr>
                <th>제목 4</th>
                <td>내용 3</td>
                <td>내용 4</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>제목 5</th>
                <td>내용 5</td>
                <td>내용 6</td>
            </tr>
        </tfoot>
    </table>

같은 열을 묶어서 스타일을 적용할 수 있는 태그이다.

주의해야 할 점은 <caption> 태그 뒤에 쓰여야 하며, <tr>, <td> 태그 전에 쓰여야 한다는 것이다.

 

그렇다면 행을 묶어서 하는 것은 어떻게 할까?

바로 <tr>로 묶어 적용하는 것이다. 

같은 열을 묶어서 스타일 적용 : <col>, <colgroup>
같은 행을 묶어서 스타일 적용 : <tr>