본문 바로가기

개발일지/Front

1101(2) html - 테이블(table)

요즘은 <div>를 많이 쓰지만 종종 table을 사용하는 곳들도 있다.

 

테이블 만들기

<table> : 테이블 만드는 태그

<th> : 테이블 헤더 만드는 태그

<tr> : 테이블 행을 만드는 태그

<td> : 테이블 열을 만드는 태그

 

테이블 디자인 변경

border : 테두리

bordercolor : 테이블 테두리 색상 - default 검정색

width : 가로 크기 

height : 세로 크기

align : 정렬

bgcolor : 배경색

colspan : 가로 합병 (열 합병)

rowspan : 세로 합병 (행 합병) 

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
	<table border="1">
		<tr>
			<th>영화제목</th>
			<th>연도</th>
			<th>감독</th>
			<th>평가</th>
		</tr>
		<tr>
			<td>라이프오브파이</td>
			<td>2013</td>
			<td>이안</td>
			<td>8.68</td>
		</tr>
		<tr>
			<td>레미제라블</td>
			<td>2012</td>
			<td>톰후퍼</td>
			<td>8.28</td>
		</tr>
		<tr>
			<td>장고 : 분노의 추적자</td>
			<td>2012</td>
			<td>타란티노</td>
			<td>8.29</td>
		</tr>
	</table>
</body>
</html>

 

<td colspan="3"></td>

 

<td rowspan="3"></td>

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<style type="text/css">
	table
	{
		width : 250px;
		height : 100px;
	}
</style>
</head>
<body>
	<table border="1">
		<tr>
			<th>1열</th>
			<th>2열</th>
			<th>3열</th>
		</tr>
		<tr>
			<td rowspan="2">1행 1열</td>
				<td>1행 2열</td>
				<td>1행 3열</td>
		</tr>
		<tr>
			<td>2행 2열</td>
			<td>2행 3열</td>
		</tr>
		<tr>
			<td colspan="3">3행 1열</td>
		</tr>
	</table>
</body>
</html>