TABEL 구조
테이블은 웹에서 유용하게 많이 쓰인다.
앞으로 구조화된 테이블로 유용하게 사용하자.
1. <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>
<title>테이블</title>
<style type=”text/css”>
table {border-collapse:collapse; font-size:12px; font-family:dotum; width:315px;}
th,td {border:1px solid #D3DEE0; padding:5px 9px 2px;}
th {background:#e6f0f9; color:#2f4171;}
</style>
</head>
<body><table summary=”테이블 내용 요약” cellpadding=”0″ cellspacing=”0″>
<caption>테이블 제목</caption>
<colgroup><col width=”105px” /><col width=”105px” /><col width=”105px” /></colgroup>
<thead>
<tr>
<th>제목</th>
<th>제목</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용 내용 내용</td>
<td>내용 내용 내용</td>
<td>내용 내용 내용</td>
</tr>
<tr>
<td>내용 내용 내용</td>
<td>내용 내용 내용</td>
<td>내용 내용 내용</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<title>테이블</title>
<style type=”text/css”>
table {border-collapse:collapse; font-size:12px; font-family:dotum; width:315px;}
th,td {border:1px solid #D3DEE0; padding:5px 9px 2px;}
th {background:#e6f0f9; color:#2f4171;}
</style>
</head>
<body><table summary=”테이블 내용 요약” cellpadding=”0″ cellspacing=”0″>
<caption>테이블 제목</caption>
<colgroup><col width=”105px” /><col width=”105px” /><col width=”105px” /></colgroup>
<thead>
<tr>
<th>제목</th>
<th>제목</th>
<th>제목</th>
</tr>
</thead>
<tbody>
<tr>
<td>내용 내용 내용</td>
<td>내용 내용 내용</td>
<td>내용 내용 내용</td>
</tr>
<tr>
<td>내용 내용 내용</td>
<td>내용 내용 내용</td>
<td>내용 내용 내용</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
</body>
</html>
2. <table> 결과 & 설명 이미지
3. <table> 관련 속성 정리
- <table>
?? – 표를 표현한 요소
– 표의 제목이나 셀 등의 구성 요소 배치
* 속성 : summary, width, border, cellspacing, cellpadding - <caption> 😕표의 제목이나 설명문 지정
- <colgroup>?:?열(cloumn) 전체를 그룹으로 지정
- <col> :??열(cloumn)?각각의 속성 지정
- <thead>,?<tbody>, <tfoot> :
??? – 표의 행<tr>을 그룹핑하는 요소로서 표의 헤더, 본문, 풋터를 지정합니다.
?? -?tfoot요소의 경우?해당하는 데이터가 없는 경우 생략할 수있습니다. - <tr> 😕표의 행을 정의
- <th> 😕표의 제목 셀(cell)
- <td> 😕표의?데이터 셀(cell)
4. <table> 작업시 Tip
* 공통으로 사용하는 페이지(ex.게시판 영역)에서는 element(ex.<th>,<td>) 안에 속성을?지정하는 방법보다는
class를 지정하여서 css로 제어하는 방법을 추천합니다.
페이지 작업 후 유지보수시 훨씬 용이합니다.
* <col> 사용시 width를 지정하였을때 제대로 사이즈 지정이되지 않을 때
table {table-layout:fixed;}를 사용해 준다.
출처 😕http://yhee.tistory.com/12