Di HTML sebuah tabel didefinisikan dengan menggunakan tag <table>
Pada HTML itu sendiri untuk membuah sebuah tabel terdapat 4 tag , meskipun kebanyakan orang dalam membuah sebuah tabel mereka sering menggunakan 3 tag tapi di dalam HTML tidak ada masalah.
Disini kita akan menjelaskan dengan menggunakan 4 tag dalam membuat sebuah tabel, tag tambahan yaitu <th>
Tag
Keterangan
<table>
Untuk memulai sebuah tabel
<tr>
Mendefinisikan bari dari sebuah tabel
<th>
Mendefinisikan judul dari sebuah tabel secara default, membuat huruf pada judul menjadi tembal dan posisi menjadi rata tengah
<td>
Mendefinisikan isi dari sebuah tabel
Contoh Tabel
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML table
</title>
</head>
<body>
Nama
Alamat
Umur
Andi
jakarta
20
Deni
Bali
14
Sinta
Pekanbaru
24
</body>
</html>
Diatas kita membuat border="1" itu artinya kita menampilkan garis dari suatu tabel dengan 1 px, jika kamu tidak ingin memberi garis pada tabel, kamu bisa membuat border="0" atau jika kamu ingin membuat garis menjadi lebih tebal kamu bisa menaikan angka pada border sesuai keinginan masing-masing.
Mengatur lebar tabel
Selain kita bisa membuat ketebalan garis, kita juga bisa mengeset lebar dari sebuah tabel tergantung keinginan
Berikut ini cara membuat lebar sebuah tabel.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML table
</title>
</head>
<body>
Nama
Alamat
Umur
Andi
jakarta
20
Deni
Bali
14
Sinta
Pekanbaru
24
</body>
</html>
Diatas kita buat width="100%" itu artinya kita membuat lebar tabel menjadi full width, jika kita ingin membuat lebar tabel menjadi separoh halaman kita bisa membuat tabel menjadi 50%, sesuaikan kebutuhan dan keinginan masing-masing.
Membuat garis Collapsed Borders
Collapsed Borders kita gunakan untuk memper cantik garis dari suatu tabel yang kita buat, agar garis pada tabel tidak terlihat seperti default. border-collapse itu sendiri adalah bagian dari atribut style, jadi untuk menambahkan border-collapse kita harus menggunakan atribut style pada tabel.
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML table
</title>
</head>
<body>
Nama
Alamat
Umur
Andi
jakarta
20
Deni
Bali
14
Sinta
Pekanbaru
24
</body>
</html>
Colspan and Rowspan Attributes
Atribut Colspan kita gunakan apabilah kita akan menggabungkan dua kolom atau lebih menjadi satu kolom.
Berikut cara menggunakan atribut colspan
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML table
</title>
</head>
<body>
Nama
Alamat
Umur
Andi
jakarta
20
Deni
Bali
14
Sinta
Pekanbaru
24
Hasil Colspan
</body>
</html>
colspan="3" diatas artinya kita menggabungkan tiga kolom menjadi satu kolom.
Selanjutnya kita akan menggunakan atribut rowspan, Atribut rowspan kita gunakan apabilah kita akan menggabungkan dua baris atau lebih menjadi satu baris.
Berikut cara menggunakan atribut rowspan
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML table
</title>
</head>
<body>
Nama
Alamat
Umur
Andi
jakarta
20
Deni
Bali
14
Sinta
Pekanbaru
24
</body>
</html>
Kita juga dapat menggunakan atribut rowspan dan colspan dalam satu tabel.
Cara penggunaanya seperti ini
Script HTML
<!DOCTYPE html>
<html>
<head>
<title>
Belajar HTML table
</title>
</head>
<body>
Shared
Shared
Shared
Shared
