Thursday, December 18, 2014

Tutorial CSS Part 8: Mengatur Style Tabel, Baris dan Kolom

Dengan CSS kita juga dapat mengatur style sebuah tabel agar tampak lebih cantik dan menarik. Tersedia beberapa properti untuk mengatur style tabel diantaranya untuk mengatur border, warna background, warna teks, margin dan padding serta tak lupa properti untuk mengatur lebar kolom dan tinggi baris.

Selain properti dasar diatas, kita juga bisa menetapkan style tabel pada kondisi tertentu misalnya kondisi hover, yaitu saat ada mouse berada diatas baris. Kita juga bisa menetapkan font tertentu dengan mamanfaatkan selector table.

Dalam mengatur style sebuah tabel, kita juga bisa mengatur style untuk bagian-bagian tabel seperti tr, th dan td. Ada beberapa properti yang hanya bekerja pada tabel dan baris (tr) seperti height dan ada juga properti yang hanya bekerja pada tabel dan kolom (th atau td) seperti width.

Berikut ini beberapa properti dasar untuk mengatur style tabel :

1. border

Adalah properti CSS yang digunakan untuk menetapkan border sebuah tabel. Dalam mengatur border kita menetapkan beberapa nilai berikut :
  • ketebalan garis border, dengan satuan px misalnya 1px.
  • style garis border, misalnya solid (garis penuh), dotted (titik-titik) atau dashed (strip-strip)
  • warna garis border, misalnya red, blue atau #ff0000.

Contoh penggunaan CSS border pada tabel :

table, th, td {
   border: 1px solid #ffff00;
}
Kita bisa berlatih CSS border disini >>

2. border-collapse

Adalah properti CSS yang digunakan untuk menetapkan sebuah border antar cell dilebur jadi satu border atau dipisah jadi dua border.

Contoh penggunaan CSS border-collapse pada tabel :

table {
   border-collapse: collapse;
}
Kita bisa berlatih CSS border-collapse disini >>

3. width

Ada properti CSS yang digunakan untuk menetapkan lebar tabel atau lebar kolom pada tabel. Jadi properti width hanya bekerja pada selector table dan th atau td saja. Nilai width bisa berupa px (pixel) atau % (persen)

Contoh penggunaan CSS width pada tabel dengan px:

table {
   width: 500px;
}

Contoh penggunaan CSS width pada tabel dengan px:

table {
   width: 100%;
}

Contoh penggunaan CSS width pada th atau td:

th,td {
   width: 100px;
}
Kita bisa berlatih CSS width disini >>

4. height

Ada properti CSS yang digunakan untuk menetapkan tinggi tabel atau tinggi baris pada tabel. Jadi properti height hanya bekerja pada selector table dan tr saja. Nilai height untuk tabel bisa dinyatakan dalam px (pixel).= atau % (persen) sedangkan nilai height untuk tr biasanya dinyatakan dalam px (pixel).

Contoh penggunaan CSS height pada tabel:

table {
   height: 500px;
}

Contoh penggunaan CSS height pada tr:

tr {
   height: 25px;
}
Kita bisa berlatih CSS height disini >>

5. text-align

Ada properti CSS yang digunakan untuk mengatur alignment text pada tabel. Nilai properti ini bisa diset left, right, center.

Contoh penggunaan CSS text-align pada th:

th {
   text-align: center ;
}
Kita bisa berlatih CSS text-align disini >>

6. vertical-align

Ada properti CSS yang digunakan untuk mengatur posisi vertikal alignment text pada tabel. Nilai peopert ini bisa diset top atau bottom. Jika tidak diset maka otomatis vertikal alignment pada posisi tengah. Untuk menempatkan text pada posisi tertentu bisa digunakan properti padding.

Contoh penggunaan CSS vertical-align pada th:

td {
   vertical-align: bottom ;
}
Kita bisa berlatih CSS vertical-align disini >>

7. margin

Ada properti CSS yang digunakan untuk mengatur jarak tabel terhadap elemen lain disamping kiri, kanan atau sebelah atas atau bawah. Urutan nilai margin adalah atas, kanan, bawah dan kiri.

Jadi jika diset 10px 2px 5px 3px artinya :
  • margin atas = 10px
  • margin kanan = 2px
  • margin bawah = 5px
  • margin kiri = 3px

Contoh penggunaan CSS margin pada tabel:

table {
   margin : 10px 2px 5px 3px;
}
Kita bisa berlatih CSS margin disini >>

8. padding

Ada properti CSS yang digunakan untuk mengatur jarak antara border tabel dengan isi tabel. Urutan nilai dari padding sama dengan margin, yaitu atas, kanan, bawah dan kiri. Sebaiknya kita menggunakan padding hanya pada th atau td saja.

Contoh penggunaan CSS padding pada td:

td {
   padding : 10px 2px 5px 3px;
}
Kita bisa berlatih CSS padding disini >>

9. color

Ada properti CSS yang digunakan untuk mengatur warna text pada isi tabel. Nilai color bisa berupa nama color, nilai hexa atau nilai RGB seperti telah dijelaskan pada tulisan sebelumnya tentang CSS format text.

Contoh penggunaan CSS color pada th:

table {
   color : #ff9834;
}
Kita bisa berlatih CSS color disini >>

10. background-color

Ada properti CSS yang digunakan untuk mengatur warna background cell pada tabel. Nilai color juga bisa berupa nama color, nilai hexa atau nilai RGB seperti telah dijelaskan pada tulisan sebelumnya tentang CSS format text.

Contoh penggunaan CSS background-color pada tabel:

table {
   background-color : #23df94;
}
Kita bisa berlatih CSS background-color disini >>

Lihat indeks artikel Tutorial CSS Dasar >>

Referensi :

1 komentar: