Tutorial Lengkap Belajar Html # Membuat Tabel Html

Pada tutorial kali ini kita akan belajar cara membuat sebuah tabel di html.
Tabel dapat kita gunakan untuk menampilkan ikhtisar sejumlah data atau informasi berupa kata atau bilangan agar lebih mudah dipahami user.

Tabel tersusun dari baris dan kolom,

Dan kotak hasil irisan dari kolom dan baris disebut sel.

Tutorial Lengkap Belajar Html # Membuat Tabel Html

Oke kita langsung saja ke tutorialnya,

Tag-Tag Penyusun Tabel Html

Berikut adalah tag-tag yang perlu diketahui ketika kita ingin membuat sebuah tabel di html

Tag	Keterangan
<table>	Digunakan untuk membuat sebuah tabel
<thead>	Digunakan untuk mendefinisikan header dari sebuah tabel
<tbody>	Digunakan untuk mendefinisikan isi dari sebuah tabel
<tfooter>	Digunakan untuk mendefinisikan footer dari sebuah tabel
<tr>	Digunakan untuk membuat sebuah baris
<th>	Digunakan untuk membuat sebuah header kolom
<td>	Digunakan untuk membuat cell dari tabel
<caption>	Digunakan untuk membuat sebuah caption pada tabel
<col>	Digunakan untuk mendesain kolom pada tabel
<colgroup>	Digunakan untuk mengelompokan kolom pada tabel

Cara membuat tabel html

Membuat tabel sederhana
Membuat tabel secara sederhana artinya kita hanya menggunakan tag-tag pokok dalam membuat tabel, yaitu tag <table>, <tr>, <th>dan <td>.
Contohnya,

Deretcode

<!DOCTYPE html> <html lang="en"> <head> <title>Deretcode.com</title> </head> <body> <table border="1"> <tr> <th>No</th> <th>Nama</th> </tr> <tr> <td>1</td> <td>Deret</td> </tr> <tr> <td>2</td> <td>Code</td> </tr> </table> </body> </html>

Output :
Membuat tabel sempurna
Membuat tabel secara sempurna artinya kita menambahkan tag <thead>,<tbody> dan <tfoot> untuk mengelompokan bagian header tabel, isi tabel dan footer tabel.
Contohnya,

Deretcode

<!DOCTYPE html> <html lang="en"> <head> <title>Deretcode.com</title> </head> <body> <table border="1"> <thead> <tr> <th>No</th> <th>Nama</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Deret</td> </tr> <tr> <td>2</td> <td>Code</td> </tr> </tbody> <tfoot> <tr> <td>Jumlan:</td> <td>2</td> </tr> </tfoot> </table> </body> </html>

Output :

Hasilnya memang terlihat sama, tapi tabel yang dibuat memiliki struktur yang lengkap jika kita liat kode tabel itu sendiri.
Note: Selalu pastikan tag <td> atau <th> selalu didalam tag <tr> tidak boleh terbalik

Tips dan trik membuat tabel html

Berikut adalah beberapa tips dan trik ketika kita ingin membuat sebuah tabel di html,

Menggabungkan cell

Untuk menggabungkan sel yang ada disebuah tabel kita dapat menggunakan atribut colspan dan rowspan.

colspan digunakan untuk menggabungkan sel ke arah samping (kolom) dan rowspan digunakan untuk menggabungkan sel kearah bawah(baris).

Contohnya,

Deretcode

Output :

Membuat nowrap pada konten cell

Ketika kita ingin teks yang ada di dalam sel tidak di wrapping jika teks tersebut panjang maka kita bisa menggunakan attribute nowrap,

Contohnya,

Deretcode

Output :

Memberi warna latar belakang pada cell

Memberikan warna latarbelakang pada cell dapat dilakukan dengan menggunakan attribute bgcolor .

Contohnya,

Deretcode

Output :

Note: bgcolor adalah attribute general, bisa di gunakan pada tag html apapun bukan hanya <td>

Membuat tabel dapat discroll

Jika tabel yang kita buat terlalu lebar sehingga tidak cukup untuk ditampilkan secara penuh dilayar, kita bisa membuat tabel tersebut dapat di scroll. Caranya adalah dengan membungkus tabel tersebut dengan elemen div dan tambahkan attribute style dengan property css overflow-x:auto untuk horizontal scrolling dan overflow-y:auto untuk vertical scrolling didalamnya.

Contohnya,

Deretcode

Output :

Sampai disini tutorial cara membuat tabel di html.

Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share dan jika ada hal yang ingin di tanyakan atau disampaikan silahkan tulis di kolom komentar.