[HTML] 개념 정리 6 :: 테이블 태그<table>와 속성

HTML 테이블 태그: <table>와 속성 사용법

HTML에서 테이블(table)은 데이터를 행(row)과 열(column)로 구성하여 정리된 형태로 보여줌. <table> 태그와 관련 태그 및 속성을 사용하여 테이블을 구성할 수 있음.

---

1. 테이블 태그 기본 구조

(1) 주요 태그

• <table>: 테이블 전체를 정의.
• <tr>: 테이블의 행(row)을 정의.
• <th>: 테이블 헤더 셀(머리글)을 정의. 기본적으로 텍스트가 굵게 표시되고 중앙 정렬됨.
• <td>: 테이블 데이터 셀을 정의.
• <caption>: 테이블 제목(캡션)을 추가.

(2) 기본 구조 예제

<table>
  <caption>예제 테이블</caption>
  <tr>
    <th>제목 1</th>
    <th>제목 2</th>
  </tr>
  <tr>
    <td>내용 1</td>
    <td>내용 2</td>
  </tr>
</table>

---

2. 테이블 속성

(1) width와 height

테이블 또는 셀의 크기를 설정. 단위는 px 또는 %를 사용.

<table width="100%" height="200">
  <tr>
    <td>셀 1</td>
    <td>셀 2</td>
  </tr>
</table>

(2) cellpadding (셀 안쪽 여백)

셀 내부와 콘텐츠 간의 여백을 설정.

<table cellpadding="10">
  <tr>
    <td>셀 내부 여백이 10px</td>
  </tr>
</table>

(3) cellspacing (셀 간격)

셀과 셀 사이의 공백을 설정.

<table cellspacing="5">
  <tr>
    <td>셀 간격</td>
    <td>셀 간격</td>
  </tr>
</table>

(4) border (테두리)

테이블의 테두리 두께를 설정.

<table border="1">
  <tr>
    <td>테두리 두께 1px</td>
  </tr>
</table>

(5) colspan (열 병합)

한 셀이 여러 열을 차지하도록 설정.

<table border="1">
  <tr>
    <td colspan="2">열 병합</td>
  </tr>
  <tr>
    <td>셀 1</td>
    <td>셀 2</td>
  </tr>
</table>

(6) rowspan (행 병합)

한 셀이 여러 행을 차지하도록 설정.

<table border="1">
  <tr>
    <td rowspan="2">행 병합</td>
    <td>셀 1</td>
  </tr>
  <tr>
    <td>셀 2</td>
  </tr>
</table>

(7) bgcolor (배경색)

셀이나 테이블의 배경색을 지정. HTML5에서는 CSS 사용 권장.

<table border="1" bgcolor="#f0f0f0">
  <tr>
    <td>배경색 적용</td>
  </tr>
</table>

CSS를 사용한 배경색 지정:

<table style="background-color:#f0f0f0; border:1px solid black;">
  <tr>
    <td>CSS로 배경색 적용</td>
  </tr>
</table>

---

3. 테이블 예제

(1) 간단한 데이터 테이블

<table border="1" cellpadding="5" cellspacing="2" width="50%">
  <caption>학생 성적표</caption>
  <tr>
    <th>이름</th>
    <th>과목</th>
    <th>점수</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>수학</td>
    <td>95</td>
  </tr>
  <tr>
    <td>김철수</td>
    <td>영어</td>
    <td>88</td>
  </tr>
</table>

(2) 행과 열 병합 예제

<table border="1" cellpadding="5">
  <tr>
    <th>이름</th>
    <th colspan="2">연락처</th>
  </tr>
  <tr>
    <td>홍길동</td>
    <td>010-1234-5678</td>
    <td rowspan="2">서울</td>
  </tr>
  <tr>
    <td>김철수</td>
    <td>010-8765-4321</td>
  </tr>
</table>

---

결론

HTML 테이블은 데이터를 정리하고 표시하는 데 유용한 도구로, <table>, <tr>, <th>, <td>와 같은 태그와 cellpadding, cellspacing, border 등의 속성을 활용하여 다양한 스타일로 구성 가능함. CSS를 활용하면 테이블 디자인을 더욱 세련되게 만들 수 있음.

이 글이 테이블 태그 활용에 도움이 되길 바람! 😊