Cara Membuat Tabel HTML 2024
Minggu, 07 April 2024
Kebanyakan dari para web developer pasti akan menggunakan tabel untuk mengatur tata letak sebuah halaman web.
Akan tetapi untuk sekarang setelah adanya CSS penerapan tabel HTML hanya digunakan untuk layout tampilan halaman web yang sudah tidak di sarankan kembali.
Anda sangat disarnakn untuk menggunakan CSS pada saat akan mengatur tampilan halaman web anda.
Pada umumnya saat anda akan menampilkan suatu data yang berstruktur dari database, anda akan menampilkannya dalam bentuk tabel bukan?
HTML sebagai bahasa markup sudah menyediakan elemen table yang bisa digunakan pada saat anda ingin membuat tabel.
Untuk itu anda tidak perlu khawatir karena untuk membat tabel sangat mudah untuk dilakukan bahkan bisa kurang dari 15 menit.
Sebelumnya anda harus mengenali terlebih dahulu apa itu tabel.
Tabel pada dasarnya digunakan untuk mengklompokkan suatu data secara berstruktur yang terdiri dari baris, kolom dan juga sel baris.
Baris ,kolom dan juga sel pad suatu tabel tersebut sangat membantu dalam melihat informasi keterkaitan di dalamnya.
Untuk lebih jelasnya, silahkan anda simak cara membuat tabel html yang sudah ada di bawah ini sampai selesai yaa gess yaa!!!
1. Cara Membuat Tabel HTML dengan Memahami Elemen HTML dalam Membuat Tabel
 |
| Cara Membuat Tabel HTML dengan Memahami Elemen HTML dalam Membuat Tabel |
Pada saat anda membuat tabel HTML terdapat beberapa tag atau elemen HTML yang harus anda ketahui.
Namun pada dasarnya anda sudah bisa membuat tabel hanya dengan menggunkan 3 elemen HTML.
- Elemen <table> yang digunakan untuk mendenfinikan pembuatan tabel.
- Elemen <tr> yang biasanya digunakan untuk mendenfinisikan pembuatan baris pada tabel.
- Elemen <td> bisanya digunakan untuk membuat kolom atau sel pada setiap baris yang ada pada tabel.
- Elemen <th> digunakan untuk mendenfinisikan header yang ada dalam tabel.
- Elemen <thead> biasanya digunakan untuk membungkus konten pada bagian judul atau kepala tabel.
- Elemen <tbody> digunakan untuk membungkus konten pada bagian isi atau tubuh dari tabel.
- Elemen <tfoot> sama juga digunakan untuk membungkus konten pada bagian kaki atau bagian bawah dari tabel.
Silahkan anda simak langkah-langkah mengenai cara membuat tabel html dengan menggunakan elemen yang biasa digunakan membuat tabel, yaitu sebagai berikut:
Tahap yang pertama harus anda lakukan adalah membat file html yang baru.
Setelah ittu anda bisa memberikan nama untuk file html tersebut sesuai dengan selera atau bisa anda berikan nama "index.html".
Silahkan anda memperhatikan contoh kode yang ada di bawah ini.
<!DOCTYPE html>Pada kode d atas sudah terdapat atribut atau border dalam tag table, atribut atau border tersebut fungsinya untuk memberikan garis pada tabel.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<td>Baris ke 1 - Kolom ke 1</td>
<td>Baris ke 1 - Kolom ke 2</td>
</tr>
<tr>
<td>Baris ke 2 - Kolom ke 1</td>
<td>Baris ke 2 - Kolom ke 2</td>
</tr>
</table>
</body>
</html>
Sedangkan angka 1 dalam atribut border tersebut merupakan nilai dari ketebalan garis yang akan ditampilkan.
Semakin besar nilai tersebut maka semakin tebal juga garis yang akan di tampilkan.
2. Cara Membuat Tabel HTML dengan Menggabungkan Sel pada tabel HTML
 |
