Belajar Koding html Bagian 4: Membuat Tabel
.png)
Pengertian Tabel HTML
Tabel
HTML adalah elemen yang digunakan untuk menyusun dan menampilkan data dalam
bentuk baris dan kolom di halaman web. Tabel HTML merupakan bagian penting dari
bahasa pemrograman web.
Fungsi Tabel HTML
Tabel mempunyai peran yang sangat penting saat kamu akan
menyajikan data-data, kan? Dengan menggunakan tabel, sajian data menjadi lebih
bagus dan terstruktur, bisa mempermudah pembaca memahaminya.
Adapun fungsi utama tabel HTML ialah buat ngebantu kamu,
menyajikan informasi di dalam format grid yang akan mempermudah pembaca untuk
menginterpretasikan dan memahami data. Sementara bagi yang bekerja sebagai web
developer, tabel ini akan berguna untuk menampilkan informasi yang lebih jelas
dan terstruktur.
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>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Budi</td>
<td>30</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:
2.
dicoding.com
0 Response to "Belajar Koding html Bagian 4: Membuat Tabel"
Post a Comment