1. 표 소개

• html에서 테이블 태그는 표를 만들때 사용한다.

2. 표의 접근성

• 테이블 태그 역시 제목 셀인 th와 내용 셀인 td를 스크린리더가 올바르게 읽을 수 있도록 속성을 추가해 주어야 한다.
• 그 전에 테이블의 접근성에 대해 알아보자.

scope

• 모든 제목 셀(th)에는 scope 속성을 추가해서 어떤 내용 셀(td)에 대한 것인지 알려주어야 한다.

• col, row, colgroup, rowgroup을 사용할 수 있다.

• 같은 열의 제목에는 col, 같은 행의 제목에는 row 값을 추가

• colgroup과 rowgroup은 같은 방식으로 제목 셀이 속한 열 혹은 행 그룹과 모두 관련이 되어 있을 경우 사용

<table>
  <col>
  <colgroup span="2"></colgroup>
  <colgroup span="2"></colgroup>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" scope="colgroup">Mars</th>
    <th colspan="2" scope="colgroup">Venus</th>
  </tr>
  <tr>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
    <th scope="col">Produced</th>
    <th scope="col">Sold</th>
  </tr>
  <tr>
    <th scope="row">Teddy Bears</th>
    <td>50,000</td>
    <td>30,000</td>
    <td>100,000</td>
    <td>80,000</td>
  </tr>
  <tr>
    <th scope="row">Board Games</th>
    <td>10,000</td>
    <td>5,000</td>
    <td>12,000</td>
    <td>9,000</td>
  </tr>
</table>

3.표와 Position 속성

html에서 테이블 태그는 표를 만들때 사용한다.

• 테이블은 브라우저마다 렌더링 하는 방식이 모두 다르기 때문에, 크로스브라우징이 어려운 태그 중 하나이다.

테이블은 각 요소를 배치하는 틀로 보고, 셀 안에 div를 추가하여 position 요소나 꾸미는 요소는 내부 div에 직접 선언하는 게 좋다.

4. 표의 Border 속성

크로스 브라우징 외에도 이거 때문에 테이블 태그가 마크업하기 까다롭다.

border-collapse: separate; (기본 값)

• 테이블 요소의 선이 모두 살아있다.
• table, thead, tfoot, tbody 순으로 렌더링된다.

border-collapse: collapse; (border 병합)

• 테이블 구조와 상관없이, 선이 병합되면서 우측 하단부터 좌측 상단으로 렌더링된다.
• 각 셀은 자신의 왼쪽과 위쪽의 셀에 선이 가려진다.

5. 통계표 제작

1) HTML 실습

<table>
    <caption>성별, 연령별 분포 목록</caption>
    <colgroup>
        <col span="2" class="col">
        <col span="2">
    </colgroup>
    <thead>
    <tr>
        <th scope="col">연령별</th>
        <th scope="col">성별</th>
        <th scope="col" class="th_view">조회수</th>
        <th scope="col" class="th_rate">비율</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <th rowspan="2" scope="rowgroup">전체</th>
        <th scope="row" class="th_male">남</th>
        <td>0</td>
        <td>0.0%</td>
    </tr>
    <tr>
        <th scope="row" class="th_female">여</th>
        <td>0</td>
        <td>0.0%</td>
    </tr>
    <tr>
        <th rowspan="2" scope="rowgroup">0-12</th>
        <th scope="row" class="th_male">남</th>
        <td>0</td>
        <td>0.0%</td>
    </tr>
    <tr>
        <th scope="row" class="th_female">여</th>
        <td>0</td>
        <td>0.0%</td>
    </tr>
    </tbody>
</table>

2) CSS 실습

table, td, th {
    border-collapse: collapse;
    /* border 병합 */
}

table {
    width: 500px;
    /* 정하지 않으면 셀 내용대로 크기가 변함 */

    table-layout: fixed;
    /* 셀 가로 비율 동일해짐 */
    /* 성능때문에 반드시 필요한 속성 */

    font-size: 13px;
}

.col {
    width: 90px;
}

th {
    font-weight: normal;
}

th, td {
    border-bottom: 1px solid #e1e1e1;
}

thead th {
    padding: 5px 0;
    border-bottom: 2px solid #000;
}

tbody td {
    height: 40px;
}

.th_view,
.th_rate,
tbody td {
    text-align: right;
}

.th_male,
.th_female {
    background: #f8f8f8;
}