2.7 HTML 표 구성하기 (table, tr, th, td 태그 등등)

표(table)는 2차원 격자형태로 이루어진 데이터를 의미한다.

1. table 태그

HTML에서 표를 생성할 때 table 태그를 사용한다.

form태그와 마찬가지로 표 관련 태그는 모두 table 태그 안에서 사용한다.

💡 <table></table>

 

 

2.caption 태그

💡 <caption></caption>

표를 생성할 때 웹 접근성을 향상하는 방법 중 하나가 표 제목을 설정하는 것이다.

반드시 표 제목을 만드는 caption 태그를 사용해야 한다.

caption 태그는 table 태그 안에서 가장 첫 번째로 사용해야 한다.

 

 

3. tr 태그

tr(table row)태그는 표에서 행을 생성할 때 사용한다.

tr태그 하나당 행 하나를 생성, 여러 개의 행을 만들고 싶다면 tr 태그를 여러 번 사용하면 된다.

 

 

4. th, td 태그

th(table header) 태그와 td(table data) 태그는 표에서 열을 생성할 때 사용한다.

th 태그는 표에서 제목을 나타내는 열을 생성할때 사용한다.

td 태그는 표에서 일반적인 데이터를 나타내는 열을 생성할때 사용한다.

<table>
	<tr>
		<th> 제목 </th>
		<td> 내용 </td>
	<tr>
</table>

 

4x4 table 구상 예시

<table>
        <tr>
            <th>번호</th>
            <th>상품명</th>
            <th>수량</th>
            <th>가격</th>
        </tr>
        <tr>
            <td>1</td>
            <td>콜라</td>
            <td>2개</td>
            <td>1,600원</td>
        </tr>
        <tr>
            <td>2</td>
            <td>사이다</td>
            <td>5개</td>
            <td>1,0000원</td>
        </tr>
        <tr>
            <td>3</td>
            <td>탄산수</td>
            <td>3개</td>
            <td>9,900원</td>
        </tr>
    </table>

 

 

 

5. row span과 colspan 속성

생성된 셀을 병합할 수 있다.

'행과 행을 병합할 때는 rowspawn

열과 열을 병합할때는 colspan

<table>
    <thead>
      <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td>총 금액</td>
        <td colspan="3">6,500원</td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
      </tr>
      <tr>
        <td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td rowspan="2">1,000원</td>
      </tr>
      <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
      </tr>
    </tbody>
  </table>

 

 

6. thead, tfoot, tbody 태그

표에서도 행을 묶어 그룹화할 수 있다.

thead 태그는 헤더 영역에 해당하는 행 그룹화

tbody 태그는 본문 영역에 해당하는 행 그룹화

tfoot 태그는 푸터 영억에 해당하는 행 그룹화

• 이 그룹화 태그는 표에서 표현하려는 데이터 형식에 따라 사용하지 않을 수 도 있다.
• 사용한다면 반드시 thead, tbody, tfoot 순서이어야 한다.
• thead와 tfoot 태그는 한 번만 사용할 수 있고, thead 태그로 그룹화한 행은 th태그로 열을 생성해야 한다.

<table>
    <thead>
      <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
      </tr>
    </thead>
    
    <tbody>
      <tr>
        <td>1</td>
        <td>콜라</td>
        <td>1개</td>
        <td>1,500원</td>
      </tr>
      <tr>
        <td>2</td>
        <td>사이다</td>
        <td>2개</td>
        <td rowspan="2">1,000원</td>
      </tr>
      <tr>
        <td>3</td>
        <td>탄산수</td>
        <td>3개</td>
      </tr>
    </tbody>
    
    <tfoot>
      <tr>
        <td>총 금액</td>
        <td colspan="3">6,500원</td>
      </tr>
    </tfoot>
  </table>

사용이유

• thead와 tfoot의 정보를 먼저 습득해 표 내용을 빠르게 파악할 수 있다.
• 스크린 리더기를 사용한 웹페이지 탐색에 도움을 준다.
• 이 밖에도 표를 인쇄할 때, 여러 장에 걸쳐있는 표가 어떤 표인지 쉽게 파악가능

 

 

7. col, colgroup 태그

표에서 열을 그룹화할 때는 col태그와 colgroup 태그를 사용한다.

col태그는 하나의 열 그룹화

colgroup태그는 span을 활용해 두 개 이상의 열 그룹화

<col>
<colgroup span ="그룹화할 열의 개수">

열 전체를 그룹화해서 통일된 스타일을 적용하려는 목적으로 쓰인다.

caption 태그를 사용했다면 그다음에 col 태그나 colgroup 태그를 쓰고 tr태그를 써야 한다.

• 그룹화할 열의 개수와 사용한 열 개수가 일치해야 한다.

아래 코드는 1열의 너비를 80px, 2열과 3열의 너비를 150px, 4열의 너비를 100px로 지정한다.

<table>
    <col style="width:80px;">
    <colgroup span="2" style="width:150px"></colgroup>    
    <col style="width:100px">
    <tr>
      <th>번호</th>
      <th>상품명</th>
      <th>수량</th>
      <th>가격</th>
    </tr>
    <tr>
      <td>1</td>
      <td>콜라</td>
      <td>1개</td>
      <td>1,500원</td>
    </tr>
    <tr>
      <td>2</td>
      <td>사이다</td>
      <td>2개</td>
      <td rowspan="2">1,000원</td> <!--행 병합-->
    </tr>
    <tr>
      <td>3</td>
      <td>탄산수</td>
      <td>3개</td> 
      <!-- 4행 4열은 3행 4열과 병합했으므로 생성하지 않습니다. -->
    </tr>
    <tr>
      <td>총 금액</td> 
      <td colspan="3">6,500원</td>
      <!-- 5행 2열부터 열 3개를 병합했으므로 나머지 열은 생성하지 않습니다. -->
    </tr>
  </table>

 

8. scope 속성

웹 접근성 향상을 위해 사용하는 속성이다.

제목을 나타내는 셀의 범위를 지정한다. 따라서 th 태그에만 사용가능하다.

scope 속성은 col, colgroup, row를 값으로 넣을 수 있다.

가로방향이 제목 : row

세로방향이 제목 : col

제목이 colspan이나 rowspan으로 병합된 셀이라면 colgroup 또는 rowgroup 사용

<table>
    <tr>
      <th scope="col">구분</th>
      <th scope="col">중간고사</th>
      <th scope="col">기말고사</th>
    </tr>
    <tr>
      <th scope="row">전공</th>
      <td>A+</td>
      <td>B+</td>
    </tr>
    <tr>
      <th scope="row">교양</th>
      <td>C-</td>
      <td>B</td>
    </tr>
  </table>