표 콘텐츠

<table>, <tr>, <th>, <td>태그들은 표의 기본틀을 구성하는 태그이며, 이 외 태그들은 표를 꾸며주는 태그들입니다.

데이터 표(<table>)의 행(<tr>)과 열(<th>,<td>)을 작성하여 표를 만듭니다. 각 열은 행안에 작성해주어야 합니다. 즉, <tr>요소는 <td>요소를 자식 요소로 포함합니다.

---

<table>
    <tr>  <!-- 1행 -->
        <td>1</td>  <!-- 1행 1열-->
        <td>2</td>  <!-- 1행 2열-->
    </tr>
    <tr>  <!-- 2행 -->
        <td>3</td>  <!-- 2행 1열 -->
        <td>4</td>  <!-- 2행 2열 -->
     </tr>
 <table>

1	2
3	4

1. <table> </table>

• 표의 영역을 설정합니다(display: table;).

2. <tr> </tr>

• 표의 행을 설정합니다(display: table-row;).

3. <th> </th>

• 머리글 칸을 설정하는 태그입니다(display: table-cell;).

• th 태그는 표에서 header 영역을 설정하고, td 태그는 data 영역을 설정합니다. th 태그는 기본적으로 글자가 두껍게(blod) 표시됩니다.

• 속성	의미	값
  abbr	열에 대한 간단한 설명
  headers	관련된 하나 이상의 다른 머리글 칸 id 속성값
  colspan	확장하려는 열의 수	1(기본값)
  rowspan	확장하려는 행의 수	1(기본값)
  scope	자신이 누구의 머리글 칸인지 명시	col: 자신의 열, colgroup: 모든 열, row: 자신의 행, rowgroup: 모든 행

• abbr 속성은 열에 대한 간단한 설명을 작성합니다.
  

• headers 속성은 다른 th 태그와 연관되어있다면 연관된 th 태그에 부여된 id 속성의 값을 headers 속성에 값으로 작성하여 연관되었음을 명시할 수 있습니다.

• colspan 속성을 통해 수직으로 열을 확장시킬 수 있습니다. 기본값으로 1이 지정되어 있습니다.

• rowspan 속성을 통해 수평으로 행을 확장시킬 수 있습니다. 기본값으로 1이 지정되어 있습니다.

• scope 속성으로 해당 머리글 칸이 어떤 칸에 종속된 머리글 칸인지 명시할 수 있습니다. 즉, 행, 열, 행 전체, 열 전체 중 어떤 영역을 대표하는 것인지 명시하는 속성입니다.

4. <td> <td>

• 일반 칸을 설정하는 태그입니다(display: table-cell;).

• 속성	의미	값
  colspan	확장하려는 열의 수	1(기본값)
  rowspan	확장하려는 행의 수	1(기본값)
  headers	관련된 하나 이상의 다른 <th>의 id 속성값

5. <caption> </caption>

• 표의 제목을 설정하는 태그입니다(display: table-caption;).

• 열리는 table 태그 바로 다음에 작성해야 합니다. table 태그당 하나의 caption을 사용할 수 있습니다.

---

<table>
    <caption>표의 제목</caption>
    <!-- ,,, -->
</table>

6. <colgroup> </colgroup>

• <col />들의 집합을 설정하는 태그입니다(display: table-column-group;).

7. <col />

• 표의 열들을 공통적으로 정의하는 태그입니다(display: table-column;).

• 속성	의미	값
  span	연속되는 열의 수	1(기본값)

• span 속성으로 연속되는 열의 수를 지정할 수 있으며 기본값으로는 1이 지정되어 있습니다.

---

<table>
    <colgroup>
        <!-- 첫 번째 열과 두 번째 열 -->
        <col span="2" style="background-color: red" />
        
        <!-- 세 번째 열 -->
        <col />
    </colgroup>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
    <tr>  
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
     </tr>
</table>

위 예제에서 표는 첫 번째 열과 두 번째 열, 즉 1, 2, 5, 6의 배경색이 red로 설정됩니다.

8. <thead> </thead>

• 표의 머리글 영역, 헤더 영역을 설정합니다.

9. <tbody> </tbody>

• 표의 본문 영역을 설정합니다.

10. <tfoot> </tfoot>

• 표의 바닥글, 푸터 영역을 설정합니다.

---

<thead>, <tbody>, <tfoot> 태그들은 테이블의 레이아웃에 영향을 주지 않습니다. 단지 의미적인 부분으로 해당 태그들을 사용합니다.

<table>
    <caption>title</caption>
    <thead>
        <tr>
            <!-- header -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- main -->
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <!-- footer -->
        </tr>
    </tfoot>
</table>