표를 작성할때 사용.
표의 기본은 셀(cell), 가로 셀을 행(row), 세로 셀을 열(column)이라고 함.
table : 표의 전체. 표를 감싸고 있음.
tr : 행(row)
th : 제목 셀
td : 내용 셀
표 그룹화
thead : 헤더행 그룹
tbody : 내용 행 부분 그룹
tfoot : 푸터 행 그룹
colgroup : 열 그룹. 구조적인 그룹화를 위해 사용
col : 열의 속성값과 스타일을 지정하기 위해 사용.
표에 들어가는 요소들
caption : 표의 제목
summary : 표의 요약문
표 디자인 속성
width : 가로길이
border : 표 전체를 감싸고 있는 테두리의 두께
frame : 표를 감싸고 있는 테두리를 어디에 표시할지 지정
void(없음), rhs(오른쪽), lhs(왼쪽), above(위쪽), below(아래쪽), hsides(상하), vsides(좌우), box(상하좌우), border(상하좌우)
rules : 셀의 구분선
none(없음/기본값), group(그룹화 된 행 또는 열), rows(행 사이), cols(열 사이), all(모든 셀에 표시)
cellspacing : 셀사이의 간격. "px", "%"로 표시
cellpadding : 셀 안의 간격. "px", "%"로 표시
샐 결합
rowspan : 행(가로) 결합
colspan : 열(세로) 결합
예시
| <table cellpadding="0" cellspacing="0" width="500" rules="all" border="1" summary="표내용을 간략하게 설명"> <caption>표의 제목</caption> <col width="100px" /> <col width="" /> <col width="100px" /> <col width="100px" /> <thead style="background:#e3e3e3;"> <tr> <th>상단1</th> <th>상단2</th> <th>상단3</th> <th>상단4</th> </tr> </thead> <tbody align="center" style="height:30px; background:#fff;"> <tr> <td>내용1</td> <td>내용2</td> <td>내용3</td> <td>내용4</td> </tr> <tr> <td colspan="2">내용5</td> <td>내용6</td> <td rowspan="2">내용7</td> </tr> <tr> <td>내용8</td> <td>내용9</td> <td>내용10</td> </tr> </tbody> </table> 결과
| |||||||||||||||
