유형1 (temp_tb_type1)

다운로드

CSS Code

.temp_tb_type1{width:100%; border-top:2px solid #616161;}

.temp_tb_type1 th{padding:7px 0; border-right:1px solid #E4E4E4; border-bottom:1px solid #E4E4E4;}

.temp_tb_type1 th.leftline, td.leftline{border-left:1px solid #E4E4E4;}

.temp_tb_type1 td{padding:7px 7px 7px 20px; border-right:1px solid #E4E4E4; border-bottom:1px solid #E4E4E4;}

.temp_tb_type1 td.result_txt{font-weight:bold; text-align:center;}

/* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */

.temp_tb_type1 th.bgcr, td.bgcr{background:#ddd;}

<table class="temp_tb_type1" summary="일자별 항목이용내역과 합계를 나타내는 표이다.">

<caption>일자별 항목 이용내역</caption>

<colgroup>

<col width="50%"/>

</colgroup>

<thead>

<tr>

<th scope="col" class="leftline bgcr">일자</th>

<th scope="col" class="bgcr">항목</th>

</tr>

</thead>

<tfoot>

<tr>

<td class="result_txt leftline bgcr">2014년 1월 이용내역 합계</td>

<td class="align_center bgcr">140</td>

</tr>

</tfoot>

<tbody>

<tr>

<td class="leftline align_center">2014.01.01</td>

<td>20</td>

</tr>

<tr>

<td class="leftline align_center">2014.01.02</td>

<td>50</td>

</tr>

<tr>

<td class="leftline align_center">2014.01.03</td>

<td>20</td>

</tr>

<tr>

<td class="leftline align_center">2014.01.04</td>

<td>50</td>

</tr>

</tbody>

</table>