[HTML5] 테이블<table> 태그 컨트롤 하기

테이블<table> 태그 컨트롤 하기

1. 기본 테이블 생성

number	number	number
1	2	3
4	5	6

<table border="1" width="50%"> <tr><th>number</th><th>number</th><th>number</th></tr> <tr><td>1</td><td>2</td><td>3</td></tr> <tr><td>4</td><td>5</td><td>6</td></tr> </table>

- width=50% : 화면 상 테이블 사이즈를 50%(반)으로 준다

- <table> : 테이블 생성

- <th> : 가운데 정렬되며 주로 제목을 표시

- <tr> : 한줄

- <td> : 테이블 안의 한칸 (셀)

2. 행(row) 합치기

number
1
4	5	6

<table border="1" width="50%"> <tr><th colspan="3">number</th></tr> <tr><td colspan="3">1</td> </tr> <tr><td>4</td><td>5</td><td>6</td></tr> </table>

- <td colspan="3"> : 옆으로 세칸을 병합한다

3. 열(column) 합치기

number	number	number
1	2	3
	5	6

<table border="1" width="50%"> <tr><th>number</th><th>number</th><th>number</th></tr> <tr><td rowspan="2">1</td><td>2</td><td>3</td> </tr> <tr><td>5</td><td>6</td></tr> </table>

- <td rowspan="2"> : 아래로 두칸 병합한다

4. 테이블안에 테이블

Ocean	View
That is awsome

<table border="1" bgcolor="#f5f5dc" width="50%"> <tr><th>Ocean</th><th>View</th></tr> <tr> <td colspan="2"> <table bgcolor="#6495ed" width="100%"> <tr> <td> <img src="down.jpg" width="200" alt="pic"> </td> <td> That is awsome </td> <td> <img src="down.jpg" width="200" alt="pic"> </td> </tr> </table> </td> </tr> </table>

- 테이블 안에 테이블을 만들 때 <td>와 같은 태그 안에 만들어야 한다