[ITWILL : WEB]테이블 칸 합치기

ITWILL학원 : 3강 WEB(HTML, CSS) BY 김영희

테이블 칸 합치기

• colspan = “n” : 세로방향으로 합치는 속성
• rowspan = “n” : 가로방향으로 합치는 속성

칸합치는 속성은 항상 th나 td에서 이루어지지 tr에서는 절대 사용하지않는다!

rowspan을 생각할때는 빨래줄(tr)에 빨래(td나th)가 걸려있다고 생각하면 편하다
기준을 몇번째 tr인지 확인한 뒤 빨래줄에 빨래를 걸면 아래로 내려오듯이 td가 내려와있다고 생각하면 된다.

칸 합치는 속성
가로방향	세로방향
colspan="n"	rowspan="n"
n개의 칸을 하나로 합치는 속성

<table>
	<tr>
		<th colspan="2">칸 합치는 속성</th>
	</tr>
	<tr>
		<th>가로방향</th>
		<th>세로방향</th>
	</tr>
	<tr>
		<td>colspan="n"</td>
		<td>rowspan="n"</td>
	</tr>
	<tr>
		<td colspan="2">n개의 칸을 하나로 합치는 속성</td>
	</tr>
</table>

가로방향 합치기와 세로방향합치기가 동시에 나오는 예시는 아래와 같다
rowspan을 위에서 말했던 빨래감예시를 들어 설명해보면, 첫 번째 tr의 빨래줄의 마지막 td에 아래 빨래감이 3개가 걸려야한다.(즉 3칸을 합친다)
따라서 첫번째 tr의 두번째 td에 rowspan=”3”를 해준다

<table>
    <tr>
        <td colspan="2">a</td>
        <td rowspan="3">b</td>
    </tr>
    <tr>
        <td>c</td>
        <td rowspan="2">d</td>
    </tr>
    <tr>
        <td>e</td>
    </tr>
    <tr>
        <td colspan="3">f</td>
    </tr>
</table>