[HTML/CSS] 테이블 만드는 태그 (Table Tag) - 제목 및 설명

테이블 제목 및 설명 태그

웹 접근성과 관련

 

1. caption

표 제목이나 간단한 요약 및 설명을 나타내는 태그

중앙 정렬, 테이블 태그 안에 작성

<table>
    <caption>
        <p>AA회사 지원자 명단</p>
    </caption>
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>성별</th>
    </tr>
    <tr>
        <td>김수연</td>
        <td>25</td>
        <td>여</td>
    </tr>
    <tr>
        <td>오재훈</td>
        <td>27</td>
        <td>남</td>
    </tr>
    <tr>
        <td>나연우</td>
        <td>32</td>
        <td>남</td>
    </tr>
    <tr>
        <td>유나희</td>
        <td>29</td>
        <td>여</td>
    </tr>
</table>

 

AA회사 지원자 명단

이름	나이	성별
김수연	25	여
오재훈	27	남
나연우	32	남
유나희	29	여

 

2. figure, figcaption

표의 제목 및 설명을 달아주는 태그

좌측 정렬, 테이블 태그 밖에 작성

<figure>
    <figcaption>
        <p>AA회사 지원자 명단</p>
    </figcaption>
    <table>
        <tr>
            <th>이름</th>
            <th>나이</th>
            <th>성별</th>
        </tr>
        <tr>
            <td>김수연</td>
            <td>25</td>
            <td>여</td>
        </tr>
        <tr>
            <td>오재훈</td>
            <td>27</td>
            <td>남</td>
        </tr>
        <tr>
            <td>나연우</td>
            <td>32</td>
            <td>남</td>
        </tr>
        <tr>
            <td>유나희</td>
            <td>29</td>
            <td>여</td>
        </tr>
    </table>
    <figcaption>
        <p>웹 퍼블리싱 직무 지원자</p>
    </figcaption>
</figure>

 

AA회사 지원자 명단

이름	나이	성별
김수연	25	여
오재훈	27	남
나연우	32	남
유나희	29	여

웹 퍼블리싱 직무 지원자

 

caption 태그와 figcaption 태그의 차이점

1. 위치

    caption 태그는 table의 위에 생성

    figcaption 태그는 table의 위, 아래 상관없이 생성가능

 

2. 가운데 정렬

    css로 변경 가능

 

 

3.  aria-describedby 속성

현재 요소에 설명을 제공하는 속성

설명을 작성한 태그에 id를 주고 table에 aria-describedby 속성에 id명을 속성값으로 줌

해당 속성은 *WAI-ARIA 속성 중 하나이다.

*WAI-ARIA
W3C에 의해 제정된 RIA(Rich Internet Applications)의 웹 접근성에 대한 표준 기술 규격
스크린 리더를 사용하는 사용자들이 동적인 컨텐츠에 보다 원활하게 접근가능하며,
페이지에 접근성을 높여 여러 사용자들에게 원활한 페이지 이용을 도와줌

<p id="summary">
    id값으로 설명을 써서 낭독기에서 표를 설명하도록 하는 속성
</p>
<table aria-describedby="summary">
    <tr>
        <th>이름</th>
        <th>나이</th>
        <th>성별</th>
    </tr>
    <tr>
        <td>김수연</td>
        <td>25</td>
        <td>여</td>
    </tr>
    <tr>
        <td>오재훈</td>
        <td>27</td>
        <td>남</td>
    </tr>
    <tr>
        <td>나연우</td>
        <td>32</td>
        <td>남</td>
    </tr>
    <tr>
        <td>유나희</td>
        <td>29</td>
        <td>여</td>
    </tr>
</table>

 

id값으로 설명을 써서 낭독기에서 표를 설명하도록 하는 속성

이름	나이	성별
김수연	25	여
오재훈	27	남
나연우	32	남
유나희	29	여

 

4. summary 속성

table이 어떤 내용을 담고 있는지 요약해주는 속성

다만, html5에 들어와서 부터는 표준이 아니게됨.

 

---

관련 포스트

테이블 만드는 태그 - 구성

[HTML/CSS] 테이블 만드는 태그 (Table Tag)

 

---

참고 자료

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/caption