| Cara Membuat Tabel HTML dengan Menggabungkan Sel pada tabel HTML |
Pada saat anda melakukan cara membuat tabel html kadang anda akan dihadapkan dengan kebutuhan untuk menggabungkan beberapa sel menjadi satu.
Untuk menggabungkan beberapa sel menjadi satu pada suatu tabel, html sudah menyediakan beberapa atribut yang bisa anda gunakan untuk itu seperti di bawah ini.
Atribut rewspan yang digunakan untuk menggabungkan baris yang sudah ada pada tabel.
Atribut colspan biasanya akan digunakan untuk menggabungkan kolom yang ada pada tabel.
Atribut tersebut bisa anda terapkan pada tag td ataupun th, silahkan anda memepertahikan contoh kode program yang sudah ada di bawah ini.
<!DOCTYPE html>Pada kode yang ada di atas atribut rowspan mempunyai nilai 2 yang artinya baris yag digabungkan berjumlah 2 baris.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr>
<th>Kimia</th>
<th>Fisika</th>
<th>Biologi</th>
</tr>
<tr>
<td>Robby</td>
<td>76</td>
<td>80</td>
<td>81</td>
</tr>
<tr>
<td>Rendi</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Alfian</td>
<td>96</td>
<td>70</td>
<td>71</td>
</tr>
</table>
</body>
</html>
Sedangkan untuk atribut colspan mempunyai nilai 3 yang artinya kolom yang akan dibagungkan berjumlah 3 kolom.
Kode yang ada di atas juga bisa tag th yang juga berfungsi sebagai kepala tabel pada saat data yang ada dalam tag "th" mempunyai efek tebal atau bold dibandingkan dengan data yang sudah ada pada tag "td".
3. Cara Membuat Tabel HTML untuk Memberikan Warna dan Jarak Antar Sel pada HTML
 |
| Cara Membuat Tabel HTML untuk Memberikan Warna dan Jarak Antar Sel pada HTML |
Cara membuat tabel html yang ketiga anda sudah memasuki tahap memberikan warna dan juga jarak antara sel pada html.
Pada contoh program sebelumnya, tabel yang dihasilkan terkesang saling berdekatan antara satu sel dengan sel yang lainnya.
Untuk bisa mengatasi semua itu HTML sudah menyediakan atribut cellpadding yang bisa anda gunakan untuk mengatur jarak antara sel.
Atribut cellpadding tersebut bisa anda terapkan langsung pada tag tabel yang ada di bawah ini.
<table border="1" cellpadding="8">Semakin tinggi nilai yang ada pada atribut cellpadding maka jarak antara sel juga akan semakin lebar begitupun juga sebaliknya.
....
</table>
Anda juga bisa memberikan warna pada latar belakang yang ada pada sel atu tabel hanya dengan menggunakan atribut bgcolor lalu anda tinggi isi dengan warna saja.
Misalnya anda akan diberukan warna latas belakang kuning pada nilai dan juga abu-abu pada nama.
Maka anda hanya perlu menambahkan atribut bgcolor pada tag "th" seperti yang ada di bawah ini.
<th bgcolor="grey" rowspan="2">Nama</th>Setelah ditambahkan atribut cellpadding pada tag tabel dan juga atribut bgcolor pada tag th maka tabel yang tadi akan ditampilkan.
<th bgcolor="yellow" colspan="3">Nilai</th>
4. Cara Membuat Tabel HTML dengan Menerapkan Kode CSS untuk Desain Tabel
 |
