Table dengan Sentuhan CSS

Berikut CSS untuk mempercantik tampilan table dari dte.web.id

Biru Muda

table[border="1"] tr {
  background:#fafafa;
}

table[border="1"] th,
table[border="1"] td {
  vertical-align:top;
  padding:5px 10px;
  border:1px solid #fff;
}

table[border="1"] tr:nth-child(even) {
  background:#f5f5f5;
}

table[border="1"] th {
  background:#418AA4;
  color:#fff;
  font-weight:bold;
}

Blogger Style

table[border="1"] {
  border-collapse:collapse;
  font:normal normal 11px Trebuchet,"Trebuchet MS",Arial,Sans-Serif;
  color:#3366CC;
}

table[border="1"] tr {
  background:#E1D4C1;
}

table[border="1"] th,
table[border="1"] td {
  vertical-align:top;
  padding:5px 15px;
  border:1px solid #fff;
}

table[border="1"] td:nth-child(odd) {
  background:#F5EDE3;
}

table[border="1"] th {
  background:#104386;
  color:#99CCFF;
  font-weight:bold;
}

Berbayang

table[border="1"] {
  border-collapse:collapse;
  font:normal normal 11px Verdana,Arial,Sans-Serif;
  color:#666;
  -webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);
  -moz-box-shadow:0 1px 3px rgba(0,0,0,.5);
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}

table[border="1"] tr {
  background-color:#fafafa;
}

table[border="1"] th,
table[border="1"] td {
  vertical-align:top;
  padding:5px 10px;
  border:1px solid white;
}

table[border="1"] tr:nth-child(even) {
  background-color:#f5f5f5;
}

table[border="1"] th {
  background-color:#ECE9D8;
  color:#ACA899;
  font-weight:bold;
}

Hitam

table[border="1"] {
  border-collapse:collapse;
  font:normal normal 11px Arial,Sans-Serif;
  color:#ccc;
  -webkit-box-shadow:0 1px 3px black;
  -moz-box-shadow:0 1px 3px black;
  box-shadow:0 1px 3px black;
}

table[border="1"] tr {
  background-color:#222;
}

table[border="1"] th,
table[border="1"] td {
  vertical-align:top;
  padding:5px 10px;
  border:1px solid #3c3c3c;
}

table[border="1"] td:nth-child(even) {
  background-color:#1c1c1c;
}

table[border="1"] th {
  background-color:#555;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#666',endColorstr='#555');
  background-image:-webkit-gradient(linear,left top,left bottom,from(#666),to(#555));
  background-image:-webkit-linear-gradient(top,#666,#555);
  background-image:-moz-linear-gradient(top,#666,#555);
  background-image:-ms-linear-gradient(top,#666,#555);
  background-image:-o-linear-gradient(top,#666,#555);
  background-image:linear-gradient(top,#666,#555);
  color:black;
  font-size:12px;
  text-shadow:0 1px 0 rgba(255,255,255,.4);
  font-weight:bold;
}

<table border="1">
    <caption>
        <h3>Terapan Tabel dengan CSS</h3>
    </caption>
    <tr>
        <th>Judul 1</th>
        <th>Judul 2</th>
        <th>Judul 3</th>
    </tr>
    <tr>
        <td>Divisi 01</td>
        <td>Divisi 02</td>
        <td>Divisi 03</td>
    </tr>
    <tr>
        <td>Divisi 01</td>
        <td>Divisi 02</td>
        <td>Divisi 03</td>
    </tr>
    <tr>
        <td>Divisi 01</td>
        <td>Divisi 02</td>
        <td>Divisi 03</td>
    </tr>
</table>

Contoh 1

Judul 1	Judul 2	Judul 3
Divisi 01	Divisi 02	Divisi 03
Divisi 01	Divisi 02	Divisi 03
Divisi 01	Divisi 02	Divisi 03

Contoh 2

File Name	File Type	Description	File Source
KG_MA V1.0	Indicator	Main	Download	Keterangan
KG_BBMA V1.0	Indicator	Main	Download	Keterangan
LockProfit V1.0	Scripts	-	Download	Keterangan
Partial Close V1.0	Expert Adv	-	Download	Keterangan
Bysu-Fx Info	Indicator	Main	Download	Keterangan
KG_MACD V1.0	Indicator	Oscilator	Download	Keterangan

Sumber : dte.web.id