Penerapan CSS pada elemen tabel

1.      Konsep dasar model box

Pada dasarnya elemen dari HTML adalah model box. Istilah model box ini digunakan pada saat membahas desain dan layout. Model box memungkinkan untuk membuat border disekeliling elemen dan space elemen yang saling berhubungan.

2)  Pengaturan border tabel

CSS dapat digunakan untuk memformat border atau garis tepi dari sebuah tabel. Format yang dapat dilakukan meliputi  jenis garis (dotted, solid, dan lainlain), warna border, ketebalan garis tepi dan sebagainya. Demikian pula warna dari sebuah sel, dapat diatur dengan CSS.

3)  Pengaturan lebar dan tinggi tabel

Lebar dan tinggi dari sebuah tabel didefinisikan dalam property width dan height Contoh berikut ini mengatur lebar tabel 100% dan tinggi dari elemen th adalah  50px. 

    Table

         {width:100%; }

     th

         { height:50px; }

4)  Pengaturan text-align pada tabel

Teks dalam tabel diatur  dengan properti.text-align dan vertical-align . Nilai dari properti text-align untuk horizontal alignment adalah left, right, atau center. 

   Td

          { text-align:right; }

5)  Pengaturan padding tabel

Padding adalah jarak antara isi atau content, berupa teks ataupun gambar dengan batas dalam dari sel tersebut. Style padding ini dapat diterapkan pada elemen HTML <td> (kolom).  Ukuran yang digunakan dapat berupa cm, atau px (piksel). Property style untuk pengaturan padding yang mengelilingi content adalah td{ padding:15px; } 

6)  Pengaturan warna pada table

Pewarnaan pada tabel dapat digunakan untuk mengatur warna pada teks,background maupun border.

      table, td, th

                 { border:1px solid green; }