2일차 : 테이블

테이블

table
tr
th, td
table은 block요소와 유사, tr은 줄, th와 td는 칸
테이블의 제목은 caption으로 설정

테이블 기본예제 1

table.html

<table>
        <tr>
            <th>타입</th>
            <th>값</th>
        </tr>
        <tr>
            <td>a</td>
            <td>1</td>
        </tr>
        <tr>
            <td>b</td>
            <td>2</td>
        </tr>
    </table>

table.css

table {
    border-collapse: collapse;
}
th {
    border: 1px solid red;
    padding: 10px;
    background: lightgray;
}
td {
    border: 1px solid red;
    padding: 10px;
}

테이블 가로로 만들고 rowspan을 이용해서 2행을 하나로 합치고 id, headers를 사용해서 헤더에 연결해주기

caption과 colgroup, col 사용예제도 함께 본다.

<table>
        <caption>데이터와 값</caption>
        <colgroup>
            <col style="background:tomato" span="2">
            /* <col> */ 
            <col>
        </colgroup>
        <tr>
            <th rowspan="2" id="td_header">데이터</th>
            <th headers="td_header">타입</th>
            <td>알파벳</td>
            <td>숫자</td>
        </tr>
        <tr>
            <th headers="td_header">값</th>
            <td>A</td>
            <td>7</td>
        </tr>
    </table>

th에서 th로 id, header를 통해 연결할 수 있고 td도 th의 id값으로 연결할 수 있다.
즉, 한단계 상위에 있는 곳으로 연결해준다고 생각하자.