끄적끄적 개발 블로그입니다.

2 분 소요

표를 만드는 태그

<table>, <tr>, <td>, <th> 태그 - 기본적인 표 만들기

표를 만드는 기본형을 알아보겠습니다.

<table>
    <tr>
        <td>내용</td>
        <td>내용</td>
        ...
    </tr>
    ...
</table>

기본적인 표 만들기

웹에서 표를 만들때 여러 태그가 함께 사용됩니다.

<table> 태그를 이용해 표 저네 윤곽을 잡고 행와 셀을 만들어 주면 됩니다.

순서는 다음과 같습니다.

  1. <table> 태그로 표 자리를 먼저 만듭니다.

    <table>
       
</table>

  2. <tr> 태그로 2개의 행을 만듭니다.

    <table>
    <tr>
       
   	</tr>
    <tr>
       
    </tr>
</table>

  3. <td> 태그로 각 행마다 셀을 3개씩 만듭니다.

    <table>
    <tr>
        <td> .... </td>
        <td> .... </td>
        <td> .... </td>    
   	</tr>
    <tr>
        <td> .... </td>
        <td> .... </td>
        <td> .... </td>  
    </tr>
</table>

  4. 각 셀에 들어갈 내용은 <td>와 </td>사이에 입력합니다.

<th>태그 - 표에 제목 셀 만들기

<th>태그를 사용하면 해당 셀에 들어가는 내용을 셀의 중앙에 배치하고 굵게 표시하는 제목 셀을 만들 수 있습니다.

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

colspan, rowspan 속성- 행 또는 열 합치기

행이나 열을 합치려면 <td>태그나 <th>태그안에서 colspan, rowspan속성을 사용해서 몇 개의 셀을 합칠지 지정합니다.

colspan은 가로로 합쳐질 셀, rowspan은 세로로 합쳐질 셀의 개수 입니다.

<caption> 태그, <figcaption> 태그 - 표에 제목 붙이기

<caption> 태그 사용하기

<caption>태그는 <table> 태그 바로 다음에 사용합니다. <caption> 태그를 사용한 표 제목은 표의 위쪽 중앙에 표시됩니다.

<table>
    <caption><strong>표 제목</strong><p>
        소 제목
        </p></caption>
    <tr>
        <th>...</th>
        <th>...</th>
        <th>...</th>
    </tr>
</table>

<figcaption> 태그 사용하기

figure와 caption의 합성어로 설명 글을 붙이고 싶은 대상을 <figure>태그로 감싼 후 <figcaption> 태그를 이용해 제목이나 설명 글을 입력합니다.

(중앙에 정렬되지 않습니다.)

<figcaption>태그를 <table> 태그보다 앞에 사요하면 표 위에 제목이 표시되고 </table> 태그 다음에 추가하면 표 아래에 제목이 표시됩니다.

<figure>    
	<figcaption>
    	<p>
        	figcaption을 <b> 사용하는 제목</b>
    	</p>
    </figcaption>
	<table>
    	<tr>
			<th>...</th>
        	<th>...</th>
        	<th>...</th>
    	</tr>
    </table>
</figure>

aria-describrdby 속성 - 표에 대한 설명 제공하기

화면 낭독기에서 표를 읽어줄 때 도움이 되도록 표 설명을 별도의 문장으로 자석한 <table>태그 안에 aria-describedby 속성을 추가해 연결하면 표를 이해하는 데 도움이 됩니다.

<thead>, <tbody>, <tfoot> 태그 - 표 구조 정의하기

제목이 있는 부분의 셀과 내용이 있는 부분의 셀을 구분하기 위해서 <thead> - 제목 부분, <tbody> - 본문 부분, <tfoot> - 요약 부분으로 표를 구성합니다.

<table>
    <caption>표의 제목</caption>
	<thead>
    	<tr>제목 영역
            <th>제목</th>
            <th>제목</th>
        </tr>        
	</thead>
	<tbody>
    	<tr>본문
        <th>...</th>
        <th>...</th>
        </tr>    
	</tbody>
	<tfoot>
    	<tr>요약 부분
        <th>...</th>
        <th>...</th>
        </tr>
	</tfoot>
</table>

이렇게 표의 구조를 정의하면 시각장애닏르도 화면 낭독기를 통해 표의 구조를 쉽게 이해할 수 있습니다.

표의 본문이 길어 한 화면을 넘어갈 경우, 자바스크립트를 이용해 제목 부분(<thead>)과 요약부분(<tfoot>)은 표의 위아래에 고정하고 본문(<tbody>)만 스크롤되도록 만들 수 있습니다.

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

표에서 하나의 열에 스타일을 지정하거나 열(column)을 몇 개씩 묶어 스타일을 한꺼번에 지정할 수도 있습니다.

<col>태그는 한 열에 있는 모든 셀에 같은 스타일을 적용하려고 할 때 사용하는 것으로 닫는 태그가 없습니다.

만약 <col>태그를 사용해 둘 이상의 열을 묶어 같은 스타일을 지정하려면 span 속성을 이용해 몇 개를 함께 묶어줄 지 지정가능합니다.

<colgroup>을 통해서도 묶어줄 수 있는데 태그 안에 묶는 열의 개수만큼 <col> 태그를 넣으면 됩니다.

주의
<col>태그와 <colgroup>태그는 <caption> 태그 뒤와 <tr>, <td> 태그 전에 사용해야 한다는 점입니다.
<colgroup> 태그 안에 있는 <col> 태그를 비롯해 단독으로 사용한 <col> 태그의 개수와 표의 열의 개수가 같아야 합니다.

<table>
    <caption>colgroup 연습하기</caption>
    <colgroup>
        <col> #별다른 스타일을 지정하지 않고 열 개수를 맞추기 위한 태그입니다.
        <col span="2" style="background-color:blue;">
        <col style="background-color:yellow;">
    </colgroup>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

복습하기

빈칸 채우기

<table>
    <caption>
        <small>(단위:kg)</small>
    </caption>
    <colgroup>
        <col style="bakcground:#eee;">
        <col>
    </colgroup>
    <tr>
        <th>WHO권장량</th>
        <td>18.25</td>
    </tr>
    ...
</table>

업데이트:

댓글남기기

참고