Membuat Tabel Grid Cantik Dengan CSS
Tabel Grid, kali ini saya akan mencoba membagikan resep cara membuat tabel selang seling warna, menggunakan CSS, ok sebelumnya kita buat dahulu script CSS nya
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | #tabelwarna { width: 250px;} th { font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; color: #4f6b72; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-top: 1px solid #C1DAD7; letter-spacing: 2px; text-transform: uppercase; text-align: left; padding: 6px 6px 6px 6px; background: #CAE8EA url(images/bg_header.jpg) no-repeat; } td { font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; border-right: 1px solid #C1DAD7; border-bottom: 1px solid #C1DAD7; border-left: 1px solid #C1DAD7; padding: 6px 6px 6px 6px; } tr.alt { background: #F5FAFA; color: #797268; } tr.alts { background:#FFF; color: #797268; } * <a title="See also Membuat Combobox dengan Ajax" href="http://www.blog.tri-hartanto.com/php/membuat-combobox-dengan-ajax">html</a> .threepxfix{ margin-left: 3px; } |
Setelah itu mari kita buat halaman HTML dengan
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Grid Table | Blog.tri-hartanto.com</title> <link rel="stylesheet" href="grid-table.css"/> </head> <body> <table id="tabelwarna" cellspacing="0" width="150px"> <tr> <th scope="col">No</th> <th scope="col">Nama</th> </tr> <tr class="alts"><td>1</td><td>Andi</td></tr> <tr class="alt"><td>2</td><td>Marina</td></tr> <tr class="alts"><td>3</td><td>Firaz</td></tr> </table> </body> </html> |
makasih atas infonya
BalasHapus