[UX/UI] HTML - 테이블 셀합치기

샘플 테이블

1	2	3
4	5	6
7	8	9

<table border width="100%">
    <tbody>
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

 

가로로 합치기

가로로 합치기
4	5	6
7	8	9

<table border width="100%">
    <tbody>
        <tr>
            <td colspan="3">가로로 합치기</td>
        </tr>
        <tr>
            <td>4</td>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

 

세로로 합치기

세로로 합치기	2	3
	5	6
	8	9

<table border width="100%">
    <tbody>
        <tr>
            <td rowspan="3">세로로 합치기</td>
            <td>2</td>
            <td>3</td>
        </tr>
        <tr>
            <td>5</td>
            <td>6</td>
        </tr>
        <tr>
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

 

가로세로 원하는만큼 합치기

가로세로 원하는만큼 합치기		3
		6
7	8	9

<table border width="100%">
    <tbody>
        <tr>
            <td colspan="2" rowspan="2">가로세로 원하는만큼 합치기</td>
            <td>3</td>
        </tr>
        <tr>
            <td>6</td>
        </tr>
        <tr>
          	<td>7</td>
            <td>8</td>
            <td>9</td>
        </tr>
    </tbody>
</table>

 

출처 : know-one-by-one.tistory.com/23