반응형
테이블
테이블은 표를 출력하는 것 외에도 화면의 레이아웃을 만들기 위해 많이 사용한다.
<tr></tr> 줄
<td></td> 칸
<h3>테이블</h3>
<!-- table border : 테이블을 그리기 위해 바깥에 박스를 치는 것 -->
<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
테이블에 스타일 넣기
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 스타일 넣기 -->
<style type="text/css">
td {
width: 100px;
height: 100px;
text-align:center;
}
</style>
</head>
<body>
<h3>테이블</h3>
<table border="1">
<!-- 테이블을 그리기 위해 바깥에 박스를 치는 것 -->
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>D</td>
<td>E</td>
<td>F</td>
</tr>
<tr>
<td>G</td>
<td>H</td>
<td>I</td>
</tr>
</table>
</body>
</html>
칸 합치기
1. 칸 가로로 합치기
colspan = "칸 개수"2. 칸 세로로 합치기
rawspan = "줄 개수"
<h3>칸 가로로 합치기</h3>
<table border = "1">
<tr><td colspan = "2">aaa</td><td>bbb</td><td>ccc</td></tr>
<tr><td>ddd</td><td>eee</td><td>fff</td></tr>
</table>
<h3>칸 세로로 합치기</h3>
<table border = "1">
<tr><td rowspan = "2">aaa</td><td>bbb</td><td>ccc</td></tr>
<tr><td>ddd</td><td>eee</td><td>fff</td></tr>
</table>
반응형
