[HTML] Table 셀 병합

💡셀병합

---

가로로 인접한 셀끼리 합치면 가로 셀병합, 세로로 인접한 셀끼리 합치면 세로 셀병합이다.

 

원본 테이블

 

1. 가로 셀병합

가로 셀병합을 할 때에는 colspan 속성을 사용한다.

colspan 속성을 2로 지정하면 다른 것들보다 2개만큼의 컬럼을 확보한다.

<h1>가로 셀병합</h1>

<table border width="200" height="200">
    <tr>
        <td colspan="2">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

<h1>가로 셀병합</h1>

<table border width="200" height="200">
    <tr>
        <td colspan="2">1</td>
        <!-- <td>2</td> -->
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

그리고 2번 셀을 삭제해주면 1번 셀만이 남아 가로 셀병합이 된다.

 

2. 세로 셀병합

세로 셀병합을 할 때에는 rowspan 속성을 사용한다.

<h1>세로 셀병합</h1>

<table border width="200" height="200">
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td>4</td>
    </tr>
</table>

<h1>세로 셀병합</h1>

<table border width="200" height="200">
    <tr>
        <td rowspan="2">1</td>
        <td>2</td>
    </tr>
    <tr>
        <!-- <td>3</td> -->
        <td>4</td>
    </tr>
</table>

그리고 3번 셀을 삭제해주면 1번 셀만이 남아 세로 셀병합이 된다.