[HTML] 테이블(table) 태그 속성 (병합, 테두리, 간격, 여백)

728x90

목 차

• 1. table 태그란?
• 2. 기본 구조
• 3. 속성
  • 3-1. table 속성
  • 3-2. td 및 th 속성
• 4. CSS 스타일링
• 5. 접근성 향상

반응형

 

1. table 태그란?

HTML의 <table> 태그는 데이터를 행(row)과 열(column)로 구성된 표 형태로 표현할 때 사용됩니다. HTML 테이블은 구조적으로 데이터를 조직화하는 데 적합하며, 다양한 태그를 조합하여 표의 내용과 레이아웃을 정의할 수 있습니다.

 

---

 

2. 기본 구조

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

• <table>: 테이블을 정의하는 컨테이너 태그입니다.
• <tr>: 테이블의 한 행(row)을 정의합니다.
• <th>: 테이블 헤더 셀을 정의하며 기본적으로 텍스트가 굵게 표시되고 중앙 정렬됩니다.
• <td>: 테이블 데이터를 정의하는 일반 셀입니다.

 

 

---

 

3. 속성

3-1. table 속성

• width, height: 테이블의 크기를 지정합니다.
• cellspacing: 셀 간의 간격을 설정합니다. (CSS의 border-spacing으로 대체)
• cellpadding: 셀 내부의 여백을 설정합니다. (CSS의 padding으로 대체)
• border: 테이블의 테두리를 설정합니다. (HTML5에서는 CSS로 대체

<table border="1">...</table>

 

3-2. td 및 th 속성

• colspan: 셀의 가로 방향 병합.

<td colspan="2">병합된 셀</td>

 

• rowspan: 셀의 세로 방향 병합.

<td rowspan="2">세로 병합</td>

 

---

 

4. CSS 스타일링

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid black;
    padding: 8px;
    text-align: left;
  }
  th {
    background-color: #f2f2f2;
  }
</style>

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

 

---

 

5. 접근성 향상

• scope 속성: 헤더 셀(<th>)이 어떤 데이터를 설명하는지 지정.

<th scope="col">Column Header</th>
<th scope="row">Row Header</th>

• summary 속성: 테이블의 간략한 설명 제공 (HTML5에서는 사용되지 않음).

 

---

 

관련글

• 텍스트 입력을 위한 input 태그의 올바른 사용법
• 아스키 코드표 (0 ~ 255) 한 눈에 확인하기
• 여러 줄 입력하는 textarea 태그 올바른 사용법