반응형
html의 table 태그는 표를 만드는 태그이다.
table을 태그로 이루어져 있으며 <table><th><tr><td>로 구성된다.
| 태그 | 기능 |
| <table> | 테이블의 기본 태그 |
| <th> | 테이블의 head 부분 |
| <tr> | 테이블의 행 |
| <td> | 테이블의 열 |
한번 해보는게 이해가 훨씬 빠를 것이다.
|
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>
<meta charset='utf-8'>
<title>Page Title</title>
</head>
<body>
<table border="1">
<tr>
<th>th1</th>
<th>th2</th>
<th>th3</th>
</tr>
<tr>
<td>td1</td>
<td>td2</td>
<td>td3</td>
</tr>
<tr>
<td>td4</td>
<td>td5</td>
<td>td6</td>
</tr>
</table>
</body>
</html>
|
가장 기본적인 형태의 테이블이며 <th> 태그는 진하게 + 가운데 정렬 속성이 자동으로 들어가 있는 것을 볼 수 있다.
그렇다면 표와 관련된 속성들을 알아보자
| 속성 명 | 기능 |
| border | 테이블 선의 너비 |
| bordercolor | 테이블의 테두리 색상 |
| width | 테이블 전체 너비 |
| height | 테이블 전체 높이 |
| bgcolor | 테이블 셀 배경 색 |
| align(테이블의 위치를 정렬하는 것) | center : 가운데 정렬 right : 오른쪽 정렬 lleft : 왼쪽 정렬 |
| colspan | 열 병합 |
| rowspan | 행 병합 |
위의 속성을 가지고 테이블을 만들어 보도록 하겠다.
소스코드
|
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
35
36
37
38
39
40
|
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Page Title</title>
<style>
table{
text-align: center;
}
</style>
</head>
<body>
<table border="2" width="300" height ="300" bordercolor="blue">
<tr bgcolor = "red">
<th bgcolor = "orange">th01</th>
<th>th02</th>
<th>th03</th>
<th>th04</th>
</tr>
<tr>
<td bgcolor="red">td01</td>
<td bgcolor = "orange">td02</td>
<td>td03</td>
<td rowspan="2">td04<br>+<br>td08</td>
</tr>
<tr>
<td bgcolor="red">td05</td>
<td>td06</td>
<td bgcolor = "orange">td07</td>
</tr>
<tr>
<td bgcolor="red">td09</td>
<td colspan = 2>td10+td11</td>
<td bgcolor = "orange">td12</td>
</tr>
</table>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter
|
실행결과
테이블 내부의 텍스트 정렬에 관한 속성이 따로 없는 것 같아 css의 text-align:center; 코드를 삽입하여
가운데 정렬하였다.
자세한 설명은 생략.
반응형
'프론트엔드 > HTML' 카테고리의 다른 글
| HTML 이미지 삽입 - <img> 태그 (0) | 2019.06.25 |
|---|---|
| <p>, <br>, <h1> 태그 (0) | 2019.06.25 |
| <a> 태그 (0) | 2019.06.19 |