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>
금강산 | |
치악산 | 한라산 |
금강산 | 설악산 |
한라산 |
'GURU > PYTHON & HTML' 카테고리의 다른 글
[HTML day 5: 시맨틱 태그] <details> 및 <summary> 태그 (0) | 2022.01.19 |
---|---|
[HTML day 5: 시맨틱 태그] 구조화된 HTML5 문서 작성 (0) | 2022.01.19 |
[HTML day 3:리스트 작성] <ol>,<ul>,<dl> (0) | 2022.01.14 |
[HTML day 2] 특수문자, <pre>태그 연습 (0) | 2022.01.13 |
[HTML day1] hello.html (0) | 2022.01.11 |