Baca Selengkapnya..Panduan Belajar HTML untuk Pemula

Panduan Membuat Tabel di HTML

Advertisement

Membuat Tabel HTML – Dalam menyajikan suatu data dan informasi, agar kelihatan rapi, terstruktur, dan mudah dipahami maka data tersebut perlu dibuat dalam bentuk terstruktur yang disebut dengan tabel. Tabel banyak dipakai untuk menampilkan suatu data maupun analis data.

Tabel merupakan struktur yang digunakan untuk menampilan data dalam bentuk kolom dan baris. Element yang digunakan untuk membuat tabel di HTML adalah <table> … </table>. Element tabel terdiri dari tiga bagian utama yaitu:

Table Head

Tabel head merupakan komponen tabel yang terletak pada bagian atas tabel. Tabel head digunakan untuk menempatkan judul data yang ingin ditampilkan. Tag yang digunakan untuk membuat table head adalah <th> … </th>.

Table Row

Table row merupakan komponen tabel yang mendefinisikan baris suatu tabel HTML. Yang dimaksud baris pada tabel adalah sel tabel yang memanjang dari kiri ke kanan. Untuk membuat table row gunakan tag <tr> … </tr>.

Table Data

Table data berfungsi sebagai sel tabel yaitu sel yang digunakan untuk menempatkan atau menuliskan data tabel tersebut. Table data pada element <table> dapat dibuat menggunakan tag <td> … </td>. Table data juga mendefinisikan jumlah dari kolom tabel.

Seri Belajar HTML:

Biar lebih jelas tentang element di atas, kita buat contoh tabel yang terdiri dari 3 baris dan 4 kolom:

membuat tabel

Element <tr> mendefinisikan jumlah baris dalam satu tabel, sedangkan element <td> mendefinisikan jumlah kolom dalam satu baris. Tabel di atas tidak menggunakan table head, untuk menambahkan element ini, gunakan tag <th> sehingga syntax table di atas menjadi seperti berikut ini:

membuat head tabel

Kedua contoh tabel di atas tidak memiliki border dan jarak antar data juga masih berdekatan. Untuk itu tabel perlu kita manipulasi dengan menambahkan atribut-atribut yang sesuai sehingga diperoleh tampilan tabel data yang menarik. Mari kita bahas satu persatu atribut tabel.

Membuat Table HTML – Border

Tabel tanpa menggunakan border akan kelihatan seperti susunan kalimat biasa tanda ada batas antar kolom dan baris. Untuk mengatasi masalah ini ditambahkan atribut tabel yaitu border pada tag <table>. Contoh penggunaan atribut border:

Membuat tabel HTML - border

Selain cara di atas, kita dapat memanipulasi bentuk border dengan tambah kode CSS, mulai dari ketebalan, style (solid, dotted, dashed), dan warna. Contoh membuat tabel dengan ketebalan 2px, bentuk dotted, warna merah. Biar lebih mudah kita pisahkan kode HTML dan CSS:

Kode pada file index.html

Kode CSS:

Membuat tabel HTML - border

Untuk membuat single border, tambahkan property border-collapse pada CSS, sehingga menjadi:

Membuat tabel HTML - border

Membuat tabel dengan border tumpul (rounded), gunakan property border-radius pada CSS. Contoh untuk border dengan ukuran 1 px, solid, dan warna hitam:

Tabel border

Menghapus border bagian luar tabel dengan cara hilangkan selector table pada kode CSS sehingga menjadi:

Membuat tabel dengan border luar 2px, solid, biru dan border dalam 2px, dashed, merah, radius 5px, kode CSS yang digunakan:

Tabel border

Selain ketiga style di atas, terdapat gaya lain yang dapat kita terapkan pada border tabel yaitu double, groove, ridge, inset, outset, none, hidden. Seperti apa bentuknya, silakan dicoba satu per satu.

Table Sizes

Ukuran tabel di HTML jika tidak diatur akan mengikuti lebar dari data yang ada di sel tabel. Untuk mengcustom ukuran atau size tabel, tambahkan atribut style pada tag <table>. Contoh ukuran tabel dengan lebar menyesuaikan dengan ukuran browser:

Membuat tabel HTML - size

Kita dapat mengatur ukuran tabel pada kolom tertentu, contoh mengatur size kolom 1 dengan lebar 10% dan kolom 2 sebesar 40% dari lebar tabel, tambahkan atribut style pada tag <th> kolom tersebut seperti contoh berikut:

Membuat tabel HTML - size

Ukuran tabel dapat juga diatur sesuai kebutuhan, gunakan satuan px untuk value width seperti contoh berikut:

Membuat tabel HTML - size

Dengan cara yang sama dapat dilakukan custom ukuran pada kolom tabel, contoh 20px untuk lebar kolom 1 dan 250px untuk lebar kolom:

Mengatur size tabel

Selain kolom, head dan baris tabel juga dapat dicustom dari ukuran normal dengan cara menambahkan atribut style pada tag <tr>. Contoh membuat tinggi head 70px dan 50px untuk baris ke 3:

Mengatur size tabel

Ukuran tabel juga dapat dicustom dengan kode CSS. Contoh membuat tabel dengan ukuran 100% (lebar browser), tambahkan kode CSS berikut:

Mengatur size tabel

Untuk mengcustom size pada kolom dan baris tertentu, terlebih dahulu tambahkan atribut class pada tag <td> dan <tr> yang akan diatur ukurannya. Contoh merubah ukuran kolom 1 dan 4, serta baris 2 dan 3, kode HTML menjadi:

Sekarang kita tambahkan kode CSS dengan lebar kolom 1 (15%), kolom 4 (40%), tinggi baris 2 (50px), dan baris 3 (100px):

Mengatur size tabel

Membuat Tabel HTML – Padding dan Spacing

Untuk mengatur jarak antara data yang terdapat pada sel dengan border tabel kita dapat menggunakan fungsi padding, sedangkan jarak antara border bagian luar dengan border bagian dalam tabel (ketebalan border) disebut dengan spacing. Fungsi padding dan spacing pada tabel dapat kita terapkan dengan menambahkan atribut cellpadding dan cellspacing pada tag <table>. Contoh membuat tabel dengan border 2px, cellpadding 10px, dan cellspacing 5px:

Padding dan Spacing tabel

Selain dengan menambahkan atribut, fungsi padding dan spacing dapat juga diterapkan dengan menambahkan kode CSS. Contoh kita ambil kode HTML di atas dengan membuang atribut yang terdapat pada tabel, sehingga penulisan kode CSS nya adalah:

Untuk mengatur jarak padding atas, kiri, bawah, dan kanan, dapat dilakukan dengan cara menambahkan beberapa value pada property padding. Kita ambil contoh padding atas 30px, kanan 50px, bawah 20px, dan kiri 20px (searah jarum jam), penulisan property padding menjadi:

Atau dapat juga lebih spesifik seperti di bawah ini:

Membuat tabel HTML - Padding dan Spacing

Membuat Tabel HTML – Colspan dan Rowspan

Colspan dan Rowspan merupakan dua atribut yang digunakan untuk menggabungkan beberapa sel tabel sehingga menjadi satu buah sel. Atribut colspan digunakan untuk menggabungkan beberapa kolom (sel tabel digabungkan secara horizontal), sedangkan rowspan berfungsi menggabungan beberapa baris tabel (sel tabel digabungkan secara vertikal). Value atribut menyatakan jumlah sel yang akan digabung (merge cells).

Contoh pada kode HTML di atas, kita ingin menggabungkan tabel head kolom 2 dengan head kolom 3, sel tabel baris 2/kolom 4 dengan baris 3/kolom 4:

Membuat Tabel HTML - Colspan dan Rowspan

Contoh lain kita menggabungkan empat buah sel tabel sekaligus terdiri dari dua kolom dan dua baris. kode HTML menjadi:

Colspan dan Rowspan tabel

Membuat Tabel HTML – Background Color

Untuk menambahkan warna pada sel tabel, kita dapat menggunaan atribut pada element <table> yaitu bgcolor. Atribut warna ini dapat diterapkan pada sel tabel, baris, maupun kolom tabel. Contoh penggunaan atribut bgcolor pada baris pertama dan sel Baris 3/Kolom 4:

Membuat Tabel HTML - Background Color

Selain menggunakan atribut bgcolor, warna tabel juga dapat diatur menggunakan kode CSS. Contoh menambahkan warna tomato pada head table, warna skyblue pada baris 2/kolom 3 dan baris 3/kolom 3. Terlebih dahulu kita tambahkan atribut class pada sel tabel yang ingin diwarnai, sehingga kode HTML nya menjadi:

Sedangkan kode CSS yang harus ditambahkan adalah sebagai berikut:

Background Color tabel

Table Styling

Di atas kita telah belajar bagaimana cara menambahkan warna background pada tabel. Sekarang kita coba manipulasi tabel dengan style tertentu misalnya warna selang seling baris atau kolom (Zebra Striped Table), dan/ atau kombinasi baris dan kolom.

Untuk membuat style tabel seperti ini kita perlu menggunakan kode CSS dengan menambahkan pseudo class selector berupa :nth-child(argument). Argument bisa berupa angka, urutan ganjil (odd) atau genap (even), dan formula. Dengan selector :nth-child ini kita dapat menyeleksi child element pada parent element (induk). Misalnya kita ingin menyeleksi satu atau beberapa element <tr> sekaligus dari element parentnya yaitu <table>.

Contoh menambahkan warna tabel pada baris genap (2, 4, 6, dst..), code CSS yang harus ditambahkan adalah sebagai berikut:

Membuat tabel HTML - table style

Menambahkan warna tabel pada kolom ganjil (1, 3, 5, dst…), code CSS yang harus ditambahkan adalah sebagai berikut:

Membuat tabel HTML - table style

Sekarang kita coba tambahkan dua background color sekaligus. Untuk baris genap gunakan tomato, sedangkan baris ganjil kita gunakan skyblue, sehingga kode CSS nya menjadi:

Membuat tabel HTML - table style

Kita coba aplikasikan cara yang sama untuk kolom tabel, gunakan warna tomato untuk kolom genap, skyblue untuk kolom ganjil, kode CSS nya menjadi:

Membuat tabel HTML - table style

Menambahkan efek warna transparan yang menggabungkan warna kolom dan baris sehingga warna saling tumpang tindih dapat menggunakan kode warna rgba(0, 0, 0, 1.0). Jika kita urutkan kode tersebut terdiri dari red, green, blue, dan alpha channel. Parameter alpha ini digunakan untuk mengatur tingkat opacity dengan rentang 0.0 (full transparent) sampai dengan 1.0 (not transparent at all). Contoh kode CSS untuk efek ini:

Membuat tabel HTML - table style

Selengkapnya tentang kode warna rgba bisa dipelajari di sini.

Untuk table style berikutnya kita coba horizontal dividers yaitu membuat buttom border pada tiap baris. Kode CSS yang digunakan adalah:

Membuat tabel HTML - table style

Terakhir adalah memberikan efek highlight berupa warna background ketika mouse diarahkan ke baris tabel atau dikenal dengan istilah Hoverable Table. Untuk membuat efek ini gunakan :hover pada selector tr. Contoh kode CSS yang bisa kita gunakan:

efek highlight pada tabel HTML
5 1 vote
Article Rating
Subscribe
Notify of
guest
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
trackback
10 days ago

[…] Panduan Membuat Tabel di HTML […]

trackback
9 days ago

[…] Panduan Membuat Tabel di HTML […]

trackback
4 days ago

[…] Panduan Membuat Tabel di HTML […]

trackback
4 days ago

[…] Panduan Membuat Tabel di HTML […]

trackback
2 days ago

[…] Panduan Membuat Tabel di HTML […]

trackback
1 day ago

[…] Panduan Membuat Tabel di HTML […]