HTML Table

오현석·2022년 7월 4일
0

htmp 테이블은 tr의 개수를 통해 "행" td의 개수를 통해 "열"을 정할 수 있다
가로 세로의 크기는 가장 큰 값을 따른다(가로는 가로, 세로는 세로)
배경색의 경우 마지막 코드의 따른다

<table border="5" cellspacing="10" cellpadding="5" bgcolor ="#ff0">
	
		<tr>
			<td height ="20">1_1</td>
			<td height ="40" width = "50">1_2</td>
			<td height ="60">1_3</td>
		</tr>
		<tr height ="40">
			<td height ="20">2_1</td>
			<td width = "150">2_2</td>
			
		</tr>
		<tr>
			<td>3_1</td>
			<td width = "100">3_2</td>
			<td>3_3</td>
		</tr>
		<tr bgcolor ="#0f0">
			<td>4_1</td>
		
			<td bgcolor ="#0ff">4_3</td>
		</tr>

	</table>

테이블 열 합치기(늘리기 및 제거하기)
테이블은 가로 또는 세로로만 합칠 수 있다
정확히는 span을 통해 하나의 셀을 늘린후 필요없는 셀을 제거하는 방식이다

<table border="5"  bgcolor ="#ff0">
	
		<tr height="40">
			<td width="50">1_1</td>
			<td width="50">1_2</td>
			<td width="50">1_3</td>
		</tr>
		<tr height="40">
			<td rowspan="2">2_1</td>
			<td colspan="2">2_2</td>
		</tr>
		<tr height="40">
		
			<td>3_2</td>
			<td>3_3</td>
		</tr>
		<tr height="40">
			<td colspan="3">
			<table border="">
				<tr height="40">
					<td width="75">n_1</td>
					<td width="75">n_2</td>				
				</tr>
			</table>
			</td>
		</tr>

	</table>
profile
지망생

0개의 댓글