HTML 테이블 CSS 스타일

HTML 테이블 스타일

HTML 테이블 CSS

1 예시 1: bluetop

<style>  
body { background: #fff; }
.bluetop {
  border-collapse: collapse;
  border-top: 3px solid #168;
}  
.bluetop th {
  color: #168;
  background: #f0f6f9;
}
.bluetop th, .bluetop td {
  padding: 10px;
  border: 1px solid #ddd;
}
.bluetop th:first-child, .bluetop td:first-child {
  border-left: 0;
}
.bluetop th:last-child, .bluetop td:last-child {
  border-right: 0;
}
</style>
<table class="bluetop">
  <tr><th>위키SW</th><th>제작자</th><th>첫 릴리즈</th></tr>
  <tr><td>유즈모드위키</td><td>Clifford Adams</td><td>2000년</td></tr>
  <tr><td>모인모인</td><td>Jürgen Hermann 등</td><td>2000년</td></tr>
  <tr><td>미디어위키</td><td>Magnus Manske</td><td>2002년</td></tr>
  <tr><td>도쿠위키</td><td>Andreas Gohr</td><td>2004년</td></tr>
</table>

2 예시 2: blueone

<style>  
body { background: #fff; }
.blueone {
  border-collapse: collapse;
}  
.blueone th {
  padding: 10px;
  color: #168;
  border-bottom: 3px solid #168;
  text-align: left;
}
.blueone td {
  color: #669;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}
.blueone tr:hover td {
  color: #004;
}
</style>
<table class="blueone">
  <tr><th>위키SW</th><th>제작자</th><th>첫 릴리즈</th></tr>
  <tr><td>유즈모드위키</td><td>Clifford Adams</td><td>2000년</td></tr>
  <tr><td>모인모인</td><td>Jürgen Hermann 등</td><td>2000년</td></tr>
  <tr><td>미디어위키</td><td>Magnus Manske</td><td>2002년</td></tr>
  <tr><td>도쿠위키</td><td>Andreas Gohr</td><td>2004년</td></tr>
</table>

3 같이 보기

• HTML 테이블
• CSS 반응형 테이블