HTML/CSS 기초 02

Table(t/td/tr)

<table>
		<tr>
			<td>1행 1열</td>
			<td>1행 2열</td>
			<td>1행 3열</td>
		</tr>
		<tr>
			<td>2행 1열</td>
			<td>2행 2열</td>
			<td>2행 3열</td>
		</tr>
		<tr>
			<td>3행 1열</td>
			<td>3행 2열</td>
			<td>3행 3열</td>
		</tr>
		<tr>
			<td>4행 1열</td>
			<td>4행 2열</td>
			<td>4행 3열</td>
		</tr>
	</table>

        -<table> 태그는 가장 부모태그로 table임 
		
        -<caption> 태그는 테이블 제목 태그
        
		- <tr> 태그는 table row의 약자로 테이블의 row를 의미 :한 줄 

		- <td> 태그는 table data의 약자로 테이블의 데이터를 의미 : 한칸
        
        * 표에서도 첫 줄은 thead, 마지막 줄은 tfoot, 그 외엔 tbody로 묶음 

---

✔ 테이블 합치기

<td colspan="합칠 셀의 개수"> 내용 </td> //가로 합치기

<th colspan="합칠 셀의 개수"> 내용 </th>

<td rowspan="합칠 셀의 개수"> 내용< /td> //세로 합치기

<th rowspan="합칠 셀의 개수"> 내용< /th>

		<table>
		<tr>
			<td>이름</td>
			<td></td>
			<td>내용</td>
			<td></td>
		</tr>
		
		<tr>
			<td>주소</td>
			<td colspan="3"></td>
			
		</tr>
		<tr>
			<td rowspan="2">자기소개</td>
			<td colspan="3"></td>
		</tr>
</table>

---

<colgroup>
	<col style="width:10%";> or <col style="width:100px";>
	<col style="width:40%";>
	<col style="width:10%";>
	<col style="width:40%";>
</colgroup>

	칸 넓이 조정하기 
    %로 조정할땐 table 넓이를 몇 %으로 할것인지 정해야한다.
    

<table>
	<colgroup>
	<col style="width:400px";>
	<col style="width:200px";>
	<col style="width:400px";>
	</colgroup>
		<tr>
			<td colspan="2">구분</td>
			<td>정원</td>
		</tr>
		<tr>
			<td rowspan="9">리조트</td>
			<td>패밀리</td>
			<td>4인</td>
		</tr>
		<tr>
			<td>스위트</td>
			<td>5인</td>
			
		</tr>
		<tr>
			<td>골드스위트</td>
			<td>7인</td>
			
		</tr>
		<tr>
			<td>패밀리(온돌)</td>
			<td>4인</td>
			
			
		</tr>
		<tr>
			<td>스위트(온돌)</td>
			<td>5인</td>

			
		</tr>
		<tr>
			<td>패밀리</td>
			<td>4인</td>
			
		</tr>
		<tr>
			<td>스위트</td>
			<td>5인</td>
		</tr>
		<tr>
			<td>스위트(취사형)</td>
			<td>5인</td>
		</tr>
		<tr>
			<td>스위트(클린형)</td>
			<td>5인</td>
		</tr>
		<tr>
			<td rowspan="3">호텔</td>
			<td>슈페리어</td>
			<td rowspan="3">2인</td>
		</tr>
		<tr>
			<td>디럭스</td>
		</tr>
		<tr>
			<td>디럭스VIEW</td>
		</tr>
		<tr>
			<td rowspan="3">노블리안동</td>
			<td>실버스위트</td>
			<td>6인</td>
		</tr>
		<tr>
			<td>골드스위트</td>
			<td>7인</td>
		</tr>
		<tr>
			<td>로얄스위트</td>
			<td>8인</td>
		</tr>
</table>