Belajar Koding html Bagian 6: Membuat Tabel
.png)
Tabel HTML
adalah struktur data yang disusun dalam baris dan kolom, yang digunakan
untuk menampilkan data di halaman web. Tabel HTML merupakan bagian penting
dari bahasa pemrograman web.
Fungsi Tabel HTML
- Membantu
menyajikan data secara terstruktur
- Memudahkan audiens memahami dan
menginterpretasikan data
- Membantu menyusun data yang
dapat dibandingkan
- Membantu menyusun data seperti
gambar, teks, tautan, dan sebagainya
- Membantu mengontrol tampilan
informasi yang ada dalam sebuah halaman web
- Membantu menampilkan
record-record pada database
Cara Membuat Tabel HTML
- Menggunakan tag
<table> untuk mendefinisikan pembuatan tabel
- Menggunakan tag <tr>
untuk mendefinisikan pembuatan baris pada tabel
- Menggunakan tag <td>
untuk membuat kolom atau sel di setiap baris pada tabel
- Menggunakan tag <th>
(table Header) untuk membuat header pada tabel
Atribut HTML untuk Tabel
- Atribut HTML
Cellpadding untuk menyesuaikan spasi atau padding dalam sel dalam tabel
HTML
- Atribut border
untuk memberikan nilai garis tepi dari tabel
Untuk
membuat tabel dalam HTML, Anda dapat menggunakan beberapa elemen utama, yaitu <table>, <tr>, <td>, dan <th>. Berikut adalah langkah-langkah
dasar untuk membuat tabel sederhana:
- Membuat
Elemen <table>: Elemen <table> digunakan sebagai wadah utama
untuk tabel. Anda dapat menambahkan atribut border
untuk memberikan garis tepi pada tabel.
<table border="1">
<!-- Baris dan
kolom akan ditempatkan di sini -->
</table>
- Menambahkan
Baris dengan <tr>: Setiap baris dalam tabel
dibuat menggunakan elemen <tr> (table row).
<table border="1">
<tr>
<!-- Sel
akan ditempatkan di sini -->
</tr>
</table>
- Menambahkan
Sel dengan <td> dan Header dengan <th>: Elemen <td> (table data) digunakan untuk
membuat sel dalam baris, sedangkan elemen <th> (table header) digunakan untuk membuat sel header yang
biasanya ditampilkan dengan teks tebal dan terpusat.
<table border="1">
<tr>
<th>Header
1</th>
<th>Header
2</th>
</tr>
<tr>
<td>Data
1</td>
<td>Data
2</td>
</tr>
</table>
Contoh
lengkap pembuatan tabel sederhana:
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Contoh
Tabel HTML</title>
</head>
<body>
<table border="1">
<tr>
<th>Nama</th>
<th>Umur</th>
<th>Kota</th>
</tr>
<tr>
<td>Ani</td>
<td>15</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Budi</td>
<td>20</td>
<td>Bandung</td>
</tr>
</table>
</body>
</html>
 |
| Tampilan Kodingan (input) Membuat Tabel |
 |
| Tampilan Hasil (Output) Membuat Tabel |
Pada
contoh di atas, tabel memiliki dua baris data dengan tiga kolom:
"Nama", "Umur", dan "Kota". Atribut border="1" pada elemen <table> memberikan garis tepi pada tabel.
Referensi
0 Response to "Belajar Koding html Bagian 6: Membuat Tabel"
Post a Comment