table 테이블 태그 속성 및 사용법, 표 만들기
colsapn과 rowspan 속성을 이용하여 행, 열 합치기
html5에서의 표를 만드는 방법에 대해서 알아보자.
테이블 태그는 단순히 표를 나타내는 것뿐만 아니라 웹 페이지의 레이아웃을 구성할 때에도 유용하게 쓰인다.
다만 div 태그를 활용하는 것이 더 좋지만 테이블 태그는 유용하게 쓰이니 알아보도록 하자.
1. <Table>태그의 기본
- <table>: 표를 생성하는 가장 상위 태그
- <tr>: 행을 나타내는 태그
- <td>: 열을 나타내는 태그
- <th>: 표의 제목을 나타내는 태그
아래와 같은 표를 테이블 태그를 이용해 구현해 보도록 하자.
| 1행 1열 | 1행 2열 | 1행 3열 |
| 2행 1열 | 2행 2열 | 2행 3열 |
| 3행 1열 | 3행 2열 | 3행 3열 |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td>1행 1열</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 1열</td>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
</table>
</body>
</html>
|
cs |
표를 만들기 위해서는 <table></table>안에 정의를 해주면 된다.
행을 정의하기 위해 <tr>태그를 이용하고, 열을 정의하기 위해 <td> 태그를 이용한다.
여기서 table border="1"을 안해주게 되면 테이블의 테두리가 보이지 않는데
border=""를 이용해서 테이블의 테두리 두께를 표현해주도록 하자.
2. colspan / rowsapn 속성 (테이블 행, 열 병합)
colspan=""과 rowspan=""을 이용하여 행과 열을 합칠 수 있다.
다음과 같이 1행 1열과 2행 1열을 합치고 4행 1열과 4행 2열을 합치는 표를 만들어 보자.
rowspan="합칠 행의 개수"
colspan="합칠 열의 개수"
를 이용하면 된다.
| 2행 합침 | 1행 2열 | 1행 3열 |
| 2행 2열 | 2행 3열 | |
| 3행 1열 | 3행 2열 | 3행 3열 |
| 2열 합침 | 4행 3열 | |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="2"> 2행 합침</td>
<td>1행 2열</td>
<td>1행 3열</td>
</tr>
<tr>
<td>2행 2열</td>
<td>2행 3열</td>
</tr>
<tr>
<td>3행 1열</td>
<td>3행 2열</td>
<td>3행 3열</td>
</tr>
<tr>
<td colspan="2">2열 합침</td>
<td>4행 3열</td>
</tr>
</table>
</body>
</html>
|
cs |
3. <Table> 태그 속성 정리
<table> 태그의 대표적인 속성들을 정리해보았다.
| 속성 | 설명 |
| border | 표의 테두리를 설정 (숫자가 높을수록 두꺼워짐) |
| bordercolor | 표의 테두리의 색상 |
| width | 표 가로 크기 |
| height | 표 세로 크기 |
| align | 표 정렬방식 |
| bgcolor | 표의 배경색 |
| colspan | 표 열 합치기 (가로) |
| rowspan | 표 행 합치기 (세로) |
'Language > └HTML, CSS' 카테고리의 다른 글
| [HTML5/CSS] form태그의 전송 방식 GET과 POST의 차이점 | Yoon's Dev (1) | 2021.05.14 |
|---|---|
| [HTML/CSS] form, input 태그의 다양한 타입 요소 | Yoon's Dev (2) | 2021.04.17 |