tutorial html

Mudah Cara Membuat Tabel di HTML

Mudah Cara Membuat Tabel di HTML – Pada tutorial kali ini kita akan membahas mengenai cara membuat tabel di HTML (Hypertext Markup Language).

Tabel berfungsi untuk menampilkan data secara sistematis dan agar mudah dipahami oleh pembaca. Data yang ditampilkan dalam tabel dapat berupa data angka, text, gambar, maupun gabungan. Misalnya data laporan, biodata, dan lain sebagainya.

Untuk membuat sebuah tabel menggunakan HTML setidaknya kita membutuhkan tiga element, yaitu tag table, tag tr, dan tag td.

Tag <table> berfungsi sebagai pembungkus dari seluruh isi tabel. Untuk membuat baris pada tabel kita menggunakan tag <tr> yang merupakan singkatan dari table row (baris).

Sedangkan untuk menampung data yang akan ditampilkan menggunakan tag <td> yang merupakan singkatan dari table data.

Sebelum membuat sebuah tabel, sebaiknya kita menentukan terlebih dahulu jumlah baris dan kolom yang akan kita buat. Mari kita coba membuat tabel berukuran 2×2 (dua baris, dua kolom).

Hasilnya :

Mudah Cara Membuat Tabel di HTML

 

Loh kok cuma tulisan, mana garisnya?

Tampilan tersebut merupakan tampilan bawaan dari web browser untuk sebuah tabel. Lalu untuk memberikan efek garis, kita dapat menggunakan atribut bawaan HTML ataupun memanipulasinya menggunakan CSS.

Namun untuk kali ini kita akan menggunakan atribut – atribut HTML untuk menambahkan efek garis, sedangkan untuk efek CSS kita akan membahasnya di tutorial CSS nanti.

 

Atribut Border

Atribut border digunakan untuk memberikan efek garis pada tabel. Cara penulisannya sama dengan atribut HTML pada umumnya, yaitu dengan menambahkan namaAtribut = “value”.

Dalam kasus ini kita menggunakan atribut border=”1″ yang ditambahkan di dalam tag table. Nilai 1 pada atribut border adalah yang menentukan tebal dari garisnya, kamu bisa mengubahnya menjadi 2, 3, dan seterusnya.

Mari perhatikan contoh berikut:

Hasilnya :

Mudah Cara Membuat Tabel di HTML

 

Selain atribut border, HTML juga sudah menyediakan atribut – atribut lain yang dapat digunakan untuk memanipulasi tampilan dari tabel. Mari kita bahas satu – persatu.

 

Baca Juga : Perbedaan Tag dan Atribut di HTML

 

Atribut Cellspacing

Atribut cellspacing digunakan untuk mengatur jarak antara sel satu dengan sel yang lainnya. Penggunaanya pun hampir sama dengan atribut border yaitu ditambahkan di dalam tag table.

Atribut cellspacing di isi dengan angka dalam satuan pixel (px), misalnya cellspacing=”2″.

Hasilnya :

Mudah Cara Membuat Tabel di HTML

 

Atribut Cellpadding

Atribut cellpadding digunakan untuk mengatur jarak antara garis (border) dengan text atau element yang ada di dalamnya. Penggunaanya sama seperti atribut cellspacing, kita hanya perlu menambahkan atribut cellpadding=”value”.

Misalnya cellpadding=”2″ .

Hasilnya :

Mudah Cara Membuat Tabel di HTML

 

Atribut Rules

Atribut rules digunakan untuk membuat garis dibagian tertentu pada tabel. Nilai dari atribut rules dapat berupa rows, cols, all, dan none.

Hasilnya :

Mudah Cara Membuat Tabel di HTML

 

Sebenarnya masih banyak atribut yang dapat digunakan untuk memanipulasi tabel, seperti atribut width & height, atribut bgcolor, atribut align & valign, atribut  th, atribut rowspan & colspan, dan atribut lainnya.

Jika kamu tertarik untuk mempelajarinya kamu bisa mengunjungi situs resminya.

Baik mari sekarang kita coba untuk membuat sebuah tabel informasi sederhana mengenai nilai mahasiswa.

Hasilnya :

cara membuat tabel menggunakan html

 

Kamu dapat bereksperimen sendiri dengan memanfaatkan atribut yang sudah disediakan. Tentunya pembuatan tabel, model, jumlah baris & kolom disesuaikan dengan kebutuhan yang diperlukan.

Sekian untuk pembahasan mengenai cara membuat tabel di HTML kali ini. Jika kamu memiliki pendapat, ide, kritik, maupun saran silahkan tuliskan di kolom komentar yaa, dan jika dirasa artikel ini bermanfaat silahkan share agar orang lain pun dapat mengetahui ilmu yang kamu miliki :).

 

Leave a Reply

Your email address will not be published. Required fields are marked *