Cara membuat tabel HTML Lengkap Dan Terbaru sebenarnya sangat mudah jika kamu paham setiap tag dan atribut yang digunakan untuk membuat tabe...
Cara Membuat Tabel HTML Lengkap Dan Terbaru
Senin, April 27, 2020
Daftar Isi [Tampil]
Nah pada kesempatan kali ini Panduan Code akan melanjutkan seri belajar coding HTML yang kita pelajari pada artikel sebelumnya.
Dan materi yang akan kita pelajari pada artikel ini adalah tentang cara membuat tabel HTML , Panduan Code akan bahas secara lengkap tag-tag dan atribut HTML yang digunakan untuk membuat tabel.
Bukan hanya itu saja Panduan Code juga akan mulai menjelaskan CSS (Cascading Style Sheet) untuk mempercantik tampilan tabel HTML kita nantinya.
Perlu kamu ketahui bahwa setiap website yang ada sekarang pasti menggunakan CSS untuk mempercantik tampilan websitenya.
Catatan PentingBootstrap adalah framework CSS, jadi dapat kita simpulkan bahwa setiap website yang ada sekarang menggunakan CSS.
Namun yang Panduan Code tekankan untuk materi kali ini yaitu HTML-nya, untuk materi CSS secara lebih spesifik akan Panduan Code bahas pada kesempatan lain.
Sekarang kita mulai ke coding tabel HTML-nya secara bertahap agar kamu lebih paham semua tag-tag dan atribut HTML yang digunakan untuk membuat tabel.
Tabel HTML Dengan Tag table, tr, td
Tabel HTML ini adalah tabel paling sederhana yang bisa kamu coba, untuk lebih jelasnya kamu harus mengetahui dulu fungsi dari masing-masing tag HTML tersebut.
Tag <table> adalah tag pembuka tabel yang digunakan untuk menandai awal tabel HTML.
Dan tag </table> adalah tag penutup tabel yang digunakan untuk menandai akhir tabel HTML, jadi semua tag yang ada diantara tag <table> dan </table> adalah komponen tabel.
Lalu tag <tr> adalah tag pembuka yang berfungsi untuk membuat sebuah baris pada tabel HTML.
Kemudian tag </tr> adalah tag penutup dari tag <tr>, jadi semua yang tag yang ada diantara tag <tr> dan </tr> akan tampil satu baris pada tabel HTML.
Selanjutnya tag <td> adalah tag pembuka yang berfungsi untuk membuat kolom pada setiap baris dalam tabel HTML.
Dan tag </td> adalah tag penutup dari tag <td> tersebut untuk menandai akhir kolom pada setiap baris dalam tabel HTML.
Berikut ini contoh coding tabel HTML-nya.
<!DOCTYPE html>
<html>
<head>
<title>Tabel HTML Sederhana</title>
</head>
<body>
<h1>Belajar tag Tabel HTML</h1>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
Dan hasil dari coding tabel HTML sederhana tersebut akan terlihat seperti gambar dibawah ini.
Pada tabel HTML sederhana diatas Panduan Code juga menambahkan atribut border="1" yang berfungsi untuk membuat garis tepi sebesar 1 pixel pada tabel HTML tersebut.
Silahkan kamu pelajari dan pahami dulu cara membuat tabel dengan tag <table>, <tr>, dan <td> diatas, jika sudah mari kita belajar membuat tabel HTML ketahap selanjutnya.
Memahami Atribut Border Pada Tabel HTML
Seperti yang telah Panduan Code jelaskan pada tabel diatas bahwa atribut border adalah atribut yang berfungsi untuk membuat garis tepi, dan untuk ukuran besar kecil-nya menggunakan pixel.
Sekarang langsung kita coba praktekan penggunaan atribut border pada tabel HTML, berikut ini coding-nya.
<!DOCTYPE html>
<html>
<head>
<title>Memahami Atribut Border</title>
</head>
<body>
<h1>Jika Tidak Menggunakan Border</h1>
<table>
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
<br/>
<h1>Jika Border 1 pixel pada tag table</h1>
<table border="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
<br/>
<h1>Jika Border 5 pixel pada tag table</h1>
<table border="5">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
Dari contoh coding tabel diatas jika dibuka pada browser akan terlihat seperti gambar dibawah ini.
Nah sampai disini pasti kamu sudah paham dengan atribut border pada tabel HTML, oleh sebab itu mari kita lanjutkan pembelajaran kita pada materi tabel HTML berikut ini.
Memahami Atribut Cellspacing Pada Tabel HTML
Atribut Cellspacing berfungsi untuk mengatur jarak antara setiap Cell pada tabel HTML.
Agar kamu lebih paham sekarang langsung kita praktekan saja penggunaan atribut Cellspacing tersebut, berikut ini contoh codingnya.
<!DOCTYPE html>
<html>
<head>
<title>Memahami Atribut cellspacing</title>
</head>
<body>
<h1>Tabel dengan border 1 dan cellspacing 3</h1>
<table border="1" cellspacing="3">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
<br/>
<h1>Tabel dengan border 1 cellspacing 6</h1>
<table border="1" cellspacing="6">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
Dari contoh coding penggunaan atribut Cellspacing diatas maka ketika dibuka dibrowser hasilnya akan terlihat seperti pada gambar dibawah ini.
Setelah kamu coba praktekan pasti kamu sudah paham tentang penggunaan atribut Cellspacing, oleh sebab itu sekarang kita lanjutkan materi Cara Membuat Tabel HTML ini ke materi selanjutnya yaitu Cellpadding.
Memahami Atribut Cellpadding Pada Tabel HTML
Atribut Cellpadding adalah atribut yang berfungsi untuk mengatur jarak antara text / object pada setiap Cell dengan garis tepi setiap Cell pada tabel tersebut.
Sekarang langsung kita praktekan penggunaan Cellpadding pada tabel HTML agar kamu lebih paham, dan berikut ini contoh codingnya.
<!DOCTYPE html>
<html>
<head>
<title>Memahami Atribut cellpadding</title>
</head>
<body>
<h1>Tabel dengan border 1 cellpadding 1</h1>
<table border="1" cellpadding="1">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
<br/>
<h1>Tabel dengan border 1 cellpadding 7</h1>
<table border="1" cellpadding="7">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
<br/>
<h1>Tabel dengan border 1 cellpadding 15</h1>
<table border="1" cellpadding="15">
<tr>
<td>Baris 1, Kolom 1</td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
Jika coding tabel diatas dibuka dibrowser maka hasilnya akan terlihat seperti pada gambar dibawah ini.
Dari hasil coding tabel tersebut kamu dapat melihat perbedaan jarak antara text / object yang ada pada setiap cell dengan garis tepi pada setiap cell tersebut.
Jadi jika kamu ingin tabel yang kamu buat terlihat lebih rapih kamu dapat menggunakan cara membuat tabel HTML dengan Cellpadding, Cellspacing, dan border.
Namun tidak sampai disini materi kita, masih banyak materi selanjutnya tentang cara membuat tabel HTML yang akan kita pelajari pada artikel ini.
Oleh sebab itu yuk kita lanjut ke materi selanjutnya yaitu tentang atribut Rowspan dan Colspan pada tabel HTML.
Memahami Atribut Rowspan Dan Colspan Pada Tabel HTML
Atribut Rowspan dan Colspan sebenarnya memiliki fungsi yang hampir sama yaiu untuk menggabungkan bagian-bagian Cell tabel menjadi satu bagian.
Lalu apa yang membuat Rowspan dan Colspan berbeda?, simak penjelasannya dibawah ini.
Atribut Rowspan berfungsi untuk menggabungkan beberapa bagian Cell tabel secara vertikal menjadi satu bagian.
Sedangkan atribut Colspan berfungsi untuk menggabungkan beberapa bagian Cell tabel secara horizontal menjadi satu bagian.
Sekarang kita coba praktekan langsung penggunaan atribut Rowspan dan Colspan tersebut, berikut ini coding tabelnya.
<!DOCTYPE html>
<html>
<head>
<title>Memahami Atribut Rowspan dan Colspan</title>
</head>
<body>
<h1>Rowspan 2 Cell</h1>
<table border="1">
<tr>
<td rowspan="2">Baris 1 Kolom 1 dan Baris 2 Kolom 1 </td>
<td>Baris 1, Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
<br/>
<h1>Colspan 2 Cell</h1>
<table border="1">
<tr>
<td colspan="2">Baris 1 Kolom 1 dan Kolom 2</td>
</tr>
<tr>
<td>Baris 2, Kolom 1</td>
<td>Baris 2, Kolom 2</td>
</tr>
</table>
</body>
</html>
Dan hasil dari contoh coding penggunaan Rowspan dan Colspan tersebut akan terlihat seperti gambar dibawah ini.
Sekarang kamu pasti sudah paham dan bisa membedakan fungsi atribut Rowspan dan Colspan, oleh sebab itu mari kita lanjut ke materi selanjutnya.
Cara Membuat Tabel HTML Dengan Tag th
Tag th adalah tag yang berfungsi untuk membuat keterangan atau kategori pada masing-masing kolom di tabel HTML.
Sebenarnya tag th dan td itu hampir sama fungsinya, namun bedanya yaitu jika tag th maka text pada kolom tersebut akan tampil bold (tebal) dan posisi textnya akan berada di tengah (center).
Sedangkan tag td textnya akan normal seperti biasa yaitu posisi text tetap dikiri dan tidak dicetak tebal seperti th.
Biasanya tag th digunakan pada baris pertama sebuah tabel dan td digunakan pada baris kedua dan seterusnya pada tabel HTML.
Sekarang coba kita praktekan langsung penggunaan tag th pada tabel HTML, berikut ini contoh coding tabelnya.
<!DOCTYPE html>
<html>
<head>
<title>Memahami Tag th Pada Tabel HTML</title>
</head>
<body>
<h1>Tag th</h1>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
</tr>
<tr>
<td>2</td>
<td>Panduan Code</td>
</tr>
</table>
</body>
</html>
Dan hasil dari contoh coding tabel HTML tersebut akan tampil seperti gambar dibawah ini.
Nah bagaimana apakah mudah dipahami penggunaan tag th tersebut?
Jika kamu sudah paham mari kita lanjut lagi ke materi selanjutnya yaitu tag caption pada tabel HTML.
Cara Membuat Tabel HTML Dengan Tag Caption
Tag caption adalah tag yang berfungsi untuk membuat judul tabel pada HTML, walaupun kamu bisa membuat judul tabel hanya dengan menuliskan text diatas tabel itu boleh-boleh saja, namun jika dilihat dari segi HTML-nya itu kurang sesuai karena untuk membuat judul HTML sudah menyediakan tag caption.
Lalu bagaimana cara penggunaan tag tersebut?
Yuk sekarang kita coba langsung praktekan saja penggunaan tag caption untuk membuat judul tabel pada HTML, berikut ini coding tabelnya.
<!DOCTYPE html>
<html>
<head>
<title>Memahami Tag Caption</title>
</head>
<body>
<table border="1">
<caption>Tabel Karyawan</caption>
<tr>
<th>No</th>
<th>Nama</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
</tr>
<tr>
<td>2</td>
<td>Panduan Code</td>
</tr>
</table>
</body>
</html>
Dari contoh coding tersebut maka jika dijalankan pada browser akan terlihat seperti gambar dibawah ini.
Nah sekarang coba kamu perhatikan bagaimana Panduan Code menempatkan tag Caption pada coding tabel HTML tersebut.
Panduan Code menempatkannya setelah tag pembuka tabel dan sebelum tag pembuka tr, oleh sebab itu maka hasilnya akan terlihat seperti pada gambar diatas.
Mari kita lanjut lagi ke materi selanjutnya tentang tabel HTML ini, yaitu kita akan bahas tag <thead>, <tbody>, dan <tfoot> pada tabel HTML.
Memahami Tag thead, tbody, Dan tfoot Pada Tabel HTML
Sebenarnya apa fungsi dari tag <thead>, <tbody>, dan <tfoot> tersebut?
Fungsinya yaitu untuk membuat struktur tabel menjadi lebih kompleks yang memiliki tiga bagian utama yaitu <thead> yang menandakan bagian header tabel, kemudian <tbody> yang menandakan bagian body tabel, dan <tfoot> yang menandakan bagian footer pada tabel.
Bagian Header adalah bagian kepala dari tabel HTML tersebut, lalu bagian Body adalah tubuh dari tabel HTML, dan Footer adalah bagian paling bawah tabel HTML.
Lalu kenapa struktur tabel HTML dibagi menjadi tiga bagian?
Alasannya karena untuk mempermudah kamu mengedit bagian-bagian tabel HTML yang kamu buat, dan memudahkan kamu juga untuk memberi pengaturan CSS pada tabel tersebut.
Sekarang kita coba praktekan saja contoh penggunaan tag <thead>, <tbody>, dan <tfoot> tersebut, berikut ini coding tabelnya.
<!DOCTYPE html>
<html>
<head>
<title>Memahami Struktur Tabel HTML</title>
<style>
thead{
background-color: blue;
}
tbody{
background-color: chocolate;
}
tfoot{
background-color: yellow;
}
</style>
</head>
<body>
<h1>Contoh thead, tbody, tfoot</h1>
<table border="1">
<thead>
<tr>
<th>No</th>
<th>Nama Barang</th>
<th>Harga Satuan</th>
<th>Jumlah</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Pensil</td>
<td>Rp.2000</td>
<td>2</td>
<td>Rp.4000</td>
</tr>
<tr>
<td>2</td>
<td>Penghapus</td>
<td>Rp 500</td>
<td>2</td>
<td>Rp.1000</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td colspan="4" style="text-align:right;">Rp.5000</td>
</tr>
</tfoot>
</table>
</body>
</html>
Dari contoh coding tabel diatas maka hasilnya akan terlihat seperti pada gambar dibawah ini.
Sekarang coba kamu perhatikan coding CSS tebelnya yaitu coding yang berada diantara tag <style> dan </style>.
Yang pertama ada class thead yang didalamnya terdapat pengaturan background-color: blue; nah itu artinya semua yang berada dalam cakupan tag thead maka akan diatur background warnanya menjadi warna biru.
Kemudian yang kedua ada class tbody yang didalamnya terdapat pengaturan background-color: chocolate; nah itu artinya semua yang berada dalam cakupan tag tbody maka akan diatur background warnanya menjadi warna coklat.
Dan yang terakhir class tfoot yang didalamnya terdapat pengaturan background-color: yellow; nah itu artinya semua yang berada dalam cakupan tag tfoot maka akan diatur background warnanya menjadi warna kuning.
Kamu sudah pahamkan fungsi dari struktur tabel HTML tersebut, oleh sebab itu mari kita lanjut ke materi selanjutnya tentang cara membuat tabel HTML ini yaitu materi tag Colgroup dan tag Col.
Cara Membuat Tabel HTML Dengan Tag Colgroup Dan Tag Col
Tag Colgroup bisa kita artikan sebagai tag Colomn Group dan tah Col bisa kita artikan sebagai Colomn.
Dan fungsi dari tag Colgroup dan tag Col adalah untuk mengelompokan kolom pada tabel HTML yang kamu buat, yang kemudian dapat kamu atur CSS-nya dengan lebih mudah.
Jadi kamu dapat mengatur tampilan kolom pada tabel HTML hanya dengan memberikan style pada tag Col saja, kamu tidak perlu memberkan style pada setiap kolom dengan manual.
Sekarang kita coba praktekan penggunaan tag Colgroup dan tag Col pada tabel HTML, berikut ini contoh codingnya.
<!DOCTYPE html>
<html>
<head>
<title>Tag colgroup dan tag col</title>
</head>
<body>
<h1>Tabel Dengan Tag Colgroup Dan Tag Col</h1>
<table border="1">
<colgroup>
<col style="background-color:gray;width: 20px;">
<col span="2" style="background-color:yellow; width: 200px;">
</colgroup>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
<td>XII RPL 1</td>
</tr>
<tr>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII RPL 2</td>
</tr>
</table>
</body>
</html>
Coba kamu perhatikan coding diatas, kemudian apa yang kamu pahami dari coding diatas?
Masih bingung, kalau begitu saya perjelas lagi penjelasan dari coding diatas.
Pada coding diatas tag Colgroup digunakan untuk membungkus tag Col, nah itulah fungsi dari tag Colgroup.
Kemudian tag Col pertama diberi style background warna abu-abu dan lebar 20 pixel, jadi setiap kolom pertama pada tabel akan diatur oleh tag Col ini.
Lalu tag Col kedua diberi atribut span="2" itu artinya tag Col ini akan mengatur dua kolom sekaligus, kemudian diberi style background warna kuning dan lebar 200 pixel.
Maka hasil dari contoh coding tabel diatas jika dijalankan pada browser akan terlihat seperti pada gambar dibawah ini.
Bagaimana sekarang kamu pahamkan penggunaan tag Colgroup dan tag Col pada tabel HTML, nah oleh sebab itu mari kita lanjut lagi ke materi selanjutnya dari pembelajaran kira tentang Cara Membuat Tabel HTML Lengkap.
Materi selanjutnya adalah memahami atribut rules pada tabel HTML, yuk simak materinya dibawah ini.
Memahami Atribut Rules Pada Tabel HTML
Atribut Rules pada tabel HTML ini berfungsi untuk membuat dan mengatur garis pada tabel HTML.
Perlu kamu ketahui bahwa atribut Rules pada tabel HTML memiliki empat value atau nilai yang bisa kamu gunakan untuk mengatur garis pada tabel HTML yang kamu buat.
Rules Value Pada Tabel HTML
1. Value atau nilai rows.
Nilai rows berfungsi untuk membuat garis pada tabel HTML secara horizontal saja diantara Cell tabel.
2. Value atau nilai cols.
Nilai cols berfungsi untuk membuat garis pada tabel HTML secara vertikal saja diantara Cell tabel.
3. Value atau nilai all.
Nilai all berfungsi untuk membuat garis pada tabel HTML secara horizontal dan vertikal diantara Cell tabel.
4. Value atau nilai none.
Dan Nilai none berfungsi untuk tidak menampilkan garis pada tabel HTML diantara Cell Tabel.
Sekarang kita coba praktekan saja penggunaan artibut Rules pada tabel HTML, dan berikut ini contoh coding tabelnya.
<!DOCTYPE html>
<html>
<head>
<title>Memahami Atribut Rules</title>
</head>
<body>
<h1>Tabel Dengan Attribute rules rows</h1>
<table rules='rows'>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
<td>XII Rekayasa Perangkat Lunak 1</td>
</tr>
<tr>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII Rekayasa Perangkat Lunak 2</td>
</tr>
</table>
<h1>Tabel Dengan Attribute rules cols</h1>
<table rules='cols'>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
<td>XII Rekayasa Perangkat Lunak 1</td>
</tr>
<tr>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII Rekayasa Perangkat Lunak 2</td>
</tr>
</table>
<h1>Tabel Dengan Attribute rules all</h1>
<table rules='all'>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
<td>XII Rekayasa Perangkat Lunak 1</td>
</tr>
<tr>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII Rekayasa Perangkat Lunak 2</td>
</tr>
</table>
<h1>Tabel Dengan Attribute rules none</h1>
<table rules='none'>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
<td>XII Rekayasa Perangkat Lunak 1</td>
</tr>
<tr>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII Rekayasa Perangkat Lunak 2</td>
</tr>
</table>
</body>
</html>
Dari contoh coding tabel diatas jika dijalankan pada browser maka akan terlihat hasilnya seperti pada gambar dibawah ini.
Bagaimana setelah kamu melihat hasil coding tersebut kamu pahamkan dengan fungsi atribut Rules dan keempat valuenya.
Oleh sebab itu mari kita lanjut lagi ke materi selanjutnya yaitu belajar mengatur lebar tabel HTML.
Belajar Mengatur Lebar Tabel HTML
Sebenarnya lebar sebuah tabel HTML akan menyesuaikan dengan panjang isi kolom tabel itu sendiri.
Namun agar lebih terlihat cantik dan elegan HTML menyediakan atribut width untuk mengatur lebar tabel dengan valuenya berupa pixel dan persen yang umum digunakan banyak orang.
Dan atribut width ini bisa digunakan untuk mengatur tabel HTML dalam empat tag, lalu apa saja tag tersebut?, yuk simak keempat tag-nya dibawah ini.
1. Pada tag <table>
2. Tag <th>
3. Pada tag <td>
4. Di tag <col>
Sekarang kita coba praktekan penggunaan atribut width tersebut pada tabel HTML, berikut ini contoh coding tabelnya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Mengatur Lebar Tabel HTML</title>
</head>
<body>
<h1>Tabel Menggunakan Attribute Width di tag table dengan value 500px</h1>
<table border='1' width='500px'>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
<td>XII Rekayasa Perangkat Lunak 1</td>
</tr>
<tr>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII Rekayasa Perangkat Lunak 2</td>
</tr>
</table>
<h1>Tabel Menggunakan Attribute Width di tag table dengan value 50%</h1>
<table border='1' width='50%'>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
<td>XII Rekayasa Perangkat Lunak 1</td>
</tr>
<tr>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII Rekayasa Perangkat Lunak 2</td>
</tr>
</table>
<h1>Tabel Menggunakan Attribute Width di tag th</h1>
<table border='1'>
<tr>
<th width='10px'>No</th>
<th width='200px'>Nama</th>
<th width='150px'>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
<td>XII Rekayasa Perangkat Lunak 1</td>
</tr>
<tr>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII Rekayasa Perangkat Lunak 2</td>
</tr>
</table>
<h1>Tabel Menggunakan Attribute Width di tag td</h1>
<table border='1'>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td width='20px'>1</td>
<td width='100px'>Arif NoerWahidin</td>
<td width='150px'>XII Rekayasa Perangkat Lunak 1</td>
</tr>
<tr>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII Rekayasa Perangkat Lunak 2</td>
</tr>
</table>
<h1>Tabel Menggunakan Attribute Width di tag col</h1>
<table border='1'>
<colgroup>
<col width='30px'>
<col span='2' width='200px'>
</colgroup>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
<td>XII Rekayasa Perangkat Lunak 1</td>
</tr>
<tr>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII Rekayasa Perangkat Lunak 2</td>
</tr>
</table>
</body>
</html>
Dari contoh coding tabel diatas perlu kamu katahui bahwa width='50%' adalah mengatur lebar dari setengah lebar monitor kamu.
Jadi jika kamu coba jalankan coding tersebut di komputer yang memiliki monitor lebih lebar maka lebar tabelnya juga akan menyesuaikan menjadi setengah dari lebar total monitor.
Dan dari contoh coding tabel HTML diatas jika dijalankan pada browser maka akan terlihat seperti pada gambar dibawah ini.
Sekarang kamu sudah paham cara mengatur lebar tabel HTML, nah satu lagi materi yang harus kamu pelajari yaitu belajar mengatur tinggi tabel HTML.
Belajar Mengatur Tinggi Tabel HTML
Untuk mengatur tinggi tabel dan tinggi kolom dari setiap baris pada tabel HTML kamu dapat menggunakan atribut height.
Dan perlu kamu katahui bahwa atribut height ini hanya bisa digunakan pada tag pembuka tabel dan tag pembuka tr.
Satuan nilai yang digunakan juga hanya pixel saja, jadi kamu tidak bisa menggunakan satuan persen untuk atribut height.
Untuk lebih jelasnya kita coba praktekan saja cara mengatur tinggi tabel HTML, berikut ini contoh coding tabelnya.
<!DOCTYPE html>
<html>
<head>
<title>Belajar Mengatur Tinggi Tabel HTML</title>
</head>
<body>
<h1>height di bagian tag table</h1>
<table border='1' height='170px'>
<tr>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1</td>
<td>Arif NoerWahidin</td>
<td>XII RPL 1</td>
</tr>
<tr>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII RPL 2</td>
</tr>
</table>
<h1>height di bagian tag tr</h1>
<table border='1'>
<tr height='35px'>
<th>No</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr height='60px'>
<td>1</td>
<td>Arif NoerWahidin</td>
<td>XII RPL 1</td>
</tr>
<tr height='90px'>
<td>2</td>
<td>Irfan Ekanurhidayat</td>
<td>XII RPL 2</td>
</tr>
</table>
</body>
</html>
Nah dari contoh coding tabel HTML diatas maka jika dijalankan pada browser akan terlihat seperti pada gambar dibawah ini.
Coba kamu perhatikan contoh coding tabel diatas dan hasil dari contoh coding pada gambar diatas, pada tabel pertama kita menggunakan atribut height pada tag table jadi tinggi baris pada tabelnya sama.
Dan pada tabel kedua kita menggunakan atribut height pada tag tr dengan ukuran atau nilai yang berbeda maka hasilnya juga tinggi setiap barisnya berberda.
Sekarang untuk penutup Panduan Code akan memberikan satu coding tabel HTML keren dan responsive untuk kamu, penasaran seperti apa yuk simak dibawah ini.
Cara Membuat Tabel HTML Keren Dan Responsive
Pada tutorial atau panduan cara membuat tabel HTML keren dan responsive ini adalah gabungan dari semua yang telah kita pelajari diatas, dan pada tutorial diartikel sebelumnya.
Penasaran cara membuat tabelnya seperti apa?, ikuti langkah-langkah dibawah ini.
Langkah-langkah Membuat Tabel HTML
1. Buat struktrur dasar HTML
Coding dibawah ini adalah struktur dasar HTML5 yang telah kita pelajari pada tutorial diartikel seblumnya, jadi jika kamu belum meperlajarinya silahkan pelajari terlebih dahulu.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Membuat Tabel HTML</title>
</head>
<body>
</body>
</html>
2. Tambahkan struktur dasar tabel HTML
Sekarang coding struktur dasar HTML5 tambah dengan coding struktur dasar tabel HTML, maka coding tersebut akan menjadi seperti coding dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Membuat Tabel HTML</title>
</head>
<body>
<table>
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
3. Tambahkan isi tabel HTML
Kemudian pada tahap ini kamu buat isi tabel HTMLnya sebagai contoh seperti coding dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Membuat Tabel HTML</title>
</head>
<body>
<table>
<thead>
<tr>
<th>Nama Lengkap</th>
<th>Tempat Tanggal Lahir</th>
<th>Alamat</th>
<th>Sekolah</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arif NoerWahidin</td>
<td>Banjar, 01 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Agum Hartono</td>
<td>Banjar, 02 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Irfan Ekanurhidayat</td>
<td>Banjar, 03 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Triani Okasya</td>
<td>Banjar, 04 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Akuntansi</td>
</tr>
<tr>
<td>Gilang Septianazens</td>
<td>Banjar, 05 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
4. Tambahkan CSS tabel HTML
Sekarang kita tambahkan CSS pada tabel tersebut agar tampilannya menjadi lebih cantik, berikut ini contoh codingnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Membuat Tabel HTML</title>
<style>
tr:nth-child(even){
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Nama Lengkap</th>
<th>Tempat Tanggal Lahir</th>
<th>Alamat</th>
<th>Sekolah</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arif NoerWahidin</td>
<td>Banjar, 01 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Agum Hartono</td>
<td>Banjar, 02 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Irfan Ekanurhidayat</td>
<td>Banjar, 03 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Triani Okasya</td>
<td>Banjar, 04 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Akuntansi</td>
</tr>
<tr>
<td>Gilang Septianazens</td>
<td>Banjar, 05 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
5. Tambahkan atribut border dan rules pada tag table
Jangan lupa tambahkan atribut border dan rules pada tag table agar tampilan tabel HTML kamu semakin cantik, berikut ini contoh codingnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Membuat Tabel HTML</title>
<style>
tr:nth-child(even){
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table border="1" rules="all">
<thead>
<tr>
<th>Nama Lengkap</th>
<th>Tempat Tanggal Lahir</th>
<th>Alamat</th>
<th>Sekolah</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arif NoerWahidin</td>
<td>Banjar, 01 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Agum Hartono</td>
<td>Banjar, 02 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Irfan Ekanurhidayat</td>
<td>Banjar, 03 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Triani Okasya</td>
<td>Banjar, 04 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Akuntansi</td>
</tr>
<tr>
<td>Gilang Septianazens</td>
<td>Banjar, 05 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
6. Tambahkan tag colgroup dan tag col pada tabel HTML
Agar lebar tabelnya lebih sesuai dan terlihat cantik maka kita atur lebarnya menggunakan tag colgroup dan tag col seperti pada coding dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Membuat Tabel HTML</title>
<style>
tr:nth-child(even){
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table border="1" rules="all">
<colgroup>
<col style="width: 180px;">
<col span="1" style="width: 200px;">
<col span="1" style="width: 160px;">
<col span="1" style="width: 150px;">
<col span="1" style="width: 200px;">
</colgroup>
<thead>
<tr>
<th>Nama Lengkap</th>
<th>Tempat Tanggal Lahir</th>
<th>Alamat</th>
<th>Sekolah</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arif NoerWahidin</td>
<td>Banjar, 01 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Agum Hartono</td>
<td>Banjar, 02 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Irfan Ekanurhidayat</td>
<td>Banjar, 03 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Triani Okasya</td>
<td>Banjar, 04 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Akuntansi</td>
</tr>
<tr>
<td>Gilang Septianazens</td>
<td>Banjar, 05 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
7. Tambahkan caption pada tabel HTML
Untuk tambahan kamu bisa menambahkan tag caption untuk membuat judul tabel HTML kamu, berikut ini contohnya.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Membuat Tabel HTML</title>
<style>
tr:nth-child(even){
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table border="1" rules="all">
<colgroup>
<col style="width: 180px;">
<col span="1" style="width: 200px;">
<col span="1" style="width: 160px;">
<col span="1" style="width: 150px;">
<col span="1" style="width: 200px;">
</colgroup>
<caption>Cara Membuat Tabel HTML</caption>
<thead>
<tr>
<th>Nama Lengkap</th>
<th>Tempat Tanggal Lahir</th>
<th>Alamat</th>
<th>Sekolah</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arif NoerWahidin</td>
<td>Banjar, 01 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Agum Hartono</td>
<td>Banjar, 02 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Irfan Ekanurhidayat</td>
<td>Banjar, 03 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Triani Okasya</td>
<td>Banjar, 04 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Akuntansi</td>
</tr>
<tr>
<td>Gilang Septianazens</td>
<td>Banjar, 05 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
</body>
</html>
8. Buat isi tfoot dan tambahkan artibut colspan pada tag th
Dan coding tabel dibawah ini adalah gabungan dari coding pada langkah-langkah sebelumnya serta tfoot yang sudah di isi dan ditambahkan atribut colspan pada tag th.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cara Membuat Tabel HTML</title>
<style>
tr:nth-child(even){
background-color: #f2f2f2;
}
</style>
</head>
<body>
<table border="1" rules="all">
<colgroup>
<col style="width: 180px;">
<col span="1" style="width: 200px;">
<col span="1" style="width: 160px;">
<col span="1" style="width: 150px;">
<col span="1" style="width: 200px;">
</colgroup>
<caption>Cara Membuat Tabel HTML</caption>
<thead>
<tr>
<th>Nama Lengkap</th>
<th>Tempat Tanggal Lahir</th>
<th>Alamat</th>
<th>Sekolah</th>
<th>Jurusan</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arif NoerWahidin</td>
<td>Banjar, 01 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Agum Hartono</td>
<td>Banjar, 02 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Irfan Ekanurhidayat</td>
<td>Banjar, 03 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
<tr>
<td>Triani Okasya</td>
<td>Banjar, 04 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Akuntansi</td>
</tr>
<tr>
<td>Gilang Septianazens</td>
<td>Banjar, 05 Januari 2002</td>
<td>Kota Banjar 46322</td>
<td>SMKN 1 Banjar</td>
<td>Rekayasa Perangkat Lunak</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Jumlah</th>
<th colspan="4" style="text-align:right;">5 Data Murid</th>
</tr>
</tfoot>
</table>
</body>
</html>
Untuk hasil coding tabel HTML diatas akan tampil seperti gambar tabel dibawah ini.
Sampai disini selesai sudah pembelajaran kita pada kali ini tentang Cara Membuat Tabel HTML Lengkap Dan Terbaru, semoga apa yang Panduan Code sampaikan ini dapat bermanfaat aamiin.
Dan jika kamu mempunyai pertanyaan silahkan sampaikan pada kolom komentar dibawah artikel tutorial ini, Panduan Code akan menjawab pertanyaan kamu secepatnya.
Akhir kata dari Panduan Code jangan lupa titik koma.
Coba cari lagi apa yang ada inginkan pada kolom berikut:
Bantu Apresiasi Bantu berikan apresiasi jika artikelnya dirasa bermanfaat agar penulis lebih semangat lagi membuat artikel bermanfaat lainnya. Terima kasih.