스킨 제작 프로젝트 - Step2. 퍼블리싱
글수 16
css를 이용한 Table 예제 입니다. 좀 더 유연하게 구성할 수 있겠지만, 참고만 하시기 바랍니다.
Style Sheet, Table Example
<style type="text/css">
<!--
#container {
width: 100%;
font-size: 12px;
line-height: 20px;
}
#container table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
line-height: 20px;
}
#container th {
padding: 10px;
border: #d3d3d3 solid 1px;
text-align: center;
background: #F4F4FF;
}
#container td {
padding: 10px;
border: #d3d3d3 solid 1px;
text-align: left;
}
#container tfoot td {
padding: 10px;
border: #d3d3d3 solid 1px;
text-align: center;
}
-->
</style>
Style Sheet, Table Example
<div id="container"> <table> <caption>Table 설명, Title을 표기합니다.</caption> <colgroup> <col style="width:25%;" /> <col style="width:40%;" /> <col style="width:40%;" /> </colgroup> <thead> <tr> <th>Header - Title</th> <td>Header - Content 1</td> <td>Header - Content 2</td> </tr> </thead> <tbody> <tr> <th>Body1 - Title</th> <td>Body1 - Content 1</td> <td>Body1 - Content 2</td> </tr> <tr> <th>Body2 - Title</th> <td>Body2 - Content 1</td> <td>Body2 - Content 2</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">Footer (꼬릿말, 부가설명)</td> </tr> </tfoot> </table> </div>





정말 좋은정보 감사드립니다^^
.gif)
테이블 작업이 많은 저로서는 덕분에 소스 사용량을 확 줄일 수 있게 되었습니다.
감사드려요^^;; 이런 정보 많이많이 공유해 주셨으면 감사하겠습니다.
좋은 정보 감사감사^^