<table> <tr> <td> 태그

table 태그

<table> 태그는 테이블 전체를 나타낸다.
<tr> 태그는 테이블 행을 나타낸다.
<td> 태그는 테이블 셀을 나타낸다.

<table>
  <tr>
    <td>Header 1</td>
    <td>Header 2</td>
    <td>Header 3</td>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>
</table>

이렇게 하면 3개의 열과 2개의 행이 있는 테이블이 생성되고 각 셀에는 <td> 태그에 정의된 텍스트가 포함된다.

 

또한 <tr> 내부에서  <th> 태그를 사용하여 테이블 헤더를 만들 수 있다.

<table>
  <tr>
    <th style="width:30%">Header 1</th>
    <th style="width:30%">Header 2</th>
    <th style="width:40%">Header 3</th>
  </tr>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
    <td>Row 1, Column 3</td>
  </tr>
</table>

 

셀병합 :  rowspan colspan

HTML 테이블의 rowspan 및 colspan 속성을 사용하여 셀을 수평 또는 수직으로 병합할 수 있다.

<table width="600px">
  <tr>
    <td rowspan="2" style="background-color: red;">2 rows</td>
    <td>This is a normal cell</td>
    <td>This is a normal cell</td>
  </tr>
  <tr>
    <td colspan="2" style="background-color: brown;">This is a 2 columns</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
    <td>Row 2, Column 3</td>
  </tr>  
</table>

이렇게 하면 2개의 행과 2개의 열이 있는 테이블이 생성되고, 첫 번째 셀은 2개의 행에 걸쳐 확장되며, 첫 번째 행의 두 번째 셀과 두 번째 행의 첫 번째 셀은 함께 병합되고, 두 번째 행의 두 번째 셀은 2개의 열에 걸쳐 확장된다.