html colspan rowspan

HTML의 테이블에서 colspan과 rowspan은 테이블의 셀을 병합하고 행과 열을 확장하는 데 사용됩니다.

 

• colspan은 열을 병합할 때 사용됩니다. 셀의 colspan 속성값은 병합되는 열의 수를 지정합니다. 예를 들어, colspan="2"는 셀이 속한 열과 다음 열까지 2개의 열을 병합한다는 의미입니다.
• rowspan은 행을 병합할 때 사용됩니다. 셀의 rowspan 속성값은 병합되는 행의 수를 지정합니다. 예를 들어, rowspan="2"는 셀이 속한 행과 다음 행까지 2개의 행을 병합한다는 의미입니다.

 

이러한 속성은 테이블의 디자인을 개선하고 셀의 병합과 확장을 용이하게 합니다. 예를 들어, 두 개의 셀을 병합하여 더 큰 셀을 만들거나, 하나의 셀을 여러 개의 셀로 확장하여 더 많은 데이터를 보여줄 수 있습니다. 이를 통해 표의 가독성을 높일 수 있습니다.

 

사용법

 

<table>
  <tr>
    <td>1-1</td>
    <td>1-2</td>
    <td>1-3</td>
  </tr>
  <tr>
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
  </tr>
  <tr>
    <td colspan="2">3-1</td>
  </tr>
  <tr>
    <td>4-1</td>
    <td>4-2</td>
    <td>4-3</td>
  </tr>
</table>

 

위의 테이블에서 rowspan과 colspan을 사용하여 셀 병합을 하였습니다.

• 첫 번째 행의 셀들은 병합하지 않았습니다.
• 두 번째 행에서 첫 번째 셀은 2개의 행을 합치기 위해 rowspan="2"를 사용하였습니다.
• 두 번째 행에서 두 번째 셀과 세 번째 셀은 colspan="2"를 사용하여 2개의 열을 합치기 위해 병합하였습니다.
• 세 번째 행과 네 번째 행의 셀들은 병합하지 않았습니다.

위의 예시와 같이 colspan과 rowspan을 사용하여 셀을 병합하면, 표를 보다 간결하고 깔끔하게 만들 수 있습니다.