[HTML] table 구성 익숙해지기

과거에도 HTML로 표(table)을 몇 번 만들어봤지만, 할 때마다 헷갈린다. 멋사 강사님께서 친절하고 디테일하게 알려주시긴 했지만, 결국 내가 해보지 않으면 아무런 의미가 없다. (표 만드는 것이 아니더라도, 코딩은 무조건 내가 해야 는다!)

 

th	th	th	th	th
td	td	td	td	td
td	td	td	td	td

• Table Row = <TR>로 한 줄을 묶어야 한다.
• <colgroup>, <thead>, <tbody>, <tfoot>을 활용하여 웹 접근성을 향상시킨다. (없어도 상관은 없음)
• 셀 병합은 가로로 합칠 땐 colspan, 세로로 합칠 땐 rowspan을 사용한다.

table에서 중요하게 챙길 것은 위의 세 가지로 요약해볼 수 있겠다.

 

<table>
    <caption>
        테이블 제목
    </caption>
    <!-- COL GROUP 묶기 -->
    <colgroup>
        <col class="구분">
        <col class="이름">
        <col class="가격">
        <col class="판매량">
    </colgroup>
    <!-- TableHEAD -->
    <thead>
        <tr>
            <th>구분</th>
            <th>도서명</th>
            <th>가격</th>
            <th>판매량</th>
        </tr>
    </thead>
    
    <!-- TableBODY -->
    <tbody>
        <tr>
            <td>1</td>
            <td>Hello</td>
            <td>1,000</td>
            <td>1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Apple</td>
            <td>2,000</td>
            <td>2</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Romeo</td>
            <td>4,000</td>
            <td>3</td>
        </tr>
    </tbody>
    
    <!-- TableFOOT -->
    <tfoot>
        <tr>
            <td colspan="3">총계</td>
            <td>6</td>
        </tr>
    </tfoot>
</table>