개발 도구 (Development Tools)/HTML & CSS

#8. HTML 테이블

BiCute 2023. 3. 20. 08:00
반응형

 

HTML 테이블(table)은 HTML 마크업 언어를 사용하여 행과 열을 갖는 표 또는 정보를 표시하는 데 사용되는 HTML 요소입니다.

테이블은 여러 행과 열을 가지며, 각 셀은 데이터를 포함할 수 있습니다.

 

<table>
  <tr>
    <th>제목 1</th>
    <th>제목 2</th>
  </tr>
  <tr>
    <td>행 1, 열 1</td>
    <td>행 1, 열 2</td>
  </tr>
  <tr>
    <td>행 2, 열 1</td>
    <td>행 2, 열 2</td>
  </tr>
</table>
  • <table> : 테이블을 구성하는 가장 외곽 태그입니다.
  • <tr> : 행을 나타내는 태그입니다.
  • <th> : 테이블 헤더를 나타내는 태그입니다.
  • <td> : 테이블의 각 셀을 나타내는 태그입니다.

CSS를 사용하여 테이블의 레이아웃, 스타일, 그리고 다른 표시 기능을 조정할 수 있습니다.

 

 

 

# Table tag

HTML의 <table> 태그는 행과 열을 갖는 표를 만드는 데 사용됩니다.

테이블은 <tr>(행), <th>(헤더 셀), <td>(일반 셀) 태그를 사용하여 구성됩니다.

 

<table> 태그에서 사용 가능한 속성에는 bordercellpaddingcellspacingwidth 등이 있습니다.

이 속성들을 사용하여 테이블의 스타일을 적용할 수 있습니다.

 

 

 

# 행(row)과 열(column)

HTML 테이블은 행(row)과 열(column)으로 구성됩니다.

행은 <tr> 태그로, 열은 <td> 또는 <th> 태그로 표시됩니다.

- <tr>: 행을 나타내는 태그입니다. 행은 여러 열(<td> 또는 <th>)로 구성됩니다.
- <td> : 테이블의 일반 셀(cell)을 나타내는 태그입니다. 각 셀은 하나의 데이터 값을 가집니다.
- <th> : 테이블의 헤더 셀(header cell)을 나타내는 태그입니다. 헤더 셀은 테이블의 행 또는 열을 나타내는 제목을 가집니다.

 

 

 

# Table Header

HTML 테이블에서 헤더(header)는 테이블의 행 또는 열을 나타내는 제목을 나타냅니다. 

헤더는 <th> 태그를 사용하여 정의됩니다.

헤더 셀은 기본적으로 굵게 표시되며, 텍스트 정렬이 기본적으로 중앙정렬됩니다.

 

 

 

# Table Data

HTML 테이블에서 테이블 데이터(Table Data)는 테이블의 각 셀의 내용을 나타냅니다. 

테이블 데이터는 <td> 태그를 사용하여 정의됩니다.

<td> 태그는 테이블의 셀을 나타내는 태그입니다.

각 셀은 기본적으로 텍스트 내용을 포함할 수 있으며, 텍스트 정렬, 색상, 배경색, 각도 등을 지정할 수 있습니다.

 

 

 

# 행과 열의 확장

테이블 행을 확장하려면, rowspan 속성을 사용하여 테이블 데이터(<td>) 태그에 지정할 수 있습니다.

rowspan 속성은 행을 몇 개의 행으로 확장할지 지정합니다.

다음은 테이블 행을 확장하는 예제입니다:

<table>
  <tr>
    <th>제목 1</th>
    <th>제목 2</th>
    <th>제목 3</th>
  </tr>
  <tr>
    <td rowspan="2">행 1, 열 1</td>
    <td>행 1, 열 2</td>
    <td>행 1, 열 3</td>
  </tr>
  <tr>
    <td>행 2, 열 2</td>
    <td>행 2, 열 3</td>
  </tr>
</table>

위의 예제에서, 행 1, 열 1은 rowspan="2" 속성을 사용하여 두 개의 행으로 확장됩니다.

마찬가지로, 테이블 열을 확장하려면, colspan 속성을 사용하여 테이블 데이터(<td>) 태그에 지정할 수 있습니다.

colspan 속성은 열을 몇 개의 열로 확장할지 지정합니다.

 

다음은 테이블 열을 확장하는 예제입니다:

<table>
  <tr>
    <th>제목 1</th>
    <th>제목 2</th>
    <th>제목 3</th>
    <th>제목 4</th>
  </tr>
  <tr>
    <td>행 1, 열 1</td>
    <td colspan="2">행 1, 2열~3열에 걸쳐진 2열</td>
    <td>행 1, 열 4</td>
  </tr>
  <tr>
    <td>행 2, 열 1</td>
    <td>행 2, 열 2</td>
    <td>행 2, 열 3</td>
    <td>행 2, 열 4</td>
  </tr>
</table>

위의 예제에서, 행 1, 2열~3열에 걸쳐진 2열은 colspan="2" 속성을 사용하여 두 개의 열로 확장됩니다.

반응형