테이블의진화 - wkdalfo12/project_study GitHub Wiki

  • colgroup - 위드값의 사이즈 조절
  • caption - 표의 제목
  • thead / tfoot 이 2개는 필수요소가 아님
  • <table border="1" width="100%" summary="세부설명">이부분에서 summary는 속성이기때문에 필수요소는 아님

만들어진 표 합치기(셀 합치기-병합)

  • colspan - 왼쪽 오른쪽 병합

<th colspan="합칠갯수">text</th>

  • rowspan - 위 아래 병합

<td rowspan="합칠갯수">text</td>

참고

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
 <!--
 헤더스 사용방법
https://www.w3.org/TR/WCAG20-TECHS/H43.html
-->
    <table border="1" width="100%" summary="세부설명">
        <caption>표의제목</caption>
        <colgroup>
            <col width="100"/>
            <col />
            <col width="100"/>
            <col />
        </colgroup>
        <thead>
            <tr>
                <th colspan="4" scope="colgroup" id="f1">text</th>
            </tr>
            <tr>
                <th scope="col" id="f22">text</th>
                <th scope="col" id="f23">text</th>
                <th scope="col" id="f24">text</th>
                <th scope="col" id="f25">text</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <th scope="rowgroup" rowspan="3" id="c44">text</th>
                <td>text</td>
                <td>text</td>
                <td>text</td>
            </tr>
            <tr>
                <td rowspan="2" id="g11">text</td>
                <td>text</td>
                <td>text</td>
            </tr>
            <tr>
                <td headers="f1 f24 c44 g11">text</td>
                <td>text</td>
            </tr>
        </tbody>
    </table>








</body>
</html>

읽는 방향 설정 - 접근성에는 중요

  • <th scope="row">text</th> 위-왼쪽-중간-오른쪽 이순서
  • <th scope="col">text</th>위-아래-위-아래 이순서
  • th에만 붙일 수 있고 td에는 안됨
⚠️ **GitHub.com Fallback** ⚠️