[HTML] 표 만들기

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

표의 시작과 끝을 알려주는 <table>과 </table> 태그를 표시하고 그 사이에 표와 관련된 태그를 모두 넣는다.

표에 제목을 붙이고 싶다면 <table> 태그 바로 아랫줄에 <caption> 태그를 사용한다.

- 기본형

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

 

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

<tr> 태그는 행을 만들고 <td> 태그는 행 안에 있는 셀을 만들기 때문에 <table> 태그 안에 <tr>, <td> 태그가 모두 모여야 하나의 셀을 만들 수 있다.

- 기본형

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

 

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

제목은 <thead>, 본문은 <tbody>, 요약은 <tfoot> 태그에 해당한다.

(...생략..)
<h2>상품 구성</h2>
<table>
	<caption>선물용 상품 구성</caption>
	<thead>
		<tr>
			<th>용도</th>
			<th>중량</th>
			<th>개수</th>
			<th>가격</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>선물용</td>
			<td>3kg</td>
			<td>11 ~ 16과</td>
			<td>35,000원</td>
		</tr>
		
		<tr>
			<td>선물용</td>
			<td>5kg</td>
			<td>18 ~ 26과</td>
			<td>52,000원</td>
		</tr>
	</tbody>
</table>
(...생략...)

해당 코드를 실행하면

다음과 같은 표가 나타나게 된다.

 

* 행이나 열을 합치는 rowspan, colspan 속성

행을 합치려면 rowspan, 열을 합치려면 colspan 속성을 사용해서 몇 개의 셀을 합칠지 지정하면 된다.

- 기본형

<td rowspan = "합칠 셀의 개수">셀의 내용</td>
<td colspan = "합칠 셀의 개수">셀의 내용</td>

예를 들어, 위의 코드를 살짝 변형해서 행(선물용)을 합쳐보겠다.

(...생략...)
<h2>상품 구성</h2>
<table>
	<caption>선물용 상품 구성</caption>
	<thead>
		<tr>
			<th>용도</th>
			<th>중량</th>
			<th>개수</th>
			<th>가격</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td rowspan = "2">선물용</td>
			<td>3kg</td>
			<td>11 ~ 16과</td>
			<td>35,000원</td>
		</tr>
		
		<tr>
			<td>5kg</td>
			<td>18 ~ 26과</td>
			<td>52,000원</td>
		</tr>
	</tbody>
</table>
(...생략...)

행을 합칠 것이기 때문에 rowspan 속성을 사용하였다. 그리고 2개의 행을 합치기 때문에 속성값은 2를 줬다.

해당 코드를 실행하면

다음과 같은 표가 나타나게 된다.

 

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

<col> 태그는 열을 1개만 지정할 때 사용하고, <colgroup> 태그는 <col> 태그를 2개 이상 묶어서 사용한다.

- 기본형

<colgroup>
	<col>
</colgroup>

<col>과 <colgroup> 태그는 반드시 <caption> 태그 다음에 써야 한다.

그리고 <col> 태그를 사용할 때는 <colgroup> 태그 안에 <col> 태그를 포함해 표 전체의 열의 개수만큼

<col> 태그를 넣어야 한다.

(...생략...)
<table>
	<caption>여행 상품 구성</caption>
    <colgroup>
    	<col style = "background-color : #eee;">
        <col>
        <col style = "width : 150px;">
        <col style = "width : 150px;">
    </colgroup>
(...생략...)

<colgroup> 태그의 예시로 위와 같은 코드가 있다.

해당 예시에서 <col> 태그의 스타일 속성을 통해 배경색, 너비를 지정할 수 있다.