[Html] 테이블 셀 병합 / colspan / rowspan

 

 

< table >

 

① 셀 병합

 

- Colspan : 가로방향으로 병합

 

  · < colspan = "2"> : 열 2칸 합침

 

colspan = "2"

 

  <table>
	<tr>
	  <th colspan ="2"> 셀 합치기 </td>
	</tr>
	
	<tr>
	  <td> 가로로 n개만큼의 칸을 하나로 합치기</td>
	  <td> colspan="n"</td>
	</tr>

	<tr>
	  <td> 세로로 n개만큼의 칸을 하나로 합치기</td>
	  <td> rowspan="n"</td>
	</tr>	

  </table>

 

- Rowspan : 세로방향으로 병합

 

  · <rowspan = "2"> : 행 2칸 합침

 

rowspan = "2"

  <table>
	<tr>
	  <th> Name </td>
	  <td> Jill </td>
	</tr>
	
	<tr>
	  <th rowspan="2"> Phone </th>
	  <td> 555-1234 </td>
	</tr>

	<tr>
	  <td> 555-8745 </td>
	</tr>
  </table>

  · 빗금 친 셀끼리 한 행 !

 

- 연습 1)

 

  <table>
	<tr>
	  <th rowspan="3"> 출<br>석 </th>
	  <td>01</td>
	</tr>
	
	<tr>
	  <td>이지수</td>
	</tr>

	<tr>
	  <td>불참</td>
	</tr>
  </table>

 

- 연습  2)

 

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

	<tr>
	  <td> f </td>
	  <td> g </td>
	</tr>
  </table>

 

- 연습 3)

 

  <table>
	<tr>
	  <td> AAA </td>
	  <td> BBB </td>
	  <td> CCC </td>
	  <td> DDD </td>
	</tr>
	
	<tr>
	  <td> EEE </td>
	  <td rowspan="2"> FFF </td>
	  <td rowspan="2"> GGG </td>
	  <td> HHH </td>
	</tr>

	<tr>
	  <td> III </td>
	  <td> JJJ </td>
	</tr>

	<tr>
	  <td colspan="2"> KKK </td>
	  <td colspan="2"> LLL </td>
	</tr>

  </table>

 

 

- 연습 4)

 

  <table>
	<tr>
	  <th colspan="4">아이티윌 게스트하우스 예약 안내</th>
	</tr>

	<tr>
	  <th>방 이름</th>
	  <th>대상</th>
	  <th>크기</th>
	  <th>가격</th>
	</tr>

	<tr>
	  <th>유채방</th>
	  <td>여성 도미토리</td>
	  <td rowspan="3">4인실</td>
	  <td rowspan="4">1인 20,000원</td>
	</tr>

	<tr>
	  <th rowspan="2">동백방</th>
	  <td>남성 도미토리</td>
	</tr>

	<tr>
	  <td>가족 1팀</td>
	</tr>

	<tr>
	  <th colspan="2">천혜향방</th>
	  <td>2인실</td>
	</tr>

	<tr>
	  <td colspan="4"><b>바깥채 단독 : 전화문의</b> (010-777-5454)</td>
	</tr>

  </table>