[HTML] 표 만들기 (table 태그)

HTML에서 표를 만들 때 사용하는 태그와 속성에 대해 알아보겠습니다. 표는 데이터를 구조화하여 보여줄 때 매우 유용합니다.

 

기본 표 태그

• <table> : 표를 생성하는 태그
• <tr> : 표 내부의 행을 정의하는 태그 
• <th>  : 행 내부의 제목 셀을 정의하는 태그 (열 제목에 사용됨)
• <td>  : 행 내부의 일반 셀을 정의하는 태그

기본 표 만들기

<table border="1"
  <tr>
    <th> 제목1</th>
    <th> 제목2</th>
  </tr>
  <tr>
    <td> 데이터1</td>
    <td> 데이터2</td>
  </tr>
  <tr>
    <td> 데이터3</td>
    <td> 데이터4</td>
  </tr>
</table>

 

이 코드는 아래와 같은 표를 생성합니다.

 

셀 병합

• rowspan : 셀의 높이 지정, 행을 병합할 때 사용
• colspan : 셀의 너비 지정, 열을 병합할 때 사용

<table border=="1">
  <tr>
    <th colspan="3">111</th>
    <th rowspan="3">222</th>  
  </tr>
  <tr>
    <td>333</td>
    <td rowspan="2">444</td>  
    <td>555</td>
  </tr>
  <tr>
    <td>666</td>
    <td>777</td>
  </tr>
</table>

 

이 코드는 아래와 같은 표를 생성합니다. 

colspan="3"은 첫 번째 행의 첫 번째 셀(111)이 세 개의 열을 병합합니다.

rowspan="3"은 첫 번째 행의 두 번째 셀(222)이 세 개의 행을 병합합니다.