[HTML] Chapter 05. 표만들기

1. 표를 만드는 Tag: <table></table>

표를 만드는 Tag는 <table><table>로 해당 태그만으로는 구현되는 정보가 존재하지 않는다.

기본적으로 행은 <tr></tr>, 열은 <td></td>로 표시한다.

별도로 style을 지정하지 않으면 표시되는 픽셀은 없다.

해당 table 태그 안에 위치한 tr만큼 행이 생성되고, td는 행에 구성된 열을 만든다. (style과 선의 종류에 대해서는 추후 디자인 챕터에서 다룰 것이다.)

 

선행 학습: table에 선을 긋는 것은 ‘style border:0px’로 굵기를 지정하고, ‘solid color;’로 지정한다. 

<table style="border:5px dotted green;">

해당 속성은 td에도 적용할 수 있다. tr은 가로 라인이므로 해당 스타일 적용이 불가능하다. 

 

2. 표의 특성을 일괄적으로 지정하는 Tag: <style></style>

표나 특정 영역에 대한 기본적인 표현 방식을 지정할 때, style을 이용하면 쉽게 페이지의 속성을 지정할 수 있다.

지정하고자 하는 tag 영역을 style 태그 안에 작성하고 {}를 작성하여 {}안에 해당 스타일을 지정한다.

{border-collapse: collapse}를 이용하면 table내의 겹치는 줄을 1줄로 합쳐서 표현한다.

 

<style>
	table{border:1px solid red;}
	td{border:1px solid green;}
</style>

 

중요: ;(세미콜론)의 기능은 프로그래밍 언어에서 특정 명령어가 끝났음을 표시해주는 기능을 한다.

때문에 명령어가 남은 상태에서 ;가 삽입되면 오류가 발생할 수 있고, 파일 이름에 ;가 들어간 경우 OS의 연산처리에서 문제가 발생하여 파일을 읽지 못할 수도 있다.

 

3. 표의 제목을 지정하는 Tag: <caption></caption>

표의 제목을 지정하는 태그는 <caption></caption>이다.

해당 태그는 table 태그 바로 아래 삽입하여 제목을 표현하는데 사용한다.

해당 caption 태그 또한 table과 td와 마찬가지로 별도의 스타일 지정이 없다면 투명한 (0px) 상태로 적용된다.

 

4. 표의 강조와 가운데 정렬 Tag: <th></th>

th태그는 표에서 데이터가 가운데 정렬으로 적용되면서 Bold 처리의 속성을 가지고 있다.

table 및 td와 마찬가지로 head에서 style 지정이 가능하다.

일반적인 td 태그보다 굵고 가운데 정렬이 되는 특성을 가지고 있어 표의 강조나 제목 표시에 적절하다. (물론 이러한 속성은 style로도 지정이 가능하지만 th 태그를 사용하면 더욱 쉽게 지정할 수 있다.

 

5. 표의 가로셀 병합 속성: <td colspan=”n”></td>

표에서 분할된 항목을 병합할 때는, <td colspan=”n”></td>를 사용한다.

해당 태그를 사용하여 다음에 오는 가로칸과 병합할 수 있다.

일반적으로 오른쪽 칸이 왼쪽 칸에 합쳐지는 방식을 취한다.

이때, 병합하고자 하는 칸은 ‘공란’이어야 한다. (td태그 또한 존재하면 안된다.)

만약 공란이 아니라면 빈 칸이 표시되면서 표의 크기가 조금 변경된다. 

기본적으로 td의 태그 수에 따라 열의 수가 결정되기 때문에 공란 혹은 기존 표보다 많은 행이나 n 수가 지정되면 공란으로 표시된다.

 

6. 표의 세로 셀 병합 속성: <td rowspan=”n”></td>

표에서 세로로 항목을 합치고 싶다면 <td rowspan=”n”></td>를 이용하면 된다.

행의 병합에는 tr 항목의 수에 따라 결정되므로 tr보다 n의 숫자가 많다면 ‘행이 아닌 열’로 데이터가 생성된다.

때문에 해당 태그를 사용할 때 오류가 발생하면 “n”을 올바르게 지정했는지 확인할 필요가 있다. 

 

 

7. table 내의 마크업

<thead></thead>, <tbody></tbody>,<tfoot></tfoot>으로 마크업을 세분화할 수 있다.

해당 태그는 별도의 기능이 있는 것은 아니지만 <tr></tr>로만 표를 구분할 때 보다 마크업을 확인하고 수정하기 용이한 장점이 있다.

2017년 이후로 사용된 기법으로 표를 구성하는 제목(혹은 대분류), 데이터(내용), 주석(혹은 비고)를 분류하여 빠르게 내용을 수정하거나 특정 기능을 적용하기 용이한 장점이 있다. 

 

다만, 해당 데이터 분류에 따라 thead, tbody, tfoot 내에서만 colspan 및 rowspan 적용이 가능하다.

thead와 tbody의 셀간에 병합이 불가능하다는 것이다. 

 

8. table 내의 세로줄 그룹화: <colgroup></colgroup>

<colgroup></colgroup>을 이용하면 table 안의 각 세로줄에 그룹을 지정할 수 있다.

<tr></tr>내의 <td></td>혹은 <th></th> 태그의 수만큼 표에서 세로줄이 할당된다.

 

만약 세로를 기준으로 그룹을 지정하여 style을 주고 싶다면 <colgroup></colgroup>을 이용하면된다.

해당 태그안에 <col>을 적으면 1개당 1세로줄의 그룹이 할당된다.

태그 자체에 스타일을 줄 수 있고, 원한다면 span을 적용하여 열 합병이 가능하다. 

 

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