HTML

테이블

Neda 2022. 7. 26. 15:11

테이블 태그: <table>

테이블의 행(row) 태그: <tr>

테이블의 열(column) 태그: <td>

테이블 헤더 태그: <th>

테이블 열 그룹 태그: <colgroup>

테이블 열 태그: <col span="<column size>">

테이블 설명 추가 -> 테이블 태그 내에 <caption> 포함

테이블 구조를 위한 태그: <thead>, <tbody>, <thead>

해당 헤더가 어떤 셀에 대한 정보인지 명시적으로 전달: scope="col" or scope="row"

Table example

Animals we keep
  Knocky Flor Ella Juan
Breed Jack Russell Poodle Streetdog Cocker Spaniel
Age 16 9 10 5
Owner Mother-in-law Me Me Sister-in-law
Eating Habits Eats everyone's leftovers Nibbles at food Hearty eater Will eat till he explodes
<h1>Table example</h1>
    <table>
      <caption>
        Animals we keep
      </caption>
      <colgroup>
        <col />
        <col class="mother" />
        <col span="2" class="me" />
        <col class="sister" />
      </colgroup>
      <thead>
        <tr>
          <td>&nbsp;</td>
          <th scope="col">Knocky</th>
          <th scope="col">Flor</th>
          <th scope="col">Ella</th>
          <th scope="col">Juan</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">Breed</th>
          <td>Jack Russell</td>
          <td>Poodle</td>
          <td>Streetdog</td>
          <td>Cocker Spaniel</td>
        </tr>
        <tr>
          <th scope="row">Age</th>
          <td>16</td>
          <td>9</td>
          <td>10</td>
          <td>5</td>
        </tr>
        <tr>
          <th scope="row">Owner</th>
          <td>Mother-in-law</td>
          <td>Me</td>
          <td>Me</td>
          <td>Sister-in-law</td>
        </tr>
        <tr>
          <th scope="row">Eating Habits</th>
          <td>Eats everyone's leftovers</td>
          <td>Nibbles at food</td>
          <td>Hearty eater</td>
          <td>Will eat till he explodes</td>
        </tr>
      </tbody>
    </table>