유형3 (temp_tb_type3)

  • CSS Code

    .temp_tb_type3{width:100%; border-top:2px solid #616161;}
    .temp_tb_type3 td.leftline{border-left:1px solid #E4E4E4;}
    .temp_tb_type3 td{padding:7px 7px 7px 20px; border-right:1px solid #E4E4E4; border-bottom:1px solid #E4E4E4; text-align:center;}
    .temp_tb_type3 td.result_txt{font-weight:bold; text-align:center;}
    /* Layout Color - 실제 서비스 적용 후 아래 코드는 삭제 하세요 */
    .temp_tb_type3 th.bgcr, td.bgcr{background:#ddd;}
  • HTML Code

    <table class="temp_tb_type3" summary="일자별 이용내역과 합계를 나타내는 표이다.">
    <caption>일자별 이용내역</caption>
    <colgroup>
    <col width="50%"/>
    <col width="50%"/>
    </colgroup>
    <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>