'table'에 해당되는 글 1건

  1. 2008.07.04 쉽게 변환할 수 있는 테이블 만들기
사용자 삽입 이미지
<style type=text/css>
body {
 margin:0;
 padding:30px;
 font-family:굴림,Gulim,AppleGothic,sans-serif;
 font-size:small;
 background:#b5b5b5;
}

a {color:#77985c;}

.forums{background:#919191;}

table{
 position:relative;
 top:-4px;
 left:-4px;
 width:100%;
 border:1px solid #000;
 background:#fff;
 border-collapse:collapse; /*cellspacing="0"*/
}
table caption{
 margin:0;
 padding:8px 20px;
 text-align:left;
 border:1px solid #000;
 border-bottom:none;
 background:#fff;
 
}
table th, table td{
 margin:0;
 padding:8px 20px;
 text-align:center;
 border-bottom:1px solid #b5b5b5;
}

table th{color:#999;}
table .name{text-align:left;}
table tr{background:#e6e6e6;}
table tr.alt{ background:#f1f1f1;}
table td a{display:block; font-weight:bold;}
</style>
 
<div class="forums">
<table>
 <caption>테이블 제목</caption>
 <tr>
        <th scope="col" class="name">tab1</th>
        <th scope="col">tab2</th>
        <th scope="col">tab3</th>
 </tr>
 <tr class="alt">
        <td class="name"><a href="#">제목1</a> 주저리 주저리</td>
        <td>123</td>
        <td>2006.12.12</td>
 </tr>
 <tr>
        <td class="name"><a href="#">제목1</a> 주저리 주저리</td>
        <td>123</td>
        <td>2006.12.12</td>
 </tr>
 </table>
</div>
 

 

Posted by 행복한 프로그래머 궁금쟁이박
TAG ,

댓글을 달아 주세요