Membuat Tabel dengan HTML dan CSS

Home

Membuat Tabel dengan HTML dan CSS

Posted by : Unknown Sunday, September 29, 2013

Pada postingan kali ini saya akan membahas bagaimana cara membuat tabel dengan HTML dan mempercantik tampilannya dengan CSS.

Berikut adalah script HTML untuk membuat tabel:


Contoh Tabel




 Header1
        Header2


        Kolom1 Baris1
        Kolom2 Baris1


        Kolom1 Baris2
        Kolom2 Baris2


        Kolom1 Baris3
        Kolom2 Baris3

Script di atas akan tampil di browser seperti berikut

Hasilnya terlihat sangat hampa dan monoton 'kan? Oleh karena itu mari kita warnai tabel yang hampa tersebut dengan file CSS yang berisi script berikut:

table, th, td {
table, th, td {
 border: 1px solid #DAA520;
 border-collapse: collapse;
 font-family: "Trebuchet MS", Arial, sans-serif;
 color: #555;
}

caption {
 font-size: 150%;
 font-weight: bold;
 margin: 5px;
}

td, th {
 padding: 4px;
}

th {
 text-align: center;
 background: #FFD700;
 color: #4F76A3;
 font-size: 100% !important;
}

tbody th {
 font-weight: bold;
}

tr { background: #FAFAD2; }

Maka tabel kita akan menjadi seperti berikut: