ffCCBot/2.0 (http://commoncrawl.org/faq/)
NEW!! Buku Query MySQL Lihat Detail » x

Cara 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.

Hasil akhir tabel yang akan kita buat adalah seperti ini:

Mendesain Tabel HTML Dengan 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 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:

Membuat Tabel Dengan HTML dan CSS - Minimalis

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:

Membuat Tabel Dengan HTML 5 - Elemen Lengkap

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 thead pada 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:

Menggabungkan Kolom Tabel HTML Dengan Colspan

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:

Menggabungkan Kolom Tabel HTML Dengan Rowspan

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.

Penting untuk diketahui bahwa kita hanya bisa menentukan lebar kolom yang statusnya “hanya satu kolom” artinya bukan hasil gabungan kolom horizontal (colspan)

Sebagai contoh, perhatikan ilustrasi berikut:

Mendefinisikan Lebar Kolom Tabel HTML

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

Mendefinisikan Lebar Kolom Tabel HTML Dengan Colgroup

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:

Mendesain Tabel HTML Dengan CSS

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.

Satu Feedback dari pembaca

Silakan tinggalkan komentar

Like Us

Dapatkan update artikel terbaru via E-Mail
  1. Eksklusif Cheat Sheet PHP Bahasa Indonesia – Pendamping Belajar PHP

  2. PHP FORM III: Menampilkan Data MySQL Dengan PHP dan Form HTML

  3. Tutorial PHP Form II: Menampilkan Hasil Input Form HTML dengan PHP

  4. Tutorial PHP Form I: Menghubungkan Form HTML dengan PHP

  5. Menampilkan Data Dari Beberapa Tabel MySQL – JOIN Pada MYSQL

  6. Memahami dan Menampilkan Tanggal dan Waktu Pada PHP

  7. Menghitung Selisih Waktu Dengan PHP – Cara Termudah

  8. Memahami Fungsi Date Pada PHP

  9. Memahami Fungsi Time, Strtotime, dan Mktime Pada PHP – Memanipulasi Waktu

  10. Memahami Zona Waktu (Timezone) dan Selisih Waktu Pada PHP