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.
Bagian - bagian model box
- Margin Daerah paling diluar yang membatasi dengan elemen HTML yang lainnya dan tidak berwarna
- Border Border mengelilingi padding dan content. Garis yang mempunyai warna dan ketebalan
- Padding Area yang mengelilingi content. Warna padding dipengaruhu oleh background dari box
- Content Isi dari box, bisa berupa teks maupun gambar
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.
Berikut adalah contoh penerapan style border pada tabel dengan style sebagai
berikut {border:1px solid black;} dan listing kode lengkapnya seperti dibawah ini
<html><head>
<style>
table,th,td
{ border:1px solid black; }
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>
Berikut ini contoh pengaturan property
border-collapse:collapse;
yang menghasilkan tampilan garis single pada tabel
<html>
<head>
<style>
table
{ border-collapse:collapse; }
table, td, th
{ border:1px solid black; }
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>
Pada saat memberikan style border {border:1px solid black;} Hal ini berarti seluruh border akan efek terkena 1px solid black; baik bagian
atas (top),bagian bawah(bottom), bagian kiri(left) ataupun kanan (right). Border
dapat dikenai style untuk area tertentu saja karena border dapat diseting untuk
border bawah atas kanan dan kiri seperti pada style berikut :
<style>
table,th,td
{ border-top: 2px solid red;
border-right: 2px solid green;
border-left: 2px solid blue;
border-bottom: 2px solid #DD4A04; }
</style>
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; }
Berikut ini penerapan style width dan height dalam sebuah tabel
<html>
<head>
<style>
table,td,th
{ border:1px solid black; }
table
{ width:100%; }
th
{ height:50px; }
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>
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; }
Nilai dari properti text-align untuk horizontal alignment adalah top, bottom, or
middle.
Td
{ height:50px;vertical-align:bottom; }
Berikut ini penerapan style text-align dalam sebuah tabel, dimana teks diatur
dengan posisi rata kanan
<html>
<head>
<style>
table,td,th
{ border:1px solid black; }
td
{ <body> text-align:right;height:50px;
vertical-align:bottom;}
</style>
</head>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>
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 (kolom). Ukuran yang digunakan dapat berupa cm, atau px
(piksel). Property style untuk pengaturan padding yang mengelilingi content
adalah td{ padding:15px; }
Padding dapat pula diatur untuk bagian tertentu saja, misalnya adalah :
- padding-top jarak dari atas sel.
- padding-buttom jarak dari bawah sel.
- padding-left jarak dari kiri sel.
- padding-right jarak dari kanan sel.
Berikut ini adalah beberapa contoh penggunaan style padding pada tabel :
<html>
<head>
<style>
table,td,th
{ border:1px solid black; }
td
{ text-align:right;height:50px;vertical-align:bottom;
padding:15px; }
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayand</tr>
<tr>
<td>Adelin</td>
<td>Larasati ra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>
Jika menginginkan padding diarea tertentu saja, misalnya padding untuk area
kanan maka dapat diterap padding-right
<html>
<head>
<style>
table,td,th
{ border:1px solid black; }
td
{ text-align:right;height:50px;vertical-align:bottom;
padding-right: 70px; }
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr><tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>
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; }
Style diatas akan memberikan efek warna green pada border table,data (td)
dan header tabel (th). Style warna juga bisa diberikan hanya pada bagian
tertentu saja, misalnya bagian header tabel (th) seperti pada listing css dibawah
Th
{ background-color:green;
color:white; }
Header tabel akan berwarna green dan teksnya berwarna putih. Penerapan
style diatas pada sebuah tabel akan terlihat pada contoh berikut :
<html>
<head>
<style>
table, td, th
{ border:1px solid green; }
th
{ background-color:green;color:white;}
</style>
</head>
<body>
<table>
<tr>
<th>Nama Depan</th>
<th>Nama</th>
</tr>
<tr>
<td>Adelin</td>
<td>Larasati</td>
</tr>
<tr>
<td>Novero</td>
<td>Dayandra</td>
</tr>
<tr>
<td>Adika</td>
<td>Dayandra</td>
</tr>
</table>
</body>
</html>
Ketika pada td tidak diberi style seperti pada style berikut :
<style>
table,th
{ border:1px solid green; }
th
{ background-color:green;color:white; }
</style>