HTML 33 시맨틱 태그를 사용하여 표 만들기

프론트엔드/HTML|2021. 4. 3. 12:54

시맨틱 태그

- <there> : 표 머리말(head) 부분의 그룹태그

- <tbody> : 표 본문(body) 부분의 그룹태그

- <tfoot> : 표 꼬리말(Footer) 부분의 그룹태그


Document
Semantic Table Tag
태그명칭 설명 사용여부
참고사이트: http://www.w3.org/
thead 표머리말(head) 부분의그룹태그 가능
tfoot 표꼬리말(footer) 부분의그룹태그 가능
tbody 표본문(body) 부분의그룹태그 가능
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <section>
    <article>
      <table border="1"summary="시맨틱테이블관련요소목록">
        <caption>Semantic Table Tag</caption>
        <thead>
          <tr>
            <th>태그명칭</th>
            <th>설명</th>
            <th>사용여부</th>
          </tr>
        </thead>
        <tfoot>
          <tr>
            <td colspan="3">참고사이트: http://www.w3.org/ </td>
          </tr>
        </tfoot>
    <tbody>
      <tr>
        <td>thead</td>
        <td>표머리말(head) 부분의그룹태그</td>
        <td>가능</td>
      </tr>
      <tr>
        <td>tfoot</td>
        <td>표꼬리말(footer) 부분의그룹태그</td>
        <td>가능</td>
      </tr>
      <tr>
        <td>tbody</td>
        <td>표본문(body) 부분의그룹태그</td>
        <td>가능</td>
      </tr>
    </tbody>
  </table>
</article>
</section>
</body>
</html>

댓글()
구독