GURU/PYTHON & HTML

[HTML day 4: 테이블 만들기] <table>

myejinni 2022. 1. 18. 13:52

1. 테이블 만들기

border: 테두리 보여주기

width: 테이블에 폭 주기

height: 테이블에 높이 주기

* thead와 tbody tfoot 등의 순서가 바뀌어도 웹 브라우저가 알아서 해석해 준다!

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>테이블 만들기</title>
</head>
<body>

	<table border="1" width="300" height="150">
		<tr><td>금강산</td><td>설악산</td></tr>
		<tr><td>치악산</td><td>한라산</td></tr>
	</table>

</body>
</html>

 

 

테이블 만들기
금강산설악산
치악산한라산

 

2. 셀 합치기

-1.  colspan: 열 합치기

-2.  rowspan: 행 합치기

* 자기 자신을 포함해 합칠 셀의 개수를 지정해 주어야 한다

-3.  bgcolor: 배경색 넣어주기

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">	
	<title>테이블 만들기</title>
</head>
<body>

	<table border="1" width="300" height="150">
		<tr><td colspan="2" bgcolor="yellow">금강산</td><!-- <td>설악산</td> --></tr>
		<tr><td>치악산</td><td>한라산</td></tr>
	</table>
    <p>
	<table border="1" width="300" height="150">
		<tr><td rowspan="2" bgcolor="yellow">금강산</td><td>설악산</td></tr>
		<tr><!-- <td>치악산</td> --><td>한라산</td></tr>
	</table>
  
</body>
</html>

 

 

테이블 만들기
금강산
치악산한라산

금강산설악산
한라산