Gambar di atas ialah referensi tampilan tabel tanpa CSS. Tampilan menyerupai ini sangat umum dijumpai dalam template yang tidak mempunyai CSS tabel. Di sinilah tujuan utama kita menerapkan CSS tabel. Hal ini tentunya akan sangat penting bagi para penulis artikel yang posting-postingnya didominasi oleh tabel. Setidaknya, dengan menambahkan instruksi CSS ini kau dapat menciptakan para pembaca menjadi lebih betah untuk memperhatikan apa yang kau deskripsikan dalam tabel.
Cukup pilih salah satu tampilan tabel yang kau inginkan lalu salin instruksi CSSnya untuk diletakkan di atas instruksi ]]</b:skin> atau </style>:
Nuansa Biru Muda
table[border="1"] { border-collapse:collapse; font:normal normal 11px Verdana,Arial,Sans-Serif; color:#666; } 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; }Nuansa Blogger
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; }Sederhana
table[border="1"] { border-collapse:collapse; font:normal normal 11px Verdana,Arial,Sans-Serif; color:#333; } table[border="1"] tr { background-color:#fff; } table[border="1"] th, table[border="1"] td { vertical-align:top; padding:5px 10px; border:1px solid #333; } table[border="1"] th { background-color:#ccc; color:black; font-weight:bold; }Nuansa 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; }Nuansa 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-linear-gradient(#666,#555); background-image:-moz-linear-gradient(#666,#555); background-image:-ms-linear-gradient(#666,#555); background-image:-o-linear-gradient(#666,#555); background-image:linear-gradient(#666,#555); color:black; font-size:12px; text-shadow:0 1px 0 rgba(255,255,255,.4); font-weight:bold; }Untuk sementara gres lima buah desain yang Saya tuliskan di sini. Suatu dikala mungkin akan Saya tambahkan lagi jikalau Saya mendapat inspirasi.
Sumber https://www.dte.web.id/