테이블 만들기

1. 테이블

HTML 테이블은 웹 페이지에서 행(row)과 열(column)을 사용해 데이터를 표 형태로 정리해서 보여주는 구조입니다.
기본적으로 <table> 태그로 테이블을 만들고, 그 안에 <tr>(table row)로 행을 정의하며, 각 행 안에는 <td>(table data) 태그를 사용해 셀 데이터를 입력합니다.
또한 제목 셀에는 <th>(table header)를 사용하여 굵고 가운데 정렬된 머리글을 만들 수 있습니다.

<style>
  table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
  }
</style>

<table>
  <tr>
    <th>이름</th>
    <th>나이</th>
  </tr>
  <tr>
    <td>김사과</td>
    <td>20</td>
  </tr>
</table>

 

 

2. <thead>, <tbody>

<thead>와 <tbody>는 HTML 테이블에서 표의 구조를 논리적으로 구분하기 위해 사용하는 태그입니다. <thead>는 테이블의 헤더 영역, 즉 제목 행들을 감싸는 용도로 사용되며, 일반적으로 <th> 태그들과 함께 사용됩니다. 반면 <tbody>는 실제 데이터가 들어가는 본문 영역을 감싸며, <td>들이 포함된 여러 개의 <tr>(행)을 포함합니다. 이렇게 구분함으로써 테이블이 더 의미 있고 정돈된 구조를 가지게 되고, CSS나 JavaScript에서 각 영역에 스타일이나 기능을 따로 적용하기도 쉬워집니다. 또한, 리더기나 접근성 도구에서도 테이블 내용을 더 잘 이해하고 전달할 수 있도록 도와줍니다.

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

  th, td {
    padding: 8px;
    text-align: center;
  }
</style>

<table>
  <thead>
    <tr>
      <th>과목</th>
      <th>점수</th>
      <th>등급</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>국어</td>
      <td>85</td>
      <td>B</td>
    </tr>
    <tr>
      <td>수학</td>
      <td>90</td>
      <td>A</td>
    </tr>
  </tbody>
</table>

 

 

3. colspan, rowspan 속성

colspan과 rowspan 은 HTML 테이블에서 셀을 가로 또는 세로 방향으로 병합할 때 사용하는 속성입니다. colspan은 가로 방향으로 여러 칸을 합칠 때 사용하며, 예를 들어 colspan="2"는 현재 셀이 두 개의 열을 합친 것처럼 보이게 만듭니다. 반대로 rowspan은 세로 방향으로 셀을 병합할 때 사용하며, rowspan="3"이면 해당 셀이 세 개의 행에 걸쳐 합쳐진 형태가 됩니다. 이 속성들을 사용하면 복잡한 구조의 표나 제목 셀을 깔끔하게 만들 수 있고, 정보를 더 직관적으로 정리된 형식으로 표현할 수 있습니다.

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

  th, td {
    padding: 6px;
    text-align: center;
  }
</style>

<table>
  <tr>
    <th rowspan="2">이름</th>
    <th colspan="2">성적</th>
  </tr>
  <tr>
    <th>수학</th>
    <th>영어</th>
  </tr>
  <tr>
    <td>김사과</td>
    <td>90</td>
    <td>85</td>
  </tr>
</table>

 

<style>
  table {
    width: 60%;
    border-collapse: collapse;
    margin-top: 10px;
  }

  th, td {
    border: 1px solid #888;
    padding: 10px;
    text-align: center;
  }

  thead {
    background-color: #f0f0f0;
  }

  tbody tr:hover {
    background-color: #f9f9f9;
  }
</style>

<table>
  <thead>
    <tr>
      <th>이름</th>
      <th>부서</th>
      <th>입사일</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>김사과</td>
      <td>인사팀</td>
      <td>2020-03-01</td>
    </tr>
    <tr>
      <td>반하나</td>
      <td>개발팀</td>
      <td>2021-07-15</td>
    </tr>
  </tbody>
</table>