HTML 테이블 태그 구조 정리

HTML 테이블의 이해와 활용

웹 개발에서 정보를 시각적으로 정리할 때 가장 많이 활용되는 방법 중 하나가 HTML 테이블입니다. 이번 포스팅을 통해 테이블의 구조와 다양한 속성 설정 방법에 대해 자세히 알아보겠습니다.

HTML 테이블 기본 구조

HTML에서 테이블을 만들기 위해서는 <table> 태그를 사용합니다. 이 태그는 표를 구성하는 기본 요소입니다. 일반적으로 테이블은 열(행)과 행(열) 단위로 구성되며, 이를 위해 <tr>, <td> 및 <th> 태그가 사용됩니다.

테이블 구성 요소

• <table>: 전체 테이블을 감싸는 태그입니다.
• <tr>: 각각의 행을 정의하는 태그입니다.
• <td>: 테이블의 데이터 셀을 생성하는 태그입니다.
• <th>: 표의 제목 셀을 정의하기 위한 태그입니다.

테이블의 크기 조절

테이블을 만들 때, 특정한 크기를 설정하려면 style 속성을 사용하여 너비와 높이를 조정할 수 있습니다. 아래는 테이블의 전체 너비를 100%로 설정하는 예시입니다.

<table style="width:100%">

열 및 행 크기 설정

특정 열이나 행의 크기를 조정하고 싶다면, <th> 혹은 <td> 요소에 style 속성을 추가하여 직접 설정 가능합니다.

<th style="width:70%">이름</th>

위 예시에서는 첫 번째 열의 너비를 70%로 설정하였습니다.

행과 열의 합치기

HTML 테이블에서는 데이터의 표현을 보다 효과적으로 하기 위해 셀을 합치는 기능이 있습니다. 이를 위해 colspan과 rowspan 속성을 사용합니다.

열 합치기

colspan 속성을 사용하면 특정 셀을 가로 방향으로 여러 개의 열로 병합할 수 있습니다. 사용법은 다음과 같습니다.

<td colspan="합칠 열의 개수">내용</td>

행 합치기

rowspan 속성은 세로 방향으로 여러 개의 행을 합칠 때 사용됩니다. 예시로는 다음과 같은 코드가 있습니다.

<td rowspan="합칠 행의 개수">내용</td>

CSS를 활용한 테이블 꾸미기

테이블은 HTML만으로는 다소 밋밋하게 보일 수 있습니다. 이를 위해 CSS를 사용하여 더욱 보기 좋게 스타일링할 수 있습니다. 예를 들어, 표의 경계선과 배경색을 변경할 수 있습니다.

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

위의 스타일을 적용하면 경계선이 명확해지고 제목 셀의 배경색이 바뀌어 테이블이 더 돋보이게 됩니다.

실제 테이블 예시

아래는 기본 예시로, 학생의 정보를 담고 있는 테이블입니다.

<table style="width:100%">
  <thead>
    <tr>
      <th>학생 이름</th>
      <th>학년</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>3</td>
    </tr>
    <tr>
      <td>김영희</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

테이블 자동 생성 도구

대량의 데이터를 빠르게 테이블로 만들고 싶다면, 다양한 도구를 활용할 수 있습니다. 특히 Tables Generator와 같은 사이트는 HTML 테이블을 손쉽게 생성할 수 있는 유용한 도구입니다.

결론

이번 포스트에서는 HTML 테이블의 기본 구조, 크기 조절, 셀 합치기 및 CSS 스타일링에 대해 알아보았습니다. 이 외에도 HTML 테이블은 다양한 기능을 제공하므로, 실습을 통해 익숙해지시기를 바랍니다. 웹 개발을 더욱 수월하게 할 수 있도록 많은 도움이 되었으면 합니다.

질문 FAQ