HTML5+CSS3 - 표 관련 태그

<table> 태그 - 표 만들기

<table>

  행과 열을 구성하는 여러 태그들

</table>

테이블 태그 안에 사용할 수 있는 태그들

1. <caption> : 표에 대한 간단한 제목을 붙입니다.

2. <tr> : 행 하나를 추가합니다.

3. <td> : 셀 하나를 추가합니다.

4. <th> : 제목이 들어갈 셀을 추가합니다.

5. <col> : 여러 줄에 걸쳐 있는 열 하나를 지정합니다.

6. <colgroup> : 여러 개의 col 요소를 하나의 그룹으로 묶습니다.

7. <thead> : 여러 열을 하나의 그룹으로 묶어 표의 헤더로 지정합니다.

8. <tbody> : 여러 열을 묶어 표의 본문으로 지정합니다.

9 <tfoot> : 여러 열을 묶어 표의 푸터로 지정합니다.

<tr>,<td>,<th> 태그 - 표의 행과 열 만들기

<tr> 태그로 행 하나를 만들고, 그 안에 <td>를 넣어 행을 만든다.

표 내용중 제목을 표시하고 싶은 행이나 열은 <th> 태그를 사용하며, 내용이 가운데 정렬되고 진하게 표시된다.

<th>태그의 scope 속성

row : <th> 태그가 있는 행의 나머지 셀에 적용됩니다.

col : <th> 태그가 있는 열의 나머지 셀에 적용됩니다.

rowgroup : <th> 태그가 있는 행 집합의 나머지 모든 셀에 적용됩니다.

colgroup : <th> 태그가 있는 열 집합의 나머지 모든 셀에 적용됩니다.

auto : 소스를 기본으로 해서 <th> 셀에 적용됩니다.

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

<td colspan="합칠 열의 개수">내용</td>

<th colspan="합칠 열의 개수">내용</th>

<td rowspan="합칠 행의 개수">내용</td>

<th rowspan="합칠 행의 개수">내용</th>

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

<caption>표 제목</caption>

이 태그는 <table> 태그 바로 다음에 사용해야하며, 하나만 사용해야 한다.

이 태그를 사용하지 않을 경우, <table> 태그에서 summary 속성으로 표의 요약을 추가해야 한다.

둘 중 하나는 반드시 사용해야 한다.

<col>,<colgroup> 태그 - 여러 열 묶기

열 단위로 묶어서 스타일을 지정할 때 사용.

<tr> 태그보다 앞에 사용해야 한다.

사용하게되면 열의 개수대로 모두 맞춰줘야한다.

<thead>,<tbody>,<tfoot> 태그 - 표의 제목과 본문 등 구분해 주기

표의 각 부분을 구분할 때 사용.