본문 바로가기

html 드림위버

css 테이블

<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