[HTML] table 태그

테이블을 생성할 때 사용

table>(tr>th*3)+(tr>td*3)*3
=
<table>
        <tr> 👈 tr: 테이블의 행을 나눌 때 사용
            <th></th> 👈 th: table header이기 때문에 td와 나눠준다
            <th></th>
            <th></th>
        </tr>
        <tr>
            <td></td> 👈 td: 열이 아닌 하나의 데이터다
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </table>

---

📌 border-collapse: collaps; 는 충돌되는 border의 값을 잡아주는 역할을 한다

 

적용 전

table, tr, td, th {
	border: 1px solid black;
}

 

적용 후

table, tr, td, th {
	border: 1px solid black;
	border-collapse: collapse;
}

 

 

colspan: 가로 셀 병합/ rowspan: 세로 셀 병합

<table>
        <thead> 👈 thead: tr>th를 묶을 때 사용한다
            <tr>
                <th>구분</th>
                <th>책이름</th>
                <th>책 가격</th>
                <th>책 판매량</th>
            </tr>
        </thead>

        <tbody> 👈 tbody: tr>td를 묶을 때 사용한다
            <tr>
                <td>1</td>
                <td>hello</td>
                <td>1000</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>hello2</td>
                <td>2000</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>hello3</td>
                <td>3000</td>
                <td>3</td>
            </tr>
        </tbody>
        
        <tfoot> 👈 tfoot: 마지막 tr>td를 묶을 때 사용한다
            <tr>
                <td colspan="3">총 판매량</td>
                <td>6</td>
            </tr>
        </tfoot>
    </table>

 

 

caption: 테이블 제목/ colgroup: 열을 묶는 그룹(한 번에 공통된 css를 주고 싶을 때 사용)

<table>
        <caption>
            이 table
        </caption>
        <colgroup>
            <col class="구분">
            <col class="판매량">
            <col class="가격">
            <col class="판매량">
        </colgroup>
        <thead>
            <tr>
                <th>구분</th>
                <th>책이름</th>
                <th>책 가격</th>
                <th>책 판매량</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>hello</td>
                <td>1000</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>hello2</td>
                <td>2000</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>hello3</td>
                <td>3000</td>
                <td>3</td>
            </tr>
        </tbody>
        
        <tfoot>
            <tr>
                <td colspan="3">총 판매량</td>
                <td>6</td>
            </tr>
        </tfoot>
    </table>

 

 

scope: th 요소로 사용되며, column인지 row인지 알려주는 역할

: 작성된 코드가 스크린 리더기를 통해 읽어지는 경우, 어떤 순서로 읽을지 결정

<table>
  <caption>요일별 급식 만족도</caption>
  <tbody>
    <tr>
      <th></th>
      <th scope="col">월요일</th> 👈 col: 열에 대한 머릿말
      <th scope="col">화요일</th>
      <th scope="col">수요일</th>
      <th scope="col">목요일</th>
      <th scope="col">금요일</th>
      <th scope="col">토요일</th>
    </tr>      
    <tr>
      <th scope="row">메뉴</th>
      <td>돈까스</td>
      <td>짜장면</td>
      <td>볶음밥</td>
      <td>해물라면</td>
      <td>잔치국수</td>
      <td>떡볶이</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">만족도</th> 👈row: 행에 대한 머릿말
      <td>3/5</td>
      <td>4/5</td>
      <td>1/5</td>
      <td>5/5</td>
      <td>2/5</td>
      <td>3/5</td>
    </tr>
  </tfoot>
</table>