HTML 모르는 태그 정리(Table)

IvanSelah·2021년 10월 12일

Table
기본구조
tr: table row (가로)
첫번째 행에 따라 아래 구조가 정의됨

<thead></thead>
이걸로 감싸면 브라우저가 이 요소들이 헤더구나 라고 알 수 있음
<tbody></tbody>
이걸로 감싸면 브라우저가 이 요소들이 데이터들이 들어가는 곳이라고 알 수 있음
<tfoot></tfoot>
이걸로 감싸면 브라우저가 마지막정보 이라는 것을 알 수 있음(합계 등)
<table>
    <thead>
      <tr>
          <th>ID</th>
          <th>이름</th>
          <th>직업</th>
          <th>기타</th>
      </tr>
    </thead>
    <tbody>
      <tr>
          <td>01</td>
          <td>셀라</td>
          <td>개발자</td>
          <td></td>
      </tr>
      <tr>
          <td>02</td>
          <td>만만</td>
          <td>요리사</td>
          <td></td>
      </tr>
    </tbody>
</table>

scope="col" 브라우저가 열방향의 th 라는 것을 알리기 위해 명시
scope="row" 브라우저가 행방향의 th 라는 것을 알리기 위해 명시

rowspan="2" 행으로 2칸 병합
colspan="6" 열 6칸 병합

    <table>
      <thead>
        <tr>
          <th></th>
          <th scope="col"></th>
          <th scope="col"></th>
          <th scope="col"></th>
          <th scope="col"></th>
          <th scope="col"></th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1교시</th>
          <td rowspan="2">왕초보 HTML &amp; CSS</td>
          <td>모각코</td>
          <td rowspan="2">왕초보 HTML &amp; CSS</td>
          <td>모각코</td>
          <td rowspan="2">왕초보 HTML &amp; CSS</td>
        </tr>
        <tr>
          <th scope="row">2교시</th>
          <td rowspan="2">JavaScript 스킬업</td>
          <td rowspan="2">JavaScript 스킬업</td>
        </tr>
        <tr>
          <th scope="row">3교시</th>
          <td>JavaScript 시작반</td>
          <td>JavaScript 시작반</td>
          <td>JavaScript 시작반</td>
        </tr>
        <tr>
          <th scope="row" colspan="6">점심시간</th>
        </tr>
        <tr>
          <th scope="row">4교시</th>
          <td>SASS기초반</td>
          <td rowspan="2">HTML &amp; CSS<br />포트폴리오반</td>
          <td rowspan="2">Open Seminar</td>
          <td rowspan="2">HTML &amp; CSS<br />포트폴리오반</td>
          <td>SASS기초반</td>
        </tr>
        <tr>
          <th scope="row">5교시</th>
          <td>모각코</td>
          <td>모각코</td>
        </tr>
      </tbody>
    </table>
profile
{IvanSelah : ["꿈꾸는", "끊임없이 노력하는", "프론트엔드 개발자"]}

0개의 댓글