Anak Males – kali ini kita akan belajar membuat tabel di html, setelah kemarin sudah belajar membuat gambar di html.
HTML atau HyperText Markup Language adalah bahasa markup yang digunakan untuk mengatur dan memformat isi dari sebuah halaman web.
Salah satu elemen HTML yang sering digunakan adalah tabel, yaitu sekumpulan data yang disusun dalam bentuk baris dan kolom.
Tabel terdiri dari 4 unsur utama:
- Kolom
- Baris
- Sel
- Garis
Dalam sebuah tabel, baris merupakan satu set data yang terdiri dari beberapa kolom. Setiap baris menunjukkan informasi tentang satu entitas, dan kolom menunjukkan atribut dari entitas tersebut.
Misalnya, dalam tabel siswa, setiap baris mewakili informasi tentang seorang siswa, dan kolom-kolomnya mungkin mencakup nama siswa, nomor induk siswa, kelas, dan nilai-nilai yang diperoleh siswa tersebut.
| Nama | NIS | Kelas | Nilai MTK | Nilai IPA |
|---|---|---|---|---|
| Ani | 123 | 10 | 90 | 80 |
| Budi | 234 | 10 | 85 | 75 |
| Citra | 345 | 10 | 80 | 70 |
Dalam tabel di atas, masing-masing baris mewakili informasi tentang seorang siswa, dan kolom-kolomnya menunjukkan atribut-atribut dari siswa tersebut, seperti nama, nomor induk siswa, kelas, dan nilai-nilai yang diperoleh siswa tersebut.
Sedangkan Kolom dalam sebuah tabel merupakan bagian yang menampilkan atribut dari entitas yang ditunjukkan oleh baris-baris dalam tabel tersebut.
Dalam tabel, kolom biasanya ditandai dengan judul yang menjelaskan atribut apa yang ditampilkan di kolom tersebut. Setiap baris dalam tabel memiliki nilai untuk setiap kolom yang terdapat dalam tabel tersebut.
Dalam tabel di atas, kolom-kolomnya adalah “Nama”, “NIS”, “Kelas”, “Nilai Matematika”, dan “Nilai Bahasa Indonesia”. Setiap baris dalam tabel memiliki nilai untuk setiap kolom yang terdapat dalam tabel tersebut.
Misalnya, baris pertama menunjukkan bahwa siswa bernama Ani dengan nomor induk siswa 123 berada di kelas 10 dan memiliki nilai matematika 90 dan nilai bahasa Indonesia 80.
Kemudian Sel dalam sebuah tabel adalah tempat dimana sebuah nilai ditampilkan. Setiap sel merupakan kombinasi dari satu baris dan satu kolom dalam tabel. Sel-sel dalam tabel biasanya dipisahkan oleh garis-garis vertikal dan horizontal, yang membantu dalam membedakan satu sel dari sel lainnya.
Dalam tabel di atas, setiap sel merupakan kombinasi dari satu baris dan satu kolom. Misalnya, sel yang berisi nilai “90” adalah sel yang terletak di baris pertama dan kolom keempat, yang menunjukkan bahwa siswa bernama Ani memiliki nilai matematika 90.
Sel yang berisi nilai “75” adalah sel yang terletak di baris kedua dan kolom kelima, yang menunjukkan bahwa siswa bernama Budi memiliki nilai bahasa Indonesia 75.
Yang terakhir, Garis dalam sebuah tabel adalah garis vertikal atau horizontal yang memisahkan sel-sel dalam tabel. Garis vertikal dipakai untuk memisahkan kolom-kolom dalam tabel, sedangkan garis horizontal dipakai untuk memisahkan baris-baris dalam tabel.
Garis dapat digunakan untuk mempermudah pembacaan tabel dengan membantu menunjukkan batas-batas antara sel-sel yang berdekatan.
Dalam tabel di atas, garis vertikal dipakai untuk memisahkan kolom-kolom dalam tabel, sedangkan garis horizontal dipakai untuk memisahkan baris-baris dalam tabel.
Misalnya, garis vertikal yang memisahkan kolom “Nama” dan kolom “NIS” membantu menunjukkan bahwa kolom “NIS” merupakan atribut yang berbeda dari kolom “Nama”.
Garis horizontal yang memisahkan baris pertama dari baris kedua juga membantu menunjukkan bahwa baris kedua merupakan baris yang berbeda dari baris pertama.
Tag Untuk Membuat Tabel HTML
Berikut adalah beberapa tag HTML yang dapat digunakan untuk membuat tabel:
<table>: Tag ini digunakan untuk membuat tabel baru.<tr>: Tag ini digunakan untuk membuat baris baru dalam tabel.<td>: Tag ini digunakan untuk membuat sel baru dalam tabel.<th>: Tag ini serupa dengan tag<td>, tetapi biasanya digunakan untuk membuat sel yang berisi judul atau heading dari sel lain dalam tabel.<thead>: Tag ini digunakan untuk menandai bagian atas tabel yang berisi judul atau heading.<tbody>: Tag ini digunakan untuk menandai bagian tengah tabel yang berisi data.<tfoot>: Tag ini digunakan untuk menandai bagian bawah tabel yang biasanya berisi informasi tambahan atau total.
Contoh penggunaan tag-tag tersebut dalam membuat tabel adalah sebagai berikut:
<table>
<thead>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>Kota</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Jalan Raya No. 1</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>Jalan Raya No. 2</td>
<td>Bandung</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: 2 orang</td>
</tr>
</tfoot>
</table>
Tag <table> menandai awal tabel, tag <thead> menandai bagian atas tabel yang berisi judul, tag <tbody> menandai bagian tengah tabel yang berisi data, dan tag <tfoot> menandai bagian bawah tabel yang biasanya berisi informasi tambahan atau total.
Tag <tr> digunakan untuk membuat baris baru dalam tabel, tag <td> digunakan untuk membuat sel baru dalam tabel, dan tag <th> digunakan untuk membuat sel yang berisi judul atau heading dari sel lain dalam tabel.
Hasil Outputnya :
See the Pen Tabel HTML by Anak Males (@anakmalescom) on CodePen.
Kenapa tidak ada garisnya? Karena kita tidak menambahkan atribut border pada tabelnya. Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1" di dalam tag <table>.
Sehingga akan menjadi seperti ini:
<table boder="1">
<thead>
<tr>
<th>Nama</th>
<th>Alamat</th>
<th>Kota</th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>Jalan Raya No. 1</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>Jalan Raya No. 2</td>
<td>Bandung</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="3">Total: 2 orang</td>
</tr>
</tfoot>
</table>Nilai "1" pada atribut border adalah ukuran garisnya. Semakin besar ukurannya, maka akan semakin besar pula ukuran garisnya.
Nilai "1" adalah ukuran garis yang palng kecil.
Cara Mengatur Jarak Sel
Untuk mengatur jarak sel dalam tabel HTML, Anda dapat menggunakan atribut cellpadding pada tag <table>. Atribut cellpadding menentukan jarak antara sel dengan isi sel tersebut, dalam satuan pixels (px).
Contoh penggunaan atribut cellpadding:
<table cellpadding="10">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
</table>
Dengan atribut cellpadding di atas, jarak antara sel dan isi sel akan menjadi 10 pixels. Anda juga dapat menentukan nilai dari atribut cellpadding dengan menggunakan persentase (%), seperti contoh berikut:
<table cellpadding="5%">
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
</table>
Dengan atribut cellpadding di atas, jarak antara sel dan isi sel akan menjadi 5% dari lebar tabel.
Perlu diingat bahwa atribut cellpadding hanya berlaku untuk seluruh tabel, tidak dapat digunakan pada sel tertentu.
Jika Anda ingin mengatur jarak sel secara spesifik, Anda dapat menggunakan gaya CSS dengan menentukan nilai padding pada elemen td atau th.
Contoh penggunaan gaya CSS untuk mengatur jarak sel:
<style>
td {
padding: 10px;
}
</style>
<table>
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
</table>
Dengan gaya CSS di atas, jarak antara sel dan isi sel akan menjadi 10 pixels untuk setiap sel dalam tabel.
Cara Menambahkan Warna Sel dan Baris Tabel HTML
Untuk menambahkan warna pada sel atau baris tabel HTML, Anda dapat menggunakan atribut bgcolor pada tag <td> atau <tr>. Atribut bgcolor menentukan warna latar belakang dari sel atau baris tersebut.
Contoh penggunaan atribut bgcolor pada sel:
<table>
<tr>
<td bgcolor="#ff0000">Sel 1</td>
<td>Sel 2</td>
</tr>
</table>
Dengan atribut bgcolor di atas, warna latar belakang dari sel pertama akan menjadi merah.
Contoh penggunaan atribut bgcolor pada baris:
<table>
<tr bgcolor="#ff0000">
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
</table>
Dengan atribut bgcolor di atas, warna latar belakang dari baris pertama akan menjadi merah.
Perlu diingat bahwa atribut bgcolor sudah tidak dianjurkan untuk digunakan dalam HTML modern, dan sebaiknya diganti dengan gaya CSS. Untuk menambahkan warna pada sel atau baris tabel, Anda dapat menggunakan gaya CSS dengan menentukan nilai background-color pada elemen td atau tr.
Contoh penggunaan gaya CSS untuk menambahkan warna pada sel:
<style>
td {
background-color: #ff0000;
}
</style>
<table>
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
</table>
Dengan gaya CSS di atas, warna latar belakang dari setiap sel dalam tabel akan menjadi merah.
Contoh penggunaan gaya CSS untuk menambahkan warna pada baris:
<style>
tr:nth-child(odd) {
background-color: #ff0000;
}
</style>
<table>
<tr>
<td>Sel 1</td>
<td>Sel 2</td>
</tr>
<tr>
<td>Sel 3</td>
<td>Sel 4</td>
</tr>
</table>
Dengan gaya CSS di atas, warna latar belakang dari setiap baris ganjil dalam tabel akan menjadi merah.
Menggabungkan Sel Tabel HTML
Untuk menggabungkan sel dalam tabel HTML, Anda dapat menggunakan atribut colspan pada tag <td> atau <th>. Atribut colspan menentukan jumlah kolom yang ingin digabungkan.
Contoh penggunaan atribut colspan:
<table>
<tr>
<td colspan="2">Sel 1</td>
</tr>
<tr>
<td>Sel 2</td>
<td>Sel 3</td>
</tr>
</table>
Dengan atribut colspan di atas, sel pertama akan menggabungkan dua kolom, sehingga sel kedua dan sel ketiga akan muncul di bawah sel pertama.
Anda juga dapat menggabungkan sel dalam baris yang sama dengan menggunakan atribut rowspan. Atribut rowspan menentukan jumlah baris yang ingin digabungkan.
Contoh penggunaan atribut rowspan:
<table>
<tr>
<td rowspan="2">Sel 1</td>
<td>Sel 2</td>
</tr>
<tr>
<td>Sel 3</td>
</tr>
</table>
Dengan atribut rowspan di atas, sel pertama akan menggabungkan dua baris, sehingga sel ketiga akan muncul di sebelah kanan sel pertama.
Perlu diingat bahwa Anda tidak dapat menggabungkan sel dalam tabel dengan menggunakan tag <tr> atau <table>. Hanya tag <td> atau <th> yang dapat digunakan untuk menggabungkan sel.
Cara Menyisipkan Elemen Lain Kedalam Sel Tabel HTML
Untuk menyisipkan elemen lain kedalam sel tabel HTML, Anda dapat menggunakan tag-tag HTML yang tersedia, seperti <p>, <img>, atau <a>.
Contoh menyisipkan paragraf html ke dalam sel tabel:
<table>
<tr>
<td>
<p>Ini adalah paragraf yang disisipkan ke dalam sel tabel.</p>
</td>
</tr>
</table>
Contoh menyisipkan gambar ke dalam sel tabel:
<table>
<tr>
<td>
<img src="gambar.jpg" alt="Gambar">
</td>
</tr>
</table>
Contoh menyisipkan tautan ke dalam sel tabel:
<table>
<tr>
<td>
<a href="http://www.anakmales.com">Klik di sini untuk melihat website ini</a>
</td>
</tr>
</table>
Anda juga dapat menyisipkan elemen lain seperti formulir atau video menggunakan tag-tag HTML yang tersedia. Pastikan untuk menggunakan tag penutup yang sesuai ketika menyisipkan elemen lain ke dalam sel tabel, agar struktur HTML tetap valid.
Penutup
Baiklah, mungkin belajar tabel html kita cukupkan sampai disini aja, sampai jumpa di tutorial html lainnya.