Section 06 표만들기
HTML JAVASCRIPT CSS 교재를 활용했습니다
표를 만들기 위한 기본적 태그는 기본에 충실하지만 다양한 속성들을 갖고 있기 때문에 한 번에 설명하기는 매우 어렵습니다. 따라서 이번 절에서는 우선 표를 만들기 위해서 가장 기본이 되는 태그를 예를 통해서 배워보겠습니다
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>무제 문서</title> </head>
<body> <table> <tr> <th> 출력</th> <td> 출력</td> </tr> </table> </body> </html> |
다음과 같이 출력이 되는 것을 볼 수 있습니다.
태그 | 설명 |
<table></table> | 표의 시작과 끝을 정의해줍니다 |
<tr></tr> | 표 안에 행의 시작과 끝을 정의해 줍니다 |
<th></th> | 지정된 행을 셀로 분할하여 그 셀의 시작과 끝을 정의한다. 또한 th태그에 의해 출력되는 문자열은 그 열이나 행의 제목으로 자동지정되어 굵은 문자로 출력이 됩니다 |
<td></td> | 지정된 행을 셀로 분할해 그 셀의 시작과 끝을 정의합니다 |
표 만들기의 상세구조
표를 만들기 위한 <table>태그의 속성은 다양하게 준비되어 있습니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>무제 문서</title> </head>
<body> <table border="테두리" width="너비" height="높이" cellspacing="셀여백" cellpadding="셀여백" align="정렬" bordercolor="테두리 색" bordercolorlight="테두리색" bordercolordark="테두리색" bgcolor="배경색" background="배경이미지"> <tr> <th>....</th> <td bgcolor="배경색" width="너비" height="높이" align="좌,우정렬" valign="상하정렬" rowspan="행수" colspan="열수" bordercolor="테두리색" bordercolorlight="테두리색" bordercolordark="테두리색">...</td> </tr> </table> </body> </html> |
위의 코드를 분석해보면 다음과 같습니다
속성 | 설명 |
Border | 표의 테두리 굵기를 지정합니다. 0으로 지정하면 테두리 선은 나타나지 않습니다. |
Width | 표 전체, 혹은 각 셀의 너비를 지정합니다. |
Height | 표 전체, 혹은 각 셀의 높이를 지정합니다. |
Cellspacing | 셀과 셀 사이의 여백을 지정합니다 |
Cellpadding | 셀 안의 내용과 셀의 경계와의 여백을 지정합니다 |
align | 표 혹은 셀 내용의 정렬 위치를 정합니다. 기본은 왼쪽정렬입니다 |
Left:왼쪽정렬 | |
Right:오른쪽정렬 | |
Center:중앙에정렬 | |
Bordercolor | 표 혹은 셀의 테두리 색을 지정합니다 |
Bordercolorlight | 표 혹은 셀의 테두리에 색을 지정할 때 입체감을 넣는 효과가 있습니다 |
Bordercolordark | 표 혹은 셀의 테두리에 색을 지정할 때 입체감을 넣는 효과가 있습니다 |
Bgcolor | 표 혹은 셀의 배경색을 지정합니다 |
Background | 표 혹은 셀의 배경그림을 지정합니다 |
Valign | 셀 내용의 상하 정렬위치를 정합니다 |
'프로그래밍언어 > HTML' 카테고리의 다른 글
| HTML5의 기본 형태 (0) | 2012.07.20 |
|---|---|
| HTML 스터디 Section03 홈페이지 꾸미기 (0) | 2011.01.10 |
| [HTML5이야기] 시맨틱 엘리먼트!? (1) | 2011.01.06 |
| [HTML5이야기] Video & Audio 태그 집중 분석 (0) | 2011.01.04 |
| [HTML5이야기] HTML5 지원여부 감지 (4) | 2011.01.04 |
