table

테이블은 대규모의 데이터를 잘 정리해서 보여줄 수 있는 데이터 형식이다. 하지만 접근성이 떨어지는 사람들에게나, 기계는 해당 테이블을 사람이 읽는 만큼 잘 해석할 수 없다.

이를 위해 table을 마크업할 때 접근성을 잘 고려해서 작성해야 될 필요성이 있다.

caption

caption은 테이블의 제목과 간단한 요약을 전달한다.

caption 은 테이블의 정보를 접근성이 떨어지는 독자가 접했을 때, 해당 테이블의 정보가 필요할 지 안 필요할지 판단하는 데 도움을 준다. caption이 없다면 독자는 테이블의 모든 정보를 들으면서 해당 테이블이 어떤 내용인지 판단할 수 있을 것이다.

이를 미리 파악할 수 있게 전체적인 정보를 주는 것이 caption의 목적이다.

table 요소의 첫 번째 자식으로만 올 수 있다.

thead

헤더 영역을 지정해주는 태그

th

수많은 행 중의 헤더로 작동한다. 전체적인 행들의 공통점을 묶어주는 요소이므로 반드시 th 로 선언해주어야 하며, 이렇게 하지 않고 td로 선언할 시 접근성이 매우 떨어지게 된다.

아래의 속성은 th 내부에 사용할 수 있는 속성 중 표준이 아닌 내용은 모두 제외했다.

abbr

해당 셀에 대한 간단한 설명을 넣을 수 있는 속성이다.

scope

해당 th 요소와 관련된 모든 셀들을 묶어줄 수 있는 속성이다.

• row: 헤더는 자신이 속한 행의 모든 셀과 관련됩니다.
• col: 헤더는 자신이 속한 열의 모든 셀과 관련됩니다.
• rowgroup: 헤더는 행 그룹에 속하며 모든 셀과 관련됩니다. 이러한 셀은 요소 의 dir속성 값에 따라 헤더의 오른쪽 또는 왼쪽에 배치 될 수 있습니다.
• colgroup: 헤더는 colgroup에 속하며 모든 셀과 관련됩니다.
  https://developer.mozilla.org/ko/docs/Web/HTML/Element/th

row

row는 해당 헤더가 자신이 속한 행의 모든 셀과 관련이 된다. 일반적으로 td 앞의 th에 사용해서 가로행의 헤더로 사용할 때 사용한다.

col

col 은 해당 헤더가 자신이 속한 열의 모든 셀과 관련이 된다. 열의 th에 적용시킨다.

colgroup

colgroup은 caption 직후에만 사용할 수 있다. colgroup은 헤더가 그룹화되어 있을 시 span 속성을 통해 몇개의 헤더가 그룹화 되어 있는지, 명시해주는 기능을 한다.

rowspan

셀이 확장되는 행 수를 정의한다. 즉 행 병합이라고 보면 된다.

colspan

셀이 확장되는 열 수를 정의한다. 즉 열 병합이라고 보면 된다.

headers

td에서 설명 예정

tr

일반적으로 하나 하나의 행을 정의하는 데 쓰인다.

td

tr 태그 안에서 하나 하나의 셀을 나타내는 데 쓰인다.

rowgroup

rowgroup 은 행이 병합되는 경우 해당 row에 속하는 row가 어떻게 구성되는지 명시하는 역할을 한다.

headers

headers에는 해당 셀에 해당하는 id 값의 집합이 문자열로 들어가게 된다. 이를 통해, 명확하게 해당 셀이 어떤 영역의 id 속성을 포함하고 있는지 명시할 수 있다.

내용 없는 셀 표현

Table 내의 내용 없는 셀(td) 표현.

값이 없는 경우에는 빈 셀로 남기지 말고 없음이라고 표기 후, CSS 를 통해 텍스트를 제공하면 정보 접근성을 높히면서 디자인의 문제 없이 서비스를 할 수 있다.

실제 사용

아래 코드는 간단하게 우체국의 table을 클론 코딩하면서 배운 내용을 적용 시킨 것이다.

    <table class="table1">
        <caption>우체국택배(방문접수)</caption>
        <colgroup span="2">
            <col class="today-express" />
        </colgroup>
        <thead>
            <tr>
                <th scope="col" colspan="2" id="division">구분(초과 ~ 이하)</th>
                <th scope="col" id="under5kg">5kg 이하(80cm 이하)</th>
                <th scope="col" id="5to10kg">5kg~10kg (80cm ~100cm)</th>
                <th scope="col" id="10to20kg">10kg~20kg (100cm ~120cm)</th>
                <th scope="col" id="20to30kg">20kg~30kg (120cm ~160cm)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th colspan="2" scope="row" id="today-express">익일배달</th>
                <td headers="under5kg today-express">5,000</td>
                <td headers="5to10kg today-express">8,000</td>
                <td headers="10to20kg today-express">10,000</td>
                <td headers="20to30kg today-express">12,000</td>
            </tr>
            <tr>
                <th rowspan="2" scope="rowgroup" id="jeju">제주</th>
                <th scope="row" id="today-express-other">익일배달</th>
                <td headers="under5kg jeju today-express-other">7,500</td>
                <td headers="5to10kg jeju today-express-other">10,000</td>
                <td headers="10to20kg jeju today-express-other">12,000</td>
                <td headers="20to30kg jeju today-express-other">14,500</td>
            </tr>
            <tr>
                <th scope="row" id="two-day-express">D+2일 배달</th>
                <td headers="under5kg jeju two-day-express">5,000</td>
                <td headers="5to10kg jeju two-day-express">8,000</td>
                <td headers="10to20kg jeju two-day-express">10,000</td>
                <td headers="20to30kg jeju two-day-express">12,000</td>
            </tr>
        </tbody>
    </table>

    <table class="table2">
        <caption>소포우편(창구 접수) 등기소포</caption>
        <colgroup span="2">
            <col class="today-express" />
        </colgroup>
        <colgroup>
            <col class="80cm" />
        </colgroup>

        <colgroup span="2">
            <col class="80to100cm" />
        </colgroup>
        <colgroup span="4">
            <col class="100to120cm">
        </colgroup>
        <colgroup>
            <col class="120to160cm" />
        </colgroup>
        <thead>
            <tr>
                <th rowspan="2" scope="col" colspan="2" id="table2-division">구분(초과 ~ 이하)</th>
                <th scope="col" id="table2-Under80cm">80㎝ 이하</th>
                <th colspan="2" scope="col" id="table2-80to100cm">80㎝∼100㎝</th>
                <th colspan="4" scope="col" id="table2-100to120cm">100㎝∼120㎝</th>
                <th scope="col" id="table2-120to160cm">120㎝∼160㎝</th>

            </tr>
            <tr>
                <th scope="col" id="table2-Under3kg">3kg 이하</th>
                <th scope="col" id="table2-3to5kg">3kg∼5kg</th>
                <th scope="col" id="table2-5to7kg">5kg∼7kg</th>
                <th scope="col" id="table2-7to10kg">7kg∼10kg</th>
                <th scope="col" id="table2-10to15kg">10kg∼15kg </th>
                <th scope="col" id="table2-15to20kg">15kg∼20kg </th>
                <th scope="col" id="table2-20to25kg">20kg∼25kg</th>
                <th scope="col" id="table2-25to30kg">25kg∼30kg</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th colspan="2" scope="row" id="table-2-today-express">익일배달</th>
                <td headers="table2-Under80cm table2-Under3kg table-2-today-express">4,000</td>
                <td headers="table2-80to100cm table2-3to5kg table-2-today-express">4,500</td>
                <td headers="table2-80to100cm table2-5to7kg table-2-today-express">5,000</td>
                <td headers="table2-100to120cm table2-7to10kg table-2-today-express">6,000</td>
                <td headers="table2-100to120cm table2-10to15kg table-2-today-express">7,000</td>
                <td headers="table2-100to120cm table2-15to20kg table-2-today-express">8,000</td>
                <td headers="table2-100to120cm table2-20to25kg table-2-today-express">9,000</td>
                <td headers="table2-120to160cm table2-25to30kg table-2-today-express">11,000</td>
            </tr>
            <tr>
                <th rowspan="2" scope="rowgroup" id="table2-jeju">제주</th>
                <th scope="row" id="table2-today-express-other">익일배달</th>
                <td headers="table2-Under80cm table2-Under3kg table2-jeju table-2-today-express-other">6,500</td>
                <td headers="table2-80to100cm table2-3to5kg table2-jeju table-2-today-express-other">7,000</td>
                <td headers="table2-80to100cm table2-5to7kg table2-jeju table-2-today-express-other">7,500</td>
                <td headers="table2-100to120cm table2-7to10kg table2-jeju table-2-today-express-other">8,500</td>
                <td headers="table2-100to120cm table2-10to15kg table2-jeju table-2-today-express-other">9,500</td>
                <td headers="table2-100to120cm table2-15to20kg table2-jeju table-2-today-express-other">10,500</td>
                <td headers="table2-100to120cm table2-20to25kg table2-jeju table-2-today-express-other">11,500</td>
                <td headers="table2-120to160cm table2-25to30kg table2-jeju table-2-today-express-other">13,500</td>
            </tr>
            <tr>
                <th scope="row" id="table2-two-day-express">D+2일 배달</th>
                <td headers="table2-Under80cm table2-Under3kg table2-jeju table2-two-day-express">4,000</td>
                <td headers="table2-80to100cm table2-3to5kg table2-jeju table2-two-day-express">4,500</td>
                <td headers="table2-80to100cm table2-5to7kg table2-jeju table2-two-day-express">5,000</td>
                <td headers="table2-100to120cm table2-7to10kg table2-jeju table2-two-day-express">6,000</td>
                <td headers="table2-100to120cm table2-10to15kg table2-jeju table2-two-day-express">7,000</td>
                <td headers="table2-100to120cm table2-15to20kg table2-jeju table2-two-day-express">8,000</td>
                <td headers="table2-100to120cm table2-20to25kg table2-jeju table2-two-day-express">9,000</td>
                <td headers="table2-120to160cm table2-25to30kg table2-jeju table2-two-day-express">11,000</td>
            </tr>
        </tbody>
    </table>

    <table class="table3">
        <caption>소포우편(창구 접수) 일반소포</caption>
        <colgroup span="2">
            <col class="today-express" />
        </colgroup>
        <colgroup>
            <col class="80cm" />
        </colgroup>

        <colgroup span="2">
            <col class="80to100cm" />
        </colgroup>
        <colgroup span="4">
            <col class="100to120cm">
        </colgroup>
        <colgroup>
            <col class="120to160cm" />
        </colgroup>
        <thead>
            <tr>
                <th rowspan="2" scope="col" colspan="2" id="table3-division">구분(초과 ~ 이하)</th>
                <th scope="col" id="table3-Under80cm">80㎝ 이하</th>
                <th colspan="2" scope="col" id="table3-80to100cm">80㎝∼100㎝</th>
                <th colspan="4" scope="col" id="table3-100to120cm">100㎝∼120㎝</th>
                <th scope="col" id="table3-120to160cm">120㎝∼160㎝</th>

            </tr>
            <tr>
                <th scope="col" id="table3-Under3kg">3kg 이하</th>
                <th scope="col" id="table3-3to5kg">3kg∼5kg</th>
                <th scope="col" id="table3-5to7kg">5kg∼7kg</th>
                <th scope="col" id="table3-7to10kg">7kg∼10kg</th>
                <th scope="col" id="table3-10to15kg">10kg∼15kg </th>
                <th scope="col" id="table3-15to20kg">15kg∼20kg </th>
                <th scope="col" id="table3-20to25kg">20kg∼25kg</th>
                <th scope="col" id="table3-25to30kg">25kg∼30kg</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row" id="table3-day-three-express" colspan="2">D+3일 배달</th>
                <td headers="table3-Under80cm table3-Under3kg table3-day-three-express">2,700</td>
                <td headers="table3-80to100cm table3-3to5kg table3-day-three-express">3,200</td>
                <td headers="table3-80to100cm table3-5to7kg table3-day-three-express">3,700</td>
                <td headers="table3-100to120cm table3-7to10kg table3-day-three-express">4,700</td>
                <td headers="table3-100to120cm table3-10to15kg table3-day-three-express">5,700</td>
                <td headers="table3-100to120cm table3-15to20kg table3-day-three-express">6,700</td>
                <td headers="table3-100to120cm table3-20to25kg table3-day-three-express">7,700</td>
                <td headers="table3-120to160cm table3-25to30kg table3-day-three-express">97,00</td>
            </tr>

        </tbody>
    </table>

    <table class="table4">
        <caption>부가이용 수수료(등기소포를 전제로 취급지역에 한함)</caption>
        <thead>
            <tr>
                <th id="table4-division" scope="col">구분</th>
                <th id="table4-today-express" scope="col">당일특급</th>
                <th id="table4-payment-received" scope="col">착불소포</th>
                <th id="table4-safe-transport" scope="col">안심소포</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>수수료(1개당)</td>
                <td>지역 구분 요금 <br/>
                    - 지역 내: 5,000원<br/>
                    -지역 간 : 10,000원
                </td>
                <td>500원</td>
                <td>1000원+손해배상한도액 초과시 <br/>10만원마다 500원</td>
            </tr>
        </tbody>
    </table>

    <table class="table5">
        <caption>요금 감액 범위</caption>
        <colgroup span="2">
            <col class="method-and-discount" />
        </colgroup>
        <thead>
            <tr>
                <th id="table5-method-and-discount" colspan="2" scope="col">납부 방법/할인율</th>
                <th id="table5-5percent" scope="col">5%</th>
                <th id="table5-10percent" scope="col">10%</th>
                <th id="table5-15percent" scope="col">15%</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th rowspan="2" scope="rowgroup" id="table5-claim-post">청구소포</th>
                <th scope="row" id="table5-payment-immediate">요금즉납</th>
                <td headers="table5-5percent table5-claim-post table5-payment-immediate">3개 이상</td>
                <td headers="table5-10percent table5-claim-post table5-payment-immediate">10개 이상</td>
                <td headers="table5-15percent table5-claim-post table5-payment-immediate">50개 이상</td>
            </tr>
            <tr>
                <th scope="row" id="table5-payment-after">요금후납</th>
                <td headers="table5-5percent table5-claim-post table5-payment-after">70개 이상</td>
                <td headers="table5-10percent table5-claim-post table5-payment-after">100개 이상</td>
                <td headers="table5-15percent table5-claim-post table5-payment-after">130개 이상</td>
            </tr>
            <tr>
                <th rowspan="2" scope="rowgroup" id="table5-meet-receive">방문접수</th>
                <th scope="row" id="table5-information">접수정보 <br/>사전연계</th>
                <td colspan="3" headers="table5-meet-receive table5-information">개당 500원 감액
                    <br/>
                    (접수정보 입력, 사전결제, 픽업장소 지정 시)
                </td>

            </tr>
        </tbody>
    </table>

    <table class="table6">
        <caption>당일특급서비스의 지역구분</caption>
        <tbody>
            <tr>
                <td>서울 / 인천 / 경기</td>
                <td>부산 / 울산 / 경남</td>
                <td>대전 / 세종 / 충남 </td>
                <td>충북</td>
                <td>광주 / 전남</td>
                <td>대구 / 경북</td>
                <td>전북</td>
                <td>강원</td>
                <td>제주</td>
            </tr>
        </tbody>
    </table>

결론

이 과제를 하면서 스크린리더를 다운받아서 만들어진 표를 모두 들어봤다. 내가 받은 스크린리더가 잘 못 된건지 내가 접근성 설정을 잘 못한건지는 모르겠지만, 접근성 설정을 한 표와 하지 않은 표의 실질적인 차이는 없었다. 하지만 이 스크린리더로 듣는게 얼마나 불편한건지 접근성이 떨어지는게 얼마나 불편한지 명확하게 알게 되었다. 내가 조금 더 고생해서 불편한 사람 한 명이라도 더 편하게 웹 사이트를 이용할 수 있게 된다면 의미 있는 일일 것이다.