<table> 태그

별초롱언니 2025. 3. 5. 12:40

▣ <table> 태그
· <tr> 태그 : 행 생성, 태그 : 열 생성

· <th> 태그 : 표의 머리를 정의, 셀 제목 글자를 강조하는 역할

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>표 만들기</title>
</head>
<body>
  <section>
    <article>
      <table border="1" style="width: 50%;">

        <tr>
          <th>이름</th>
          <th>점수</th>
        </tr>

        <tr>
          <td>별</td>
          <td>90</td>
        </tr>

        <tr>
          <td>초롱</td>
          <td>90</td>
        </tr>

        <tr>
          <td>별초롱언니</td>
          <td>100</td>
        </tr>

      </table>
    </article>
  </section>
</body>
</html>

▣ 표 제목 삽입

· <caption> 태그 사용

▣ 셀 병합

· rowspan : 셀을 세로로 병합, 속성값으로 병합하고 싶은 행의 수만큼 지정

· colspan : 셀을 가로로 병합, 속성값으로 병합하고 싶은 열의 수만큼 지정

♧ 셀 병합하기1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>표 만들기</title>
</head>
<body>
  <section>
    <article>
      <table border="1" style="width: 50%;">

        <tr>
          <th>이름</th>
          <th>점수</th>
        </tr>

        <tr>
          <td>별</td>
          <td>90</td>
        </tr>

        <tr>
          <td>초롱</td>
          <td>90</td>
        </tr>

        <tr>
          <td>별초롱언니</td>
          <td>100</td>
        </tr>

      </table>
    </article>
  </section>
</body>
</html>

♧ 셀 병합하기2

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>셀 병합하기2</title>
</head>
<body>
  <!-- rowspan : 세로 / colspan : 가로 -->
  <section>
    <article>
      <table border="1" style="width: 50%;">

        <tr>
          <td>가</td>
          <td>나</td>
          <td>다</td>
          <td rowspan="4">라</td>
        </tr>

        <tr>
          <td>마</td>
          <td colspan="2" rowspan="3">바</td>
        </tr>

        <tr>
          <td>사</td>
        </tr>

        <tr>
          <td>아</td>
        </tr>

        <tr>
          <td colspan="2">자</td>
          <td colspan="2">차</td>
        </tr>

        <tr>
          <td colspan="4">카</td>
        </tr>

      </table>
    </article>
  </section>
</body>
</html>

▣ 시맨틱 태그

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Semantic Tag</title>
</head>
<body>
  <section>
    <article>
      <table border="1" summary="시맨틱 테이블 관련 요소 목록">
        <caption>Semantic Table Tag</caption>

        <thead>
          <tr>
            <th>태그 명칭</th>
            <th>설명</th>
            <th>사용 여부</th>
          </tr>
        </thead>

        <tbody>
          <tr>
            <td>thead</td>
            <td>표 머리말(head) 부분의 그룹 태그</td>
            <td>가능</td>
          </tr>

          <tr>
            <td>tbody</td>
            <td>표 본문(body) 부분의 그룹 태그</td>
            <td>가능</td>
          </tr>

          <tr>
            <td>tfoot</td>
            <td>표 꼬리말(footer) 부분의 그룹 태그</td>
            <td>가능</td>
          </tr>
        </tbody>

        <tfoot>
          <tr>
            <td colspan="3">참고 사이트 : http://www.w3.org</td>
          </tr>
        </tfoot>

      </table>
    </article>
  </section>
</body>
</html>