HTML

8. HTML Tables

okthatsimple 2024. 7. 8. 21:50

table

목적

  • HTML Table은 표 형식의 행과 열에 들어있는 데이터 묶음이라 할 수 있음
  • 보통 table, th(제목, table header), tr(행, table row), td(데이터, table data) 정도를 쓴다.
  • 특정 열에만 CSS를 적용하는 경우(배경 색 등) colgroup을 쓴다.
  • table 안에 CSS를 세분화하려는 경우 thead, tbody, tfoot을 쓸 수도 있다.

예시

  • 셀 테두리

    <!DOCTYPE html>
<html>
<head>
  <style>
  table,
  th,
  td {
      border: 1px solid black;
      border-collapse: collapse;
  }
  </style>
</head>
<body>
  <table style="width:100%">
      <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
      </tr>
      <tr>
          <td>100</td>
          <td>200</td>
          <td>300</td>
      </tr>
  </table>
</body>
</html>

  • 셀 병합

    <!DOCTYPE html>
<html>
<head>
  <style>
      table,
      th,
      td {
          border: 1px solid black;
          border-collapse: collapse;
      }

  </style>
</head>
<body>
  <table style="width:100%">
      <tr>
          <th>A</th>
          <th colspan="2">B</th>
      </tr>
      <tr>
          <td>100</td>
          <td>200</td>
          <td>300</td>
      </tr>
  </table>
</body>
</html>

  • 셀 병합 2

    <!DOCTYPE html>
<html>
<head>
  <style>
      table,
      th,
      td {
          border: 1px solid black;
          border-collapse: collapse;
      }

  </style>
</head>
<body>
  <table style="width:100%">
      <tr>
          <th>A</th>
          <th colspan="2">B</th>
      </tr>
      <tr>
          <td rowspan="2">100</td>
          <td>200</td>
          <td>200</td>
      </tr>
      <tr>
          <td>300</td>
          <td>200</td>
      </tr>
  </table>
</body>
</html>