table summary =""
caption /caption : 테이블 명
colgroup
col width=100
col width=100
col width=100
/colgroup
thead : 표 첫번째 머릿줄
tr : 줄(행)
th /th (열)
th /th
th /th
/tr
/thead
tfoot : 코딩할 때는 tfoot 부터 합계:th ,내용: td
tr : 1줄
th /th
th /th
th /th
/tr
/tfoot
tbody
tr
th /th :1월 취업
td /td
td /td
/tr
tr
th /th : 2월 취업
td /td
td /td
/tr
/tbody
>>scope 작업 : css 적용
>>id heades 작업 : 스크린 리더 적용
<style>
table,
th,
td {
border: 1px solid #999
}
</style>
</head>
<body>
<h3>table</h3>
<table summary="웹디자인 과정과 웹 퍼블리셔 과정 월별 취업 현황">
<caption>월별취업현황</caption>
<colgroup>
<col width="150"/>
<col width="150"/>
<col width="150"/>
</colgroup>
<thead>
<tr>
<th>구분</th>
<th>웹디자인</th>
<th>웹퍼블리셔</th>
</tr>
</thead>
<tfoot>
<tr>
<th>합계</th>
<td>20명</td>
<td>30명</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>1월 취업</th> <!--th는 기본값이 가운데 정렬-->
<td>10명</td><!--td는 기본값이 왼쪽정렬-->
<td>10명</td>
</tr>
<tr>
<th>2월 취업</th>
<td>10명</td>
<td>20명</td>
</tr>
</tbody>
</table>
스크린 리더가 읽을 수 있도록 하기
th에 id 넣기
td에는 headers 넣기
scop 하기
@반응형일때
- 표 작업 시, 표 모양을 그대로 유지할 경우
> table 코딩
- 표 모양이 바뀌게 할 경우에는
>ul li로 구현하는것이 효율적임
==========================================================================
<h3>셀병합 (기본)</h3>
<table width="300">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table><h3>셀병합(완료)</h3>
<table width="300">
<tr>
<td colspan="2">1,2</td> <!---->
<td rowspan="2">3,6</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
셀병합(실패)
<h3>셀병합(셀 병합 실패)</h3>
<table width="300">
<tr>
<td colspan="2">1</td> <!-두개 합치면 삭제해야 함: 3번 삭제--->
<td>2</td>
<td>3</td> <!--1과 3이 합쳐지니 3은 수동으로 삭제 해야함-->
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
All
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>-</title>
<meta name="robots" content="noindex, nofollow" />
<meta name="keywords" content="-" />
<meta name="description" content="-" />
<meta name="author" content="-" />
<!-- 주석: crtl + / -->
<!-- 복사 붙여넣기 : ctrl + D -->
<!-- 원하는 영역만 주석: ctrl + shifte + / -->
<style>
table,
th,
td {
border: 1px solid #999
}
</style>
</head>
<body>
<h3>table</h3>
<table summary="웹디자인 과정과 웹 퍼블리셔 과정 월별 취업 현황">
<caption>월별취업현황</caption>
<colgroup>
<col width="150" />
<col width="150" />
<col width="150" />
</colgroup>
<thead>
<tr>
<th>구분</th>
<th id="web1" scope="col">웹디자인</th>
<th id="web2" scope="col">웹퍼블리셔</th>
</tr>
</thead>
<tfoot>
<tr>
<th id="total" scope="row">합계</th>
<td headers="web1 total">20명</td>
<td headers="web2 total">30명</td>
</tr>
</tfoot>
<tbody>
<tr>
<th id="job1" scope="row">월 취업</th>
<!--th는 기본값이 가운데 정렬-->
<td headers="web1 job1">10명</td>
<!--td는 기본값이 왼쪽정렬-->
<td headers="web2 job1">10명</td>
</tr>
<tr>
<th id="job2" scope="row">2월 취업</th>
<td headers="web1 job2">10명</td>
<td headers="web2 job2">20명</td>
</tr>
</tbody>
</table>
<h3>셀 (기본)</h3>
<table width="300">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
<br />
<h3>셀병합(완료)</h3>
<table width="300">
<tr>
<td colspan="2">1,2</td>
<!---->
<td rowspan="2">3,6</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
</tr>
</table>
<br />
<h3>셀병합(병합 실패)</h3>
<table width="300">
<tr>
<td colspan="2">1</td>
<!-두개 합치면 삭제해야 함: 3번 삭제--->
<td>2</td>
<td>3</td>
<!--1과 3이 합쳐지니 3은 수동으로 삭제 해야함-->
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</table>
</body>
</html>
