• 목차

개요

• 해당 테이블을 설계해보자.

테이블 구조 설계

<table>
    <caption>위치 및 면적</caption>
    <thead>
        <tr>
            <th rowspan="2">단</th>
            <th colspan="2">경도와 위도의 극점</th>
            <th rowspan="2">연장거리(㎞)</th>
        </tr>
        <tr>
            <th>지명</th>
            <th>극점</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>동단</th>
            <td>탑동동(왕방산)</td>
            <td>동경 127˚ 03′ 49″</td>
            <td rowspan="4">
                동서간 12.9㎞<br>
                남북간 15.3㎞
            </td>
        </tr>
        <tr>
            <th>서단</th>
            <td>상패동(사천리)</td>
            <td>동경 127˚ 00′ 37″</td>
        </tr>
        <tr>
            <th>남단</th>
            <td>탑동동(장 림)</td>
            <td>북위 37˚ 50′ 34″</td>
        </tr>
        <tr>
            <th>북단</th>
            <td>하봉암동(옥녀봉)</td>
            <td>북위 37˚ 58′ 50″</td>
        </tr>
    </tbody>
</table>

1. <table> 태그 작성
   • border 속성이 없으면 테두리가 없기 때문에 테이블 구조를 확인하기 어려움
   • border 속성은 웹 표준에 어긋나기 때문에 구조를 확인한 후에는 반드시 삭제
2. 표의 제목 <caption> 태그 작성
   • <table> 태그 밖에 쓰는 경우가 있는데 반드시 <table> 태그의 자손으로 작성
3. 여러 행을 묶어줄 행 구조 <thead> <tbody> <tfoot>태그 작성
   • 보통 행 구조 태그는 쓰지 않아도 웹 표준에 어긋나지 않습니다.
   • <thead> 태그는 보통 표 상단의 제목 셀을 묶기 위해 사용합니다.
   • <tbody> 태그는 일반 데이터가 있는 행들을 묶기 위해 사용합니다.
   • <tfoot> 태그는 표의 결론들이 있는 행들을 묶기 위해 사용합니다. ex) 합계, 평균 등
4. 행 태그 <tr> 태그 작성
   • 행이 너무 많거나, 구조가 여러 행이 비슷하면 한 행씩 서서 복사하는 방식으로 작성
5. 첫 번째 줄 <th> <td> 태그 작성
   • rowspan 속성은 해당 데이터 셀(cell)이 확장될 행(row)의 개수를 명시
   • colspan 속성은 해당 데이터 셀(cell)이 확장될 열(column)의 개수를 명시
6. 스타일 입히기(css)

테이블의 열(cloumn)에 공통적으로 옵션을 주고 싶을 때

<table>
    <caption>위치 및 면적</caption>
		<colgroup>
		        <col span="2" style="background: yellow">
						<col style="background: blue">
		        <col style="background: red">
		</colgroup>
		<thead>
				...
		</thead>
		<tbody>
				...
		</tbody>
</table>

• <colgroup> 태그는 표의 열(column)을 묶는 그룹 정의한다
• <col> 태그는 표의 열을 나타내며, 열에 속하는 칸에 공통된 의미를 부여할 때 사용한다.