close

HTML 표: HTML 표 만들기 및 서식 지정 가이드

테이블은 행과 열이 있는 구조화된 형식으로 데이터를 표시하기 위한 HTML의 필수 구성 요소입니다. HTML에서 테이블은 <table>, <tr> 및 <td> 태그를 사용하여 생성됩니다.

<table> 태그는 모든 행과 열을 포함하는 기본 테이블 컨테이너를 나타냅니다. 행은 <tr>(테이블 행) 태그를 사용하여 정의되고 행 내의 셀은 <td>(테이블 데이터) 태그를 사용하여 정의됩니다. 또한 <th>(테이블 헤더) 태그를 사용하여 테이블의 헤더 셀을 정의할 수 있습니다.

colspan 및 rowspan과 같은 특성을 사용하여 테이블의 셀을 병합하거나 여러 행과 열에 걸쳐 셀을 확장할 수 있습니다. 또한 CSS 속성을 적용하여 테이블의 모양과 레이아웃을 사용자 지정할 수 있습니다.

 

표( <table>)

- <table> 요소는 HTML에서 테이블을 생성하는 데 사용됩니다.

<tr>- 데이터는 행()과 열( <td> 또는 <th>) 에 배치됩니다 .

<td>- 각 데이터 셀은(데이터 셀) 또는 <th>(헤더 셀) 요소 내에 배치됩니다 .

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>

 

열 머리글( <th>)

- <th> 요소는 테이블에서 열 머리글을 만드는 데 사용됩니다.

- 일반적으로 테이블의 첫 번째 행에 배치됩니다.

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <!-- data rows -->  
</table>

 

데이터 행( <tr>):

- <tr> 요소는 테이블에서 데이터 행을 생성하는 데 사용됩니다.

- 데이터 셀( <td>) 또는 머리글 셀()은 이러한 요소 <th> 내에 배치됩니다. <tr> 

<table>  
  <tr>  
    <th>No.</th>  
    <th>Name</th>  
    <th>Age</th>  
  </tr>  
  <tr>  
    <td>1</td>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
    <td>30</td>  
  </tr>  
</table>

 

열 스패닝( colspan)

이 colspan 속성은 데이터 셀 또는 머리글 셀이 테이블에서 확장되는 열 수를 결정하는 데 사용됩니다.

<table>  
  <tr>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td colspan="2">John Doe</td>  
  </tr>  
</table>

 

행 확장( rowspan)

이 rowspan 속성은 데이터 셀 또는 머리글 셀이 테이블에서 확장되는 행 수를 결정하는 데 사용됩니다.

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <td>1</td>  
    <td>John</td>  
  </tr>  
  <tr>  
    <td>2</td>  
    <td>Jane</td>  
  </tr>  
</table>

 

셀 병합( colspan 및 rowspan)

colspan 및 rowspan 특성을 모두 결합하여 테이블의 셀을 병합 할 수 있습니다 .

<table>  
  <tr>  
    <th rowspan="2">No.</th>  
    <th colspan="2">Personal Information</th>  
  </tr>  
  <tr>  
    <td>John</td>  
    <td>25</td>  
  </tr>  
</table>

 

border 재산

- 이 border 속성은 테이블 테두리의 두께를 지정합니다.

- 의 값은 border 음수가 아닌 정수입니다.

<table border="1">  
<!-- Table rows and columns -->  
</table>

 

cellpadding 재산

-, cellpadding 속성은 셀 내용과 테이블의 셀 테두리 사이의 거리를 지정합니다.

- 의 값은 cellpadding 음수가 아닌 정수입니다.

<table cellpadding="5">  
<!-- Table rows and columns -->  
</table>

 

cellspacing 재산

- 이 cellspacing 속성은 테이블에서 셀 사이의 간격을 지정합니다.

- 의 값은 cellspacing 음수가 아닌 정수입니다.

<table cellspacing="10">  
<!-- Table rows and columns -->  
</table>

 

이러한 특성과 요소를 사용하면 필요에 따라 HTML로 테이블을 만들고 사용자 정의할 수 있습니다. 이를 사용하여 웹 사이트에서 명확하고 체계적인 방식으로 데이터를 표시할 수 있습니다.