HTML 강좌 | 표(Table) 만들기

표는 table 태그로 만듭니다.

행은 tr 태그로, 셀은 th 또는 td 태그로 만듭니다. th는 제목 셀을 만들 때, td는 내용 셀을 만들 때 사용합니다.

각 열의 의미에 따라 thead, tbody, tfoot 태그로 구분지을 수도 있습니다.

가로로 이웃한 셀을 합칠 때에는 colspan 속성을, 세로로 이웃한 셀을 합칠 때에는 rowspan 속성을 이용합니다.

표 제목은 caption 태그로 만듭니다.

위의 태그들을 다 이용한 간단한 예는 다음과 같습니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>HTML | Table</title>
    <style>
      table {
        width: 100%;
      }
      table, th, td {
        border: 1px solid #bcbcbc;
      }
    </style>
  </head>
  <body>
    <table>
      <caption>Lorem</caption>
      <thead>
        <tr>
          <th></th>
          <th>Ipsum</th>
          <th>Ipsum</th>
          <th>Ipsum</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>Ipsum</th>
          <td>Dolor</td>
          <td>Dolor</td>
          <td rowspan="2">Dolor</td>
        </tr>
        <tr>
          <th>Ipsum</th>
          <td>Dolor</td>
          <td>Dolor</td>
        </tr>
        <tr>
          <th>Ipsum</th>
          <td>Dolor</td>
          <td>Dolor</td>
          <td>Dolor</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="2">Table Foot</td>
        </tr>
      </tfoot>
    </table>
  </body>
</html>

정렬이나 셀 합침의 결과를 명확히 나타내기 위해 CSS로 표의 폭을 정하고 테두리를 만들었습니다.

표의 테두리, 가로폭, 정렬 등은 HTML에서 정할 수도 있으나, CSS로 꾸미는 게 더 좋습니다. 이에 대해서는 CSS에서 자세히 다루도록 하겠습니다.

Category

Created on 2014-01-29 16:27 | Updated on 2015-07-18 02:05

이 글을 공유하기

Kakao

Book navigation