Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Cara Membuat Tabel Pada HTML


Assalamualaikum Wr.Wb.

Salam hangat para blogger dan pembaca sekalian, semoga sejahtera dan sehat selalu. Pada kesempatan kali ini saya akan memberikan artikel pada anda mengenai Cara Membuat Tabel Pada HTML. Kita langsung saja pada topik utama kita hari ini.

1. Cara Membuat Tabel
Dalam pembuatan website, tabel berfungsi untuk menampilkan informasi-informasi secara terstruktur, ringkas, dan mudah dibaca serta tampilannya lebih menarik. Tabel biasanya digunakan untuk menampilkan data dari database. Dalam membuat tabel setidaknya dibutuhkan 4 tag yang harus digunakan yaitu >, , th>,
.

Tag-Tag Utama Untuk Pembuatan Tabel
Tag
Keterangan
table
table digunakan untuk memulai membuat tabel
tr
table row berfungsi untuk menyatakan suatu baris didalam tabel.
th
table header digunakan untuk memberi judul baris atau kolom dalam suatu tabel yang dicetak tebal dan posisi defaultnya berada ditengah
td
table data digunakan untuk menyatakan data atau isi dari tabel. Posisi default teksnya di kiri

Berikut ini contoh membuat tabel dengan tag-tag tersebut;
Buka browser anda dan lihat hasilnya akan tampak seperti berikut ini;
Tapi kalau kita lihat dari gambar diatas tabel tersebut tidak memiliki garis. Untuk menampilkan garis tersebut kita harus menggunakan properti border dalam tag table>. Sekarang coba anda tambahkan properti border="1" pada tag .



Hasilnya akan tampak seperti dibawah ini;
2. Cara Mengatur Lebar dan Tinggi Kolom Pada Tabel
Selanjutnya kita mencoba mengatur ukuran lebar dan tinggi kolom pada tabel. Properti yang harus digunakan untuk mengatur lebar dan tinggi kolom adalah height dan width. Berikut ini saya menyediakan contohnya.
Contoh mengatur lebar kolom;
Hasil dari kode tersebut adalah seperti ini;
Contoh mengatur tinggi kolom;
Hasil dari kode tersebut adalah seperti ini;
3. Mengatur Lebar Tabel
Setelah kita mencoba mengatur lebar kolom pada tabel, sekarang kita akan mencoba mengatur lebar tabel itu sendiri. Properti yang digunakan masih sama yaitu width. Properti width ini ditempatkan atau dituliskan dalam tag
. Berikut ini contohnya;
Hasil dari kode tersebut adalah seperti ini;
4. Mengatur Posisi Tabel dan Posisi Teks dalam Tabel
Selanjutnya kita akan mencoba Mengatur Posisi Tabel, dan posisi teks dalam tabel. Properti yang dibutuhkan dalam mengatur posisi ini adalah properti Align. Properti ini bisa digunakan untuk mengatur posisi tabel dan mengatur posisi teks dalam tabel, perbedaannya hanyalah tempat penulisannya. Untuk mengatur posisi tabel dituliskan di bagian tag
, sedangkan untuk mengatur posisi teks, dituliskan didalam tag
. Properti Align ini terdapat tiga value sering digunakan yaitu left, right, dan center. Berikut ini contohnya; Hasil dari kode diatas adalah seperti dibawah ini
Klik untuk memperbesar gambar

Nah mungkin segitu saja yang bisa saya tulis dalam artikel mengenai Cara Membuat Tabel Pada HTML ini. Sebenarnya masih ada yang perlu dibahas lagi mengenai cara membuat tabel ini, tapi mengingat saya mempunyai tugas yang belum selesai, saya akan simpan saja untuk postingan yang selanjutnya.
Semoga artikel ini bisa berguna dan bermanfaat bagi kalian yang sedang belajar tentang bahasa MarkUp ini. Nah, kalau menurut anda artikel ini bermanfaat tidak ada salahnya untuk membagikan artikel ini kepada teman-teman kalian, satu klik tombol share dan like sangat berarti bagi. Terima Kasih. Jangan lupa komentar yah..
Wassalamualaikum Wr.Wb

 


This post first appeared on Virtual Akademik, please read the originial post: here

Share the post

Cara Membuat Tabel Pada HTML

Email
Facebook
Pinterest
Twitter
×

Subscribe to Virtual Akademik

Get updates delivered right to your inbox!

Thank you for your subscription

×