table 태그

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>
Colored by Color Scripter

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