웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)
table 본문
table.html<html lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>HTML Table</title>
<style type="text/css">
/*
table tbody {
background-color: #c00;
}
col#second {
background-color: yellow;
}
*/
</style>
</head>
<body>
<h1><abbr title="Hyper Text Markup Language">HTML</abbr> Table</h1>
<!--
3x7 칸(cell)을 가지는 테이블 제작
권장되지 않는 테이블 사용방법
- 테이블 안에 테이블을 넣는 행위
- 보여지는 디자인을 위해서 테이블을 이용하는 행위
- 하나의 정보를 제공해야하는 테이블을 분리하는 행위
테이블 작성시, 필수 요소
table, tr, th, td, caption(접근성 향상, 관련된 내용의 축약 제목)
테이블 작성시, 필수 속성
summary(접근성 향상, 가급적이면 듣고서도 어떤 테이블인지 알 수 있도록 상세히!)
테이블 작성시, 선택 의미 속성 - ▲⃝ HTML5에서는 사용되지 않는 속성
scope(제목의 흐름 영역), abbr(축약)
테이블 작성시, 선택 요소
thead, tfoot, tbody
col, colgroup
table 표현속성 의미 권장여부
border - 테두리 (0)
cellpadding - 칸 안쪽 공간 (X)
cellspacing - 칸과 칸 사이의 간격 (X)
width - 폭 (X)
th 표현속성
align - 정렬 [left | center | right] (X)
vaign - 세로 (X)
-->
<h2>table 관련된 제목임을 이미 제공하는 제목이라면....</h2>
<table border="1" summary="00 고등학교 3학년 하반기 기말고사 시험결과 표입니다.">
<!-- <caption>기말고사 시험 결과표</caption> -->
<!--
col 요소는 column의 의미로 '열 묶음'
colgroup 요소는 '여러개의 col 요소를 묶음'
<colgroup>
<col>
<col>
</colgroup>
<colgroup>
<col>
<col>
<col>
<col>
</colgroup>
-->
<col id="first">
<col id="second">
<col id="third">
<thead>
<tr>
<th>테이블 셀 제목-1</th> <th>테이블 셀 제목-2</th> <th>테이블 셀 제목-3</th>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="3">tfoot 테이블 셀 내용-1</td> <!-- <td>tfoot 테이블 셀 내용-2</td> <td>tfoot 테이블 셀 내용-3</td> -->
</tr>
</tfoot>
<!-- <tbody> -->
<tr>
<td rowspan="4">테이블 셀 내용-1</td> <td>테이블 셀 내용-2</td> <td>테이블 셀 내용-3</td>
</tr>
<tr>
<!-- <td>테이블 셀 내용-1</td> --> <td>테이블 셀 내용-2</td> <td>테이블 셀 내용-3</td>
</tr>
<tr>
<!-- <td>테이블 셀 내용-1</td> --> <td>테이블 셀 내용-2</td> <td>테이블 셀 내용-3</td>
</tr>
<tr>
<!-- <td>테이블 셀 내용-1</td> --> <td>테이블 셀 내용-2</td> <td>테이블 셀 내용-3</td>
</tr>
<!-- </tbody> -->
</table>
</body>
</html>