728x90
728x170
|
태그 |
기능 |
|
<table> |
표(테이블)를 작성함. <table> 요소로 둘러싼 부분이 표기 됨. |
|
<tr> |
표에 행을 추가함. <tr> 요소로 둘러싼 부분이 행이 됨. |
|
<th> |
표에 헤더(제목 행)가 되는 셀을 추가함. <th> 요소로 둘러싼 부분이 셀의 제목이 됨. |
|
<td> |
표에 셀을 추가함. <td> 요소로 둘러싼 부분이 셀의 내용이 됨. |
|
<caption> |
표의 타이틀(캡션)을 나타냄. |
* table 태그에서 설정할 수 있는 속성
1) height : 테이블의 높이를 픽셀(도트 단위)로 지정함.
2) width : 테이블의 폭을 픽셀 또는 웹 브라우저의 창에 대한 비율(%)로 지정함.
3) cellspacing : 셀 간격을 픽셀로 지정함.
4) cellpadding : 셀의 여백을 픽셀로 지정함.
5) border : 표의 테두리 폭을 픽셀로 지정함.
* td, th 태그에 설정할 수 있는 속성
1) rowspan : 셀을 세로로 통합함. 통합할 셀의 개수를 지정함.
2) colspan : 셀을 가로 방향으로 통합함. 통합할 셀의 개수를 지정함.
3) heigh : 셀의 높이를 픽셀로 지정함.
4) width : 셀의 폭을 픽셀 또는 테이블에 대한 비율(%)로 지정함.
* 예제 코드
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<!DOCTYPE html>
<html>
<head>
<title>Ss's Homepage</title>
</head>
<body>
<table border="1" cellpadding="2">
<tr>
<th>한글명</th><th>영어명</th><th>종류</th> <!-- 제목 행을 지정-->
</tr><tr>
<th>호랑이</th><th>Tiger</th><th>고양이과</th> <!-- 항목 행을 지정-->
</tr><tr>
<th>사자</th><th>Lion</th><th>고양이과</th> <!-- 항목 행을 지정-->
</tr><tr>
<th>늑대</th><th>Wolf</th><th>개과</th> <!-- 항목 행을 지정-->
</tr>
</table>
</body>
</html> |
cs |
내용 출처 : HTML5가 보이는 그림책 (ANK Co., Ltd 저, 성안당)
728x90
그리드형(광고전용)
'Programming > HTML5' 카테고리의 다른 글
| HTML5의 특징 (0) | 2017.05.19 |
|---|---|
| HTML5란? (0) | 2017.05.19 |
| HTTP 리스폰스 헤더 (0) | 2017.05.18 |
| XHTML (0) | 2017.05.17 |
| 메타 요소 (0) | 2017.05.17 |
| 요소의 지정 (0) | 2017.05.17 |
| 폼 (Form) (0) | 2017.05.17 |
| 기본 태그 (0) | 2017.05.17 |
