CSS 테이블 효과

.tbl {width: 400px; margin: 0 auto;}

.tbl h1 {padding: 20px; text-align: center;}

.tbl table {width:100%}

.tbl table th,.tbl table td{padding: 4px; border: 1px solid rgba(223,223,223,1); color: rgba(55,55,55,1); text-align: center;}

/* 그리드 헤드   */

.tbl table thead th {padding: 6px; background-color: rgba(167,167,167,1); color: rgba(255,255,255,1);}

/* 그리드 푸터 합계시 사용   */

.tbl table tfoot th,.tbl table tfoot td {padding:6px; background-color: rgba(101,190,255,.39);}

이렇게 진행이 될때

<div class="tbl">

<table>

<tr>

<td></td>

<td></td>

</tr>

</table>

</div>

효과가 나타난다/////