[HTML] HTML에서의 테이블표현

1. <table> 태그

 

 

- <table> 태그 

> HTML에서 테이블을 정의하는 태그

> m행 x n열 → m개의 <tr>태그, 각 <tr>태그 내에서 n개의 <td>태그

> border-spacing 속성으로 테이블간 셀들의 간격을 조절할 수 있다. (px단위)

 

- <caption>태그

> table에 해당하는 제목을 표시

> 테이블 레이아웃에는 아무런 영향을 미치지 않음

> 반드시 <table>의 시작태그 바로 다음에 위치해야 함

→ <table과 <caption>태그 사이에는 다른 어떤 태그도 위치할 수 없음

→ <tr>또는 <td>태그 내에서 사용하면 무시된다.

→ 테이블 상단에 진하게 가운데 정렬로 표시

→ CSS caption-side(위아래정렬) 속성과 text-align(좌우정렬) 속성으로 위치 및 정렬 방식을 조정

 

- <tr> 태그

> 테이블에서 하나의 줄에 해당하는 행(row)을 정의하는 태그

> <td> 또는 <th> 태그를 포함해야만 사용 가능

 

- <td> 태그

> 테이블에서 데이터가 표시되는 표준 셀을 정의

> 반드시 <tr> 태그 내에서 사용

> 셀 내용 → 왼쪽 정렬로 표시

 

- <th> 태그

> 테이블 내부에서 행/열의 제목을 표시하는 헤더 셀을 정의

> 반드시 <tr> 태그 내에서 사용

> 셀 내용 → 진하게 가운데 정렬로 표시

<caption>table제목 태그</caption>

 

1번째 <tr>	<th>구분타이틀</th>	<th>구분타이틀<th>	<th>구분타이틀</th>
2번쨰 <tr>	<td>내용셀</td>	<td>내용셀</td>	<td>내용셀</td>

 

---

 

2. 셀 병합과 요소 배치

 

- 셀 병합

 

> 인접한 여러 셀을 합쳐 하나의 셀로 만드는 경우

→ 다양한 모양의 테이블 생성이 가능

 

> rowspan 속성과 colspan 속성

→ <td> 또는 <th> 태그 내에서 속성으로 사용

→ rowspan="n" ==> 현재 셀의 위치에서 n개의 행(세로 방향으로 인접한 n개의 셀)을 병합

→ colspan="n" ==> 현재 셀의 위치에서 n개의 열(가로 방향으로 인접한 n개의 셀)을 병합

 

rowspan="2"	colspan="2"
	내용1	내용2

 

 

 

※ 위와같은 테이블은 다음과 같이 표현된다.

 

<table border="1">
    <tbody>
        <tr>
            <th rowSpan="2">rowspan="2"</th>
            <th colSpan="2">colspan="2"<th>
        <tr/>
        <tr>
            <td>내용1</td>
            <td>내용2</td>
        <tr/>

</tbody>

</table>

 

- 요소배치

 

> 바둑판식 배열처럼 질서 정연한 요소의 배치가 가능하다.

> 각 셀의 내용으로 다양한 HTML 요소가 가능
    →  텍스트, 목록, 이미지, 테이블 등

 

---

 

3. 테이블 콘텐츠 그룹핑과 열 단위 스타일 지정

 

- <colgroup> 태그

> 하나 이상의 열들을 모아서 한꺼번에 스타일을 지정할 때 사용

> <col> 태그를 자식태그로 가지며, width 속성으로 조절한다.

 

- <col> 태그

> 지정한 열에 대해서 서로 다른 포맷팅을 정의하는 태그

> <colgroup> 태그를 부모태그로 가진다.

> 종료태그 없이 사용

> span="n" 속성 → 해당 태그의 스타일이 적용되는 열의 개수

 

- <thead> 태그

> 테이블의 '머리' 에 해당하는 태그

> 테이블의 최상단에 위치한다.

> th로만 이루어진 하나의 <tr>의 경우 <thead>의 영역에 해당

 

- <tbody> 태그

> 테이블의 '몸체' 에 해당하는 태그

> 테이블의 중단에 위치한다.

> th와 td가 한 tr에 존재하는 경우 <tbody>의 영역에 해당

 

- <tfoot> 태그

> 테이블의 '꼬릿말' 에 해당하는 태그

> 테이블의 최하단에 위치한다

 

※ 전체적인 순서는 <table> → <caption> → <colgroup> → <thead> → <tfoot> → <tbody> → <tr> → <th> → <td> 순서로 작성한다.

※ 왜 tbody 다음 tfoot이 아닌가?? 라는 의문이 있을 수 있다. 이는 보여지는 화면에는 이상이 없지만, W3C 접근성 검사에서 경고를 발생시킨다.

※ <thead>, <tfoot>, <tbody>의 경우 테이블의 레이아웃에는 영향을 미치지 않는다.