html table 태그

현우.·2024년 10월 15일

html html 태그

table 태그

행과 열이 있는 2차원 표를 나타내는 태그

표의 기본

table 태그
테이블의 시작을 알리는 태그

tr 태그
table row를 의미하는 태그

th, td 태그
table의 column을 의미하는 태그

th 태그: 특정 열의 데이터를 강조해주는 역할 (주로 테이블의 제목에 붙는 태그)
th 태그는 더이상 변경(수정)되지 않는 셀에만 사용해야 한다.

td 태그: 특정 열의 데이터를 나타낸다.

주의) table안에는 행을 나타내는 tr태그를 먼저 넣고 그 안에 td태그를 넣어야한다.

 <table border="1">
      <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
      </tr>

      <tr>
        <td>1</td>
        <td>핸드폰</td>
        <td>2</td>
        <td>1000$</td>
      </tr>
    </table>

표의 병합

표 안에서 수직,수평으로 병합하는 방법

rowspan 속성 : n개의 행이 병합된다. 병합될 부분은 제거해줘야 한다.

colspan 속성 : n개의 열이 병합된다. 병합될 부분은 제거해줘야 한다.

<table border="1">
      <tr>
        <th>번호</th>
        <th>상품명</th>
        <th>수량</th>
        <th>가격</th>
      </tr>

      <tr>
        <td>1</td>
        <td>핸드폰</td>
        <td>2</td>
        <td rowspan="2">1000$</td>
      </tr>

      <tr>
        <td>2</td>
        <td>이어폰</td>
        <td>2</td>
        <!-- <td>1000$</td> 삭제 --> 
      </tr>

      <tr>
        <td>2</td>
        <td>tv</td>
        <td>3</td>
        <td>3000$</td>
      </tr>

      <tr>
        <td>총 금액</td>
         <!--
         <td>tv</td>
        <td>3</td> 삭제
        -->
        <td colspan="3">4000$</td>
      </tr>
    </table>

caption 태그

웹 접근성의 향상을 위한 태그로 table의 제목을 지정해주는 태그

<table border="1">
	  <caption>
     	전자제품 가격표
     </caption>
     <tr>
       <th>번호</th>
       <th>상품명</th>
       <th>수량</th>
       <th>가격</th>
     </tr>

     ...
   </table>

thead, tbody, tfoot 태그

웹 접근성의 향상을 위한 태그들로 표의 행(tr태그)을 그룹화 해주는 태그

thead 태그: 표의 제목에 해당하는 부분을 묶어주고 table의 head임을 명시
tbody 태그: 표의 데이터에 해당하는 부분을 묶어주고 table의 body임을 명시
tfoot 태그: 표의 요약 정보를 묶어주고 table의 foot임을 명시

col, colgroup 태그

col 태그는 테이블의 각 열을 스타일링 할때 사용하는 태그로 열린 태그
colgroup 은 col 태그를 span속성을 이용해 그룹화 해주는 태그

 <table border="1">
      <col style="width: 100px"/>
      <col style="width: 100px"/>
      <col style="width: 100px"/>
      <col style="width: 100px"/>
      
   
       <colgroup span="4" style="width: 100px">
        <col/>
        <col/>
        <col/>
        <col/>
      </colgroup>
     

      <caption>
        전자제품 가격표
      </caption>

      <thead>
        <tr>
          <th>번호</th>
          <th>상품명</th>
          <th>수량</th>
          <th>가격</th>
        </tr>
      </thead>
  		...

th태그의 scope 속성

th태그에서 사용되는 속성
테이블의 제목이 영향을 미치는 방향을 지정할때 사용된다.

scope의 값에는...
셀들이 병합 되어있다면 colgroup or rowgroup 사용
병합이 안되어 있다면 col or row를 사용

테이블 예시

<table border="1">
     <caption>
       학생 소개
     </caption>

     <col style="width: 50px" />
     <col style="width: 100px" />
     <col style="width: 80px" />

     <thead>
       <tr>
         <th scope="col">학년</th>
         <th scope="col">이름</th>
         <th scope="col">성적</th>
       </tr>
     </thead>

     <tbody>
       <tr>
         <th scope="rowgroup" rowspan="3">1</th>
         <td>김가영</td>
         <td>90</td>
       </tr>

       <tr>
         <td>김나영</td>
         <td>89</td>
       </tr>

       <tr>
         <td>김다영</td>
         <td>89</td>
       </tr>

       <tr>
         <th scope="rowgroup" rowspan="3">2</th>
         <td>김라영</td>
         <td>36</td>
       </tr>

       <tr>
         <td>김마영</td>
         <td>70</td>
       </tr>

       <tr>
         <td>김바영</td>
         <td>80</td>
       </tr>

       <tr>
         <th scope="rowgroup" rowspan="3">3</th>
         <td>김사영</td>
         <td>52</td>
       </tr>

       <tr>
         <td>김아영</td>
         <td>1</td>
       </tr>

       <tr>
         <td>김자영</td>
         <td>50</td>
       </tr>
     </tbody>

     <tfoot>
       <tr>
         <td colspan="2">총합</td>
         <td>499</td>
       </tr>
     </tfoot>
   </table>