| Cara Membuat Tabel HTML dengan Menerapkan Kode CSS untuk Desain Tabel |
Cara membuat tabel html yang keempat adalah dengan menerapkan kode CSS untuk di taruh pada desain tabel.
Sebelumnya kita sudah membahas bagaimana cara untuk membuat gartis dan juga memberikan warna serta jarak pada tabel dengan menggunakan atribut pada html.
Untuk saat ini setelah kehadirannya CSS para pengguna atribut tersebut dalam mendesain tabel sudah tidak disarankan lagi.
Anda akan disarankan untuk menggunakan kode CSS dalam membuat garis dan juga memberikan warna serta jarak pada tabel.
Dengan memasukkan kode CSS pada halaman web bisa dengan membuat berkas CSS secara terpisah atau disimpan dalam elemen head pada HTML.
Usahakanlah jangan pernah disimpan pada elemen HTML yang lainnya karena bisa membuat kode program terlihat tidak rapi.
Selain itu dengan anda menyimpan kode css pada file secara terpisah atau dalam eleman head akan membuat kode css tersebut bisa digunakan secara berulang-ulang.
Kode CSS bisa ditulis dengan mendefinisikan terlebih dahulu tag HTML apa yang akan anda ubah atau diberikan efek CSS.
Untuk lebih jelasnya anda bisa memperhatikan contoh kode program yang ada di bawah ini.
<!DOCTYPE html>Contoh kode program di atas sudah mempunyai kode CSS, yang dimana kode CSS diletakkan dalam elemen style yang disimpan dalam elemen head.
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mengenal Tabel HTML</title>
<style>
table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
th {
background-color: #4CAF50;
color: white;
}
</style>
</head>
<body>
<table>
<tr>
<th rowspan="2">Nama</th>
<th colspan="3">Nilai</th>
</tr>
<tr>
<th>Kimia</th>
<th>Fisika</th>
<th>Biologi</th>
</tr>
<tr>
<td>Robby</td>
<td>76</td>
<td>80</td>
<td>81</td>
</tr>
<tr>
<td>Rendi</td>
<td>84</td>
<td>70</td>
<td>75</td>
</tr>
<tr>
<td>Alfian</td>
<td>96</td>
<td>70</td>
<td>71</td>
</tr>
</table>
</body>
</html>
Elemen style berfungsi untuk menendakan bahwa kode yang sudah ada didalamnya merupakan kode CSS yang biasanya digunakan untuk mendesain halaman web.
Lalu properti CSS yang sudah ada pada kode pogram di atas berfungsi untuk apa saja sih? Untuk itu silahkan anda simak ulasan di bawah ini mengenai properti CSS.
- Properti border-collapse: collapse bisa digunakan untuk menciutkan garis tabel menjadi satu garis.
- Properti border: 1px solid black digunakan untuk memberikan garis, ketebalan garis dan juga warna dari settiap garis tersebut.
- Properti padding: 10px yang digunakan supaya bisa mengontrol jarak konten yang ada pada tabel.
- Properti background-color: #4CAF50 digunakan untuk memberikan warna latar belakang biru agar terksesan tidak membosankan dan lebih menarik.
- Properti color: white bisanya digunakan untuk memberikan warna putih pada teks yang ada.
Properti hover juga digunakan supaya baris pada tabel memberikan efek warna pada saat kursor mengarahkan pada baris tersebut.
Sehingga kode CSS yang akan akan seperti di bawah ini.
<style>
table {
border-collapse: collapse;
width: 100%;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
}
th {
background-color: rgb(19, 110, 170);
color: white;
}
tr:hover {background-color: #f5f5f5;}
</style>
Akhir Kata
Itu dia beberapa cara membuat tabel html yang bisa kami berikan untuk anda pada pembahasan kali ini, yang pastinya bisa anda terapkan dengan mudah.Ada hal yang harus anda perhatikan pada saat sedang membuat tabel adalah penggunaan atribut rowspan dan juga cospan.
Dikarenakan anda harus teliti dalam menentukan berapa ukuran dari sel yang akan di terapkan pda rowspan ataupun colspan.
Sering-seringlah berlatih dan teruslah kembangkan kemampuan anda dengan mengikuti decoding academy front end web developer.
Apabila anda rasa ulasan yang sudah kami berikan di atas penting, jangan lupa untuk membagikannya ke teman ataupun kerabat anda yang belum mengetahui informasinya.
Sekian seluruh pembahasan yang bisa kami berikan untuk anda pada artikel kali ini, sekian dan semoga bermanfaat untuk anda dan selamat mencoba yaa.