Membuat Tabel Dengan HTML 5 dan CSS 3
Membuat Tabel Dengan HTML 5 dan CSS 3
Tabel merupakan salah satu elemen penting untuk menampilkan data, meskipun membuat tabel relatif mudah, terdapat hal-hal penting yang perlu untuk diketahui, untuk itu pada kesempatan kali ini kita akan membahas lengkap bagaimana cara membuat tabel dengan HTML dan CSS.
I. Tabel Pada HTML 5
Pada HTML 5 tidak ada elemen baru terkait tabel, namun banyak atribut penting pada elemen yang sudah tidak didukung, diantaranya: atribut width, height, valign, align, dan bgcolorSehingga jika ingin menggunakan atribut tersebut, HTML 5 menyarankan untuk menuliskannya menggunakan model style/CSS
Contoh berikut ini penulisan tabel yang tidak valid
<table>
<tr>
<th width="20">No</th>
<th width="150">Nama</th>
<th width="250">Alamat</th>
</tr>
</table>Sebaiknya diganti dengan:
<table>
<tr>
<th style="width:20px">No</th>
<th style="width:150px">Nama</th>
<th style="width:250px">Alamat</th>
</tr>
</table>
II. Elemen HTML Untuk Membuat Tabel
Ketika membuat tabel dengan HTML, kita dihadapkan dengan banyak elemen, namun pada intinya hanya dengan 3 elemen tertentu, kita sudah bisa membuat tabe:- Elemen
<table>yang digunakan untuk mendefinisikan tabel, - Elemen
<tr>(table row) yang digunakan untuk membuat baris/row, - dan Elemen
<td>(table data) yang digunakan untuk membuat kolom.
tabel.html kemudian copy paste kode berikut:<html>
<head>
<style type="text/css">
td {
border: 1px solid #CCCCCC;
padding: 5px 15px;
}
</style>
</head>
<body>
<table>
<tr>
<td>No</td>
<td>Pembeli</td>
<td>Barang</td>
<td>Harga</td>
</tr>
<tr>
<td>1</td>
<td>Anton</td>
<td>Televisi</td>
<td>2.500.000</td>
</tr>
</table>
</body>
</html>Jalankan file tersebut dibrowser maka akan muncul tabel yang terdiri dari dua baris dan empat kolom sebagai berikut:
Pada gambar diatas terlihat bahwa tiap elemen
<tr> akan membentuk sebuah baris/row, dimana elemen <td> yang ada di dalam elemen <tr> akan membagi baris tersebut menjadi kolom.
III. Elemen Tambahan Untuk Membuat Tabel Dengan HTML
Nah, mudah kan membuat tabel? ya cukup dengan kode diatas, kita sudah dapat membuat tabel, namun tabel tersebut masih minimalis, untuk tabel yang lebih lengkap terdapat elemen lain yang perlu kita tambahkan:<th>(table header) yang barada didalam tag<tr>digunakan untuk mendefinisikan kolom header, sekali lagi kolom, bukan row.<caption>digunakan untuk menampilkan judul dari tabel. Elemen ini harus berada di paling atas<colgroup>atau<col>posisinya berada paling atas, di bawah<caption>dan diatas<thead><thead>digunakan untuk mengelompokkan baris/row yang akan digunakan sebagai header. Posisinya selalu di paling atas setelah elemen<colgroup>atau<caption><tbody>digunakan untuk mengelompokkan baris/row yang akan digunakan sebagai body dari tabel. Posisi elemen ini harus di bawah<thead><tfoot>digunakan untuk mengelompokkan baris/row yang akan digunakan sebagai footer dari tabel. Posisi elemen ini harus dibawah <thead> tetapi tidak harus dibawah<tbody>
<table>
<caption></caption>
<colgroup>
<col/>
</colgroup>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>Nah, mari kita sesuaikan tabel sebelumnya menggunakan elemen diatas:
<html>
<head>
<style type="text/css">
th, td {
border: 1px solid #CCCCCC;
padding: 5px 15px;
}
</style>
</head>
<body>
<table>
<caption class="description">Tabel 1. Data Penjualan Divisi Elektronik</caption>
<thead>
<tr>
<th>No</th>
<th>Pembeli</th>
<th>Barang</th>
<th>Tanggal</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anton</td>
<td>Televisi</td>
<td>07 September 2016</td>
<td>2.500.000</td>
</tr>
<tr>
<td>2</td>
<td>Bryan</td>
<td>Mesin Cuci</td>
<td>10 Juli 2016</td>
<td>1.500.000</td>
</tr>
<tr>
<td>3</td>
<td>Cherly</td>
<td>Dispenser</td>
<td>11 Agustus 2016</td>
<td>950.000</td>
</tr>
<tr>
<td>4</td>
<td>Dean</td>
<td>Kulkas</td>
<td>15 September 2016</td>
<td>1.750.000</td>
</tr>
<tr>
<td>5</td>
<td>Esryl</td>
<td>Wall Fan</td>
<td>11 Oktober 2016</td>
<td>450.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">Total</th>
<th>7.150.000</th>
</tr>
</tfoot>
</table>
</body>
</html>Hasil yang kita peroleh adalah:
Layout tabel masih kurang bagus karena kita belum menambahkan style apa-apa pada tabel tersebut, kecuali hanya border dan padding saja. penambahan style lainnya akan kita bahas di bagian bawah.
Penjelasan kode:
- Kita buat
theadpada bagian atas, pada kasus tertentu bisa berada disebelah bawah, misal ketika menggunakan PHP untuk menghitung jumlah row untuk ditampilkan di header. - Kita menggunakan atribut colspan untuk menggabungkan beberapa kolom (yang biasanya pada microsoft excel kita menggunakan merge cells)
- Apakah kita perlu menggunakan
<thead>,<tbody>,<tfoot>? jawabnya tidak, TAPI, ketiga elemen ini akan memudahkan kita ketika mendesain tabel menggunakan CSS (akan dibahas nanti). - Caption secara default akan ditampilkan diatas tabel, jika kita ingin memindahkannya ke bawah maka gunakan style
caption-side: bottom - Elemen
<th>tidak harus berada di dalam<thead>, bisa berada dimana saja, seperti yang disampaikan sebelumnya bahwa<th>ini kolom, bukan row, sehingga bisa dimana saja.
IV. Menggunakan Atribut Colspan dan Rowspan
Lebih lanjut, pada HTML kita juga dapat menggabungkan cell/kolom pada tabel, sekali lagi kolom bukan baris.Penggabungan ini bisa dilakukan secara horizontal maupun vertikal, untuk horizontal kita menggunakan atribut
colspan, sedangkan untuk vertikal, kita menggunakan atribut rowspan.
1 Menggunakan atribut colspan untuk menggabungkan kolom pada tabel secara horizontal
Colspan ini dapat diterapkan baik pada elemen <th> maupun pada <td>. Nilai yang diisikan pada atribut colspan menunjukkan jumlah kolom yang akan digabungkan.Penggabungan ini dilakukan urut kekanan mulai kolom dimana atribut colspan didefinisikan. Misal
<td colspan="2"> akan menggabungkan dua kolom, yaitu kolom tersebut dengan satu kolom yang berada di sebelah kanannya.Pada contoh sebelumnya kita menggunakan colspan seperti ini:
<tfoot>
<tr>
<th colspan="4">Total</th>
<th>7.150.000</th>
</tr>
</tfoot>Penjelasan:
2 Menggunakan atribut rowspan untuk menggabungkan kolom pada tabel secara vertikal
Selanjutnya untuk menggabungkan kolom secara vertikal, artinya antar baris, maka kita menggunakan atribut rowspan.Seperti disampaikan sebelumnya bahwa
colspan dan rowspan di aplikasikan ke kolom, baik <th> maupun <td> karena keduanya adalah kolom.Nilai yang diisikan pada atribut rowspan menunjukkan jumlah kolom yang akan digabungkan. Penggabungan ini dilakukan kebawah dihitung mulai kolom dimana atribut rowspan didefinisikan.
Contoh:
<html>
<head>
<style type="text/css">
th, td {
padding: 5px 15px;
}
</style>
</head>
<body>
<table border="1">
<thead>
<tr>
<th rowspan="2">No</th>
<th rowspan="2">Barang</th>
<th colspan="2">2016</th>
<th rowspan="2">Total</th>
</tr>
<tr>
<th>TW. 1</th>
<th>TW. 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Televisi</td>
<td>45.000</td>
<td>75.000</td>
<td>120.000</td>
</tr>
<tr>
<td>2</td>
<td>Kulkas</td>
<td>20.000</td>
<td>40.000</td>
<td>60.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="2">Total</th>
<th>65.000</th>
<th>115.000</th>
<th>180.000</th>
</tr>
</tfoot>
</table>
</body>
</html>Hasilnya:
Pada gambar diatas terlihat bahwa baris kedua jumlah kolomnya tinggal dua, karena yang lain telah di lebur dengan kolom diatasnya menggunakan atribut rowspan.
V. Menentukan Lebar Kolom Tabel HTML
Terkadang untuk keperluan tertentu, kita perlu mendefinisikan lebar kolom suatu tabel. Untuk keperluan tersebut, kita dapat menggunakan CSS dengan property widthSeperti telah disampaikan sebelumnya bahwa penggunaan atribut width sudah tidak valid lagi, sehingga kita tidak menggunakan cara tersebut.
Penting untuk diketahui bahwa kita hanya bisa menentukan lebar kolom yang statusnya “hanya satu kolom” artinya bukan hasil gabungan kolom horizontal (
Sebagai contoh, perhatikan ilustrasi berikut:colspan)
Pada contoh diatas kita mendefinisikan lebar kolom pada
thead.Namun demikian, kita juga dapat menentukan lebar kolom pada elemen
<td> yang berada didalam elemen <tbody> yang bisa jadi lebih mudah karena tidak mengandung colspan.
Menentukan lebar kolom dengan colgroup
Cara lain yang lebih elegan untuk menentukan lebar kolom tabel HTML adalah menggunakan elemen <col> atau <colgroup>
Jika menggunakan
<col> atau <colgroup> maka jumlahnya harus sama dengan jumlah kolom. Jika tidak, maka mengakibatkan elemen HTML menjadi tidak valid
V. Membuat Tabel Dengan HTML dan CSS – Menambahkan CSS
Setelah kita mempelajari bagaimana membuat tabel dengan HTML, selanjutnya kita akan mempelajari bagaimana mendesain tabel tersebut sehingga nyaman untuk dilihat.Mendesain tabel dengan CSS dapat dilakukan dengan mudah, namun demikian, terdapat hal-hal yang penting untuk diperhatikan, salah satunya adalah penerapan default style yang dilakukan oleh browser.
Karena pembahasan cukup memakan tempat, untuk itu saya pisah di artikel tersendiri, sobat dapat mengikutinya disini: Mendesain Tabel Dengan CSS 3 – Panduan Lengkap
Contoh CSS 3 untuk tabel:
<html>
<head>
<style type="text/css">
/* Table */
body {
font-family: "lucida Sans Unicode", "Lucida Grande", "Segoe UI", vardana
}
.demo-table {
border-collapse: collapse;
font-size: 13px;
}
.demo-table th,
.demo-table td {
padding: 7px 17px;
}
.demo-table .title {
caption-side: bottom;
margin-top: 12px;
}
.demo-table thead th:last-child,
.demo-table tfoot th:last-child,
.demo-table tbody td:last-child {
border: 0;
}
/* Table Header */
.demo-table thead th {
border-right: 1px solid #c7ecc7;
text-transform: uppercase;
}
/* Table Body */
.demo-table tbody td {
color: #353535;
border-right: 1px solid #c7ecc7;
}
.demo-table tbody tr:nth-child(odd) td {
background-color: #f4fff7;
}
.demo-table tbody tr:nth-child(even) td {
background-color: #dbffe5;
}
.demo-table tbody td:nth-child(4),
.demo-table tbody td:first-child,
.demo-table tbody td:last-child {
text-align: right;
}
.demo-table tbody tr:hover td {
background-color: #ffffa2;
border-color: #ffff0f;
transition: all .2s;
}
/* Table Footer */
.demo-table tfoot th {
border-right: 1px solid #c7ecc7;
}
.demo-table tfoot th:first-child {
text-align: right;
}
</style>
</head>
<body>
<table class="demo-table">
<caption class="title">Tabel 1. Data Penjualan Divisi Elektronik</caption>
<thead>
<tr>
<th>No</th>
<th>Pembeli</th>
<th>Barang</th>
<th>Tanggal</th>
<th>Harga</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Anton</td>
<td>Televisi</td>
<td>07 September 2016</td>
<td>2.500.000</td>
</tr>
<tr>
<td>2</td>
<td>Bryan</td>
<td>Mesin Cuci</td>
<td>10 Juli 2016</td>
<td>1.500.000</td>
</tr>
<tr>
<td>3</td>
<td>Cherly</td>
<td>Dispenser</td>
<td>11 Agustus 2016</td>
<td>950.000</td>
</tr>
<tr>
<td>4</td>
<td>Dean</td>
<td>Kulkas</td>
<td>15 September 2016</td>
<td>1.750.000</td>
</tr>
<tr>
<td>5</td>
<td>Esryl</td>
<td>Wall Fan</td>
<td>11 Oktober 2016</td>
<td>450.000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="4">Total</th>
<th>7.150.000</th>
</tr>
</tfoot>
</table>
</body>
</html>Hasil yang kita peroleh adalah:
Pada tabel diatas, kita banyak menggunakan
pseudo-element seperti: :first-child, :nth-child, dan :last-child.Pseudo element tersebut kita gunakan salah satunya untuk membuat align kolom menjadi rata kanan, karena secara default browser akan membuat teks rata-kiri.
Disamping itu kita menggunakan psuedo-class
:hover untuk menghighlight row ketika terjadi event hover (mouse berada di atas kolom.