<style type="text/css">
/* 테이블 */
table.t_01 {
width:98%;
border-top:2px solid #0099CC;
border-bottom:1px solid #dfe0e0;
table-layout: fixed;
margin: 10px auto;
border-collapse:collapse;
}
table.t_01 tr th {
padding: 7px 0px 7px 0px;
border: none;
border-bottom: 3px solid #dfe0e0;
background: url('/img/bg.gif') repeat-x top;
color: #7a7a7a;
fontweight: bold;
text-align: center;
vertical-align: middle;
}
table.t_01 tr td {
padding: 6px 0px 6px 0px;
border: none;
border-bottom:1px solid #dfe0e0;
border-top: none;
color: #454545;
text-align: center;
vertical-align: middle;
}
/* 왼쪽선 */
table.t_01 tr th.left_b {
border-left: 1px solid #dfe0e0 !important;
}
/* 오른쪽선 */
table.t_01 tr th.right_b {
border-right: 1px solid #dfe0e !important;
}
/* 제목 왼쪽정렬 */
table.t_01 tr td.title {
text-align: left !important;
padding: 6px 0p 6px 15px !important;
}
/* 번호 */
table.t_01 tr td.no {
font-weight: bold !important;
color:7a7a7a !important;
}
/* 조회수 숫자 */
table.t_01 tr td.hits {
color: #ff0000 !important;
}
</style>
</head>
<body>
<table class="t_01">
<tr>
<th class="left_b">NO.</th>
<th width="60%">제목</th>
<th>작성일</th>
<th class="right_b">조회수</th>
</tr>
<tr>
<td class="no">11</td>
<td class="title">테이블만들기</td>
<td>2011-05-16</td>
<td class="red">4597</td>
</tr>
<tr>
<td class="no">45</td>
<td class="sub">테이블만들기</td>
<td>2013-01-13</td>
<td class="hits">4567</td>
</tr>
</table>
</body>
</html>
적용 예제 -----------------------------------------------------------------------------------------------------
NO. | 제목 | 작성일 | 조회수 |
---|---|---|---|
11 | 테이블만들기 | 2011-05-16 | 4597 |
45 | 테이블만들기 | 2013-01-13 | 4567 |
'html 드림위버' 카테고리의 다른 글
이미지맵에 링크표시 없애기/ 선없애기 (0) | 2012.11.05 |
---|---|
배경 css (0) | 2012.11.02 |
폰트에 css주는법 html/css (0) | 2012.11.01 |
css 테이블 - 2 (0) | 2012.10.24 |
기본 css/style.css----웹표준 css (0) | 2012.10.24 |