Mode Malam
| Mode Tampilan
Penulis : admin

Home » Programming » Tutorial Lengkap Belajar Html # Membuat Tabel Html
Tutorial Lengkap Belajar Html # Membuat Tabel Html

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,

Tutorial Lengkap Belajar Html # Membuat Tabel Html

Dan kotak hasil irisan dari kolom dan baris disebut sel.

Tutorial Lengkap Belajar Html # Membuat Tabel Html

Oke kita langsung saja ke tutorialnya,

advertisement

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

  1. 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


    Output : loading

  2. 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


    Output : loading



    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

advertisement

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 : loading

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 : loading

Memberi warna latar belakang pada cell

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

Contohnya,

Deretcode


Output : loading

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 : loading

advertisement

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.

Tags: #table #html #tutorial
Bagikan :

Komentar:

Silahkan berkomentar dengan baik dan bijak!

Name * :
Email :
Website :
Comment :


This website uses cookies to ensure you get the best experience on our website

learn more