Belajar HTML Part 13: Membuat Tabel Di HTML

Cara Membuat Tabel Di HTML

Selamat datang di artikel belajar HTML dasar untuk pemula bagian 13, yaitu cara membuat tabel di HTML. Pada bagian ini kamu akan mengetahui apa itu tabel dan bagaimana proses untuk membuat tabel di HTML.

Tabel pada HTML digunakan untuk menampilkan data yang tabular, sama seperti kamu membuat tabel di microsoft word atau microsoft excel.
Data tabular adalah sebuah data deskriptif yang menyatakan nilai dari data grafis yang diterangkan, data ini biasanya berbentuk tabel yang terdiri dari kolom dan baris.

Contohnya jika kamu ingin membuat sebuah anggaran biaya, menampilkan skor pada kompetisi atau membuat daftar nilai siswa, kamu bisa menggunakan tabel agar data-data tersebut terstruktur dengan baik.

Cara Membuat Tabel di HTML

Sebelum membuat tabel di HTML, ada baiknya kamu memahami strukturnya terlebih dahulu. Struktur pada tabel biasanya terdiri dari 3 tag, yaitu tag <table>, tag <tr> dan tag <td>.

Tag Penjelasan Fungsi
<table> Untuk membuat sebuah tabel
<tr> Table Dow Untuk membuat sebuah baris pada tabel
<td> Table Data Untuk membuat sebuah kolom pada tabel

Baris Pada HTML

Kolom Pada HTML

Setelah kamu mendapatkan gambarannya, sekarang kita membuat tabelnya. Berikut adalah contoh kodenya.

Hasil Membuat Tabel Di HTML

Sampai tahap ini kamu sudah berhasil membuat sebuah tabel, tapi sayangnya tabel yang kamu buat tidak memiliki garis.

Kamu harus memasukan atribut border seperti contoh dibawah ini untuk membuat garis pada tabel yang sudah kamu buat.

Atribut Border Pada Tabel HTML

Atribut border digunakan untuk mengatur ketebalan garis tepi pada tabel, sedangkan angka “1” menunjukan ukuran ketebalan garis. Semakin tinggi angkanya maka semakin tebal garis tepi pada tabel.
Sekarang, tabel yang kamu buat sudah berhasil diberi garis. Tapi, tabelnya terlihat kurang bagus karena jaraknya terlalu rapat.
Mari kita buat tabelnya sekali lagi, tetapi dengan memberikannya sebuah jarak pada kolomnya.

Cara Mengatur Ukuran Tabel

Untuk mengatur ukuran pada tabel, kamu perlu menambahkan atribut cellpadding. Penempatan atributnya sama seperti atribut border sebelumnya. Berikut adalah contoh kodenya.

Cara Mengatur Ukuran Pada Tabel Di HTML

Tabel yang dibuat masih terlihat sederhana, untuk mempercantik HTML kamu perlu belajar css dan menambahkan css ke dalam tabel HTML agar tampilan tabel terlihat lebih menarik.

Leave a Reply