Belajar Membuat Tabel Dengan HTML

Senin, 09 Januari 2023

Belajar membuat tabel dengan Tag <table> yang merupakan tag HTML yang digunakan untuk membuat tabel pada sebuah halaman web. Berikut ini adalah penjelasan lengkap tentang tag <table> beserta contoh penggunaannya.

Sumber foto: www.pexels.com (oleh Danny Meneses)

Penggunaan dasar tag <table>, Tag <table> digunakan untuk membuat sebuah tabel, dan tag ini biasanya terdiri dari beberapa elemen lain yang membantu menyusun tabel tersebut, seperti <tr> (table row) untuk membuat baris tabel, <td> (table data) untuk membuat sel tabel, dan <th> (table header) untuk membuat sel header tabel.

Berikut ini adalah contoh sederhana penggunaan tag <table> dan tag <table> ini di berikan border agar garis tabel muncul, Salin semua kode di bawah ini dan save dengan nama tabel.html (untuk menuliskan kode HTML ini dapat menggunakan notepad):

<html> <head> <title>Contoh Halaman Web Dengan HTML</title> </head> <body> <div class="article" style="background-color:orange; width:400px; height:400px;"> <h1>Contoh Tabel</h1> <p>Ini adalah contoh tabel dari artikel.</p> <table border="1"> <tr> <th>Judul Artikel</th> <th>Penulis</th> </tr> <tr> <td>Belajar HTML Part 1</td> <td>Abdul Muis</td> </tr> <tr> <td>Belajar HTML Part 2</td> <td>Budi Gunawan</td> </tr> </table> </div> </body> </html>

Selain elemen-elemen di atas, tag <table> juga memiliki beberapa atribut yang bisa kita gunakan untuk mengontrol tampilan tabel. Berikut ini adalah beberapa atribut yang sering digunakan pada tag <table>:

border: atribut ini digunakan untuk mengontrol ketebalan garis yang akan ditampilkan di sekitar tabel. Nilai yang bisa kita gunakan adalah bilangan bulat positif, seperti 1, 2, dan seterusnya.
cellpadding: atribut ini digunakan untuk mengontrol jarak (dalam pixel) antara isi sel tabel dengan batas-batas sel tersebut.
cellspacing: atribut ini digunakan untuk mengontrol jarak (dalam pixel) antara sel-sel tabel.
width: atribut ini digunakan untuk mengontrol lebar tabel (dalam pixel atau persen).
height: atribut ini digunakan untuk mengontrol tinggi tabel (dalam pixel).

Penggunaan tag <table> di atas akan menghasilkan tabel seperti berikut, Ketika halaman web ini dijalankan di browser web (untuk menjalankannya klik file tabel.html yang telah dibuat di atas), akan terlihat hasilnya seperti:

Anda Mungkin Menyukai Postingan Terkait:

Kumpulan Aplikasi Berbasis Web

Belajar Membuat Tabel Dengan HTML

Tidak ada komentar:

Posting Komentar