[HTML] 4-3. 표 만들기

4-3. 표 만들기

표의 구성 요소 알아보기

---

표^table는 행^row과 열^column 그리고 셀^cell로 이루어집니다.

아래 표는 행이 4개, 열이 3개, 셀이 12개인 표입니다.

표를 만드는 < table >, < caption > 태그

---

• < table >: 표의 시작과 끝을 나타내는 태그
• < caption >: 표의 제목을 나타내는 태그로, < table > 태그 바로 아랫줄에 사용. 제목은 표의 위쪽 중앙에 표시됨.

👍 예시

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

행을 만드는 < tr > 태그와 셀을 만드는 < td >, < th > 태그

---

< table > 태그만 작성하면 표가 만들어지지 않습니다. < table > 태그 안에 행이 몇 개인지, 각 행에는 셀이 몇 개인지 지정해야 합니다.

👍 예시

<table>
	<tr>
		<td>1행 1열</td>
		<td>1행 1열</td>
	</tr>
	<tr>
		<td>2행 1열</td>
		<td>2행 2열</td>
	</tr>
</table>

1행 1열	1행 1열
2행 1열	2행 2열

표의 제목 행과 같이 글자를 진하게 표시하고 싶을 때는 < td > 태그 대신 < th > 태그를 사용합니다.

👍 예시

<table>
    <caption>표 예시</caption>
    <tr>
    	<th>제목 셀 1</th>
        <th>제목 셀 2</th>
    </tr>
	<tr>
		<td>1행 1열</td>
		<td>1행 2열</td>
	</tr>
	<tr>
		<td>2행 1열</td>
		<td>2행 2열</td>
	</tr>
</table>

표 예시

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

표의 구조를 지정하는 < thead >, < tbody >, < tfoot > 태그

---

일부 표에서는 아래 그림과 같이 제목과 본문, 그리고 요약이 있는 부분으로 표의 구조를 나누어 표시하기도 합니다. 이때 < thead >와 < tbody >, < tfoot > 태그를 사용합니다.

태그 이름은 표를 뜻하는 table의 ‘t’와 제목, 본문, 요약을 각각 합친 말입니다.

이렇게 하면 CSS를 사용해 표의 제목, 본문, 요약에 각각 다른 스타일을 적용할 수 있습니다.

또한 웹 브라우저에서 보이지는 않지만, 화면 낭독기나 자바스크립트 등에서 인식할 수 있습니다.

👍 예시

<table>
    <caption>표 예시</caption>
    <thead>
        <tr>
            <th>제목 셀 1</th>
            <th>제목 셀 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1행 1열</td>
            <td>1행 2열</td>
        </tr>
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
        </tr>
    </tbody>
</table>

표 예시

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

행이나 열을 합치는 rowspan, colspan 속성 알아보기

---

< td > 태그나 < th > 태그의 rowspan, colspan 속성을 사용하면 셀 병합이 가능합니다.

rowspan은 행 기준의 범위를 늘리는 것이므로 열 방향의 셀을 합치고,

colspan은 열 기준의 범위를 늘리는 것이므로 행 방향의 셀을 합칩니다.

👍 예시

<table>
    <caption>표 예시</caption>
    <thead>
        <tr>
            <th></th>
            <th>제목 셀 1</th>
            <th>제목 셀 2</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan = '2'>1,2 행</td>
            <td>1행 1열</td>
            <td>1행 2열</td>
        </tr>
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
        </tr>
        <tr>
            <td rowspan = '2'>3,4 행</td>
            <td>3행 1열</td>
            <td>3행 2열</td>
        </tr>
        <tr>
            <td>4행 1열</td>
            <td>4행 2열</td>
        </tr>
    </tbody>
</table>

표 예시

	제목 셀 1	제목 셀 2
1,2 행	1행 1열	1행 2열
	2행 1열	2행 2열
3,4 행	3행 1열	3행 2열
	4행 1열	4행 2열

열을 묶어주는 < col >, < colgroup > 태그

---

특정 열에 배경색을 넣거나 너비를 바꾸려면 열을 선택할 수 있어야 합니다.

그럴 때 < col > 태그와 < colgroup > 태그를 사용합니다.

< col > 태그는 1개의 열을, < colgroup > 태그는 < col > 태그를 2개 이상 묶어서 사용합니다.

💥 주의 사항

• 두 태그는 반드시 < caption > 태그 바로 아랫줄에 써야 함
• < col > 태그를 사용할 때는 < colgroup > 태그 안에 < col > 태그의 수가 표의 전체 열의 개수와 같도록 작성해야 한다.
• 단, < col > 태그에서 span 속성을 사용할 경우 표의 전체 열의 개수보다 적게 작성할 수 있다.

👍 예시

1. 모든 열에 대해 < col > 태그 작성하기

<table>
    <caption>표 예시</caption>
    <colgroup>
    	<col style="background-color:#eee;">
        <col>
        <col style="width:150px;">
        <col style="width:150px;">
    </colgroup>
    <thead>
        <tr>
            <th></th>
            <th>제목 셀 1</th>
            <th>제목 셀 2</th>
            <th>제목 셀 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan = '2'>1,2 행</td>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
        <tr>
            <td rowspan = '2'>3,4 행</td>
            <td>3행 1열</td>
            <td>3행 2열</td>
            <td>3행 3열</td>
        </tr>
        <tr>
            <td>4행 1열</td>
            <td>4행 2열</td>
            <td>4행 3열</td>
        </tr>
    </tbody>
</table>

1. < col > 태그의 span 속성 사용하기

<table>
    <caption>표 예시</caption>
    <colgroup>
    	<col style="background-color:#eee;">
        <col>
        <col span="2;" style="width:150px">
    </colgroup>
    <thead>
        <tr>
            <th></th>
            <th>제목 셀 1</th>
            <th>제목 셀 2</th>
            <th>제목 셀 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan = '2'>1,2 행</td>
            <td>1행 1열</td>
            <td>1행 2열</td>
            <td>1행 3열</td>
        </tr>
        <tr>
            <td>2행 1열</td>
            <td>2행 2열</td>
            <td>2행 3열</td>
        </tr>
        <tr>
            <td rowspan = '2'>3,4 행</td>
            <td>3행 1열</td>
            <td>3행 2열</td>
            <td>3행 3열</td>
        </tr>
        <tr>
            <td>4행 1열</td>
            <td>4행 2열</td>
            <td>4행 3열</td>
        </tr>
    </tbody>
</table>

위 두 코드 모두 아래와 같은 동일한 표를 만들어냅니다.

표 예시

	제목 셀 1	제목 셀 2	제목 셀 3
1,2 행	1행 1열	1행 2열	1행 3열
	2행 1열	2행 2열	2행 3열
3,4 행	3행 1열	3행 2열	3행 3열
	4행 1열	4행 2열	4행 3열

정리

---

• 표는 행, 열, 셀로 이루어진다.
• 표는 < table > 태그를 사용해 만들고, < caption > 태그는 표의 제목을 만든다. < caption > 태그는 < table > 태그 바로 아래에 사용해야 한다.
• < thead >, < tbody >, < tfoot > 태그를 이용해 표의 구조를 만든다.
• 표는 기본적으로 < tr > 태그를 이용해 행을 먼저 나누고, 행 안에서 < th> 또는 < td > 태그를 이용해 셀을 나눈다.
• < th >나 < td > 태그의 rowspan, colspan 속성을 이용하면 각각 열 방향, 행 방향의 셀 병합이 가능하다.
• 열 단위로 효과를 주고 싶은 경우 < caption > 태그 바로 아래에 < colgroup > 태그를, < colgroup > 태그 안에 < col > 태그를 사용한다. 이 때 < col > 태그가 나타내는 열의 개수는 표의 전체 열의 개수와 동일해야 한다.