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.
Hasil akhir tabel yang akan kita buat adalah seperti ini:
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 bgcolor
Sehingga 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.
Contoh: buat sebuah file html, misal 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>
Agar kode HTML kita valid (lolos validator), maka kita harus menempatkan elemen diatas sesuai dengan posisinya. Contoh penulisan yang valid:
<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)
RULE PENTING:
- 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 width
Seperti telah disampaikan sebelumnya bahwa penggunaan atribut width sudah tidak valid lagi, sehingga kita tidak menggunakan cara tersebut.
colspan)Sebagai contoh, perhatikan ilustrasi berikut:
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>
<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.
Lebih lanjut mengenai pembahasan tentang css untuk tabel ini bisa diikuti pada tutorial: Mendesain Tabel Dengan CSS 3 – Panduan Lengkap
Artikel Lain: 10 Ide Desain Tabel Menarik Dengan CSS 3 – Fresh Design
Demikian pembahasan mengenai cara membuat tabel dengan HTML dan CSS semoga bermanfaat.
Subscibe Now
Suka dengan artikel di Jagowebdev.com? jangan sampai ketinggalan, segera join ke milis kami untuk update informasi terbaru dari Jagowebdev.com
7 Feedback dari pembaca
mantap gan (y) sangat jelas 😀
gan, kalau mulai belajar, mulai dari mana ya?
Mending membaca buku mas, biasanya sudah runtut dari awal, apa yang harus dipelajari
thank gan
pelajarannya disini pun sangat lengkap apalagi metode pengajarannya
mas, mau nanya,,
gimana kalau untuk tabel yang ada pagination TOTAL itu bisa selalu muncul pada setiap halaman, tetapi nilai totalnya adalah keseluruhan
misalnya seperti digambar ini :
https://imagizer.imageshack.com/img924/317/4WSFVZ.jpg
terima kasih
Itu berarti setiap halaman dibuat query untuk menghitung total nya mas, atau biar penulisan querynya tidak berulang, bisa dibuatkan fungsi untuk menghitung total tersebut kemudian disetiap halaman fungsi tersebut dipanggil