Cara Mudah Membuat Tabel dan Fungsi Atribut yang ada di Tag Tabel Part 1

Cara Mudah Membuat Tabel dan Fungsi Atribut yang ada di Tag Tabel - hai Sahabat Bocah Komputer, apa kabar?? penulis lama ini gak update soalnya masih sibuk di kerjaan yang nyata. hehe. kali ini penulis akan membahas tentang Bagaimana Cara Membuat Tabel Menggunakan HTML. Nah Script ini juga bisa sahabat Bocah Komputer terapkan di Blog sahabat. 

Sebelum kita lanjut ke scripnya. apa sih tabel itu??

Tabel merupakan sebuah daftar yang berisi tentang sejumlah informasi yang berupa kata-kata dan bilangan, yang tersusun berturut ke bawah dalam kolom dan baris tertentu. seperti contoh daftar Nilai Ujian dan lain-lain. pastinya yang sahabat Bocah Komputer tidak asing lagi. nah yuk langsung saja kita simak Bagaimana Cara Membuat Tabel di HTML tersebut:

Tag-Tag yang berkaitan dengan Tabel.

yang pertama yang kita berhatikan adalah Tag-Tag yang dapat di gunakan atau atribut yang bisa di sandingkan dengan HTML. nah berikut penulis rangkum beberapa Tag yang bisa kita gunakan beserta Fungsinya.

TagKeterangan
< T A B L E >.....< / T A B L E >Mengawali dan mengakhiri sebuah table
< CAPTION >.....< / CAPTON>Menentukan judul pada table
< TR >.... < / TR >Membuat sebuah baris dalam table 
< TH >.... < / TH >Membuat judul kolom 
< TD >.....< / TD >Membuat sebuah sel data

Sebagai contoh perhatikan Script di bawah ini:

< HTML>
< HEAD>
< TITLE>tabel sederhana </TITLE>
< /HEAD>
< BODY>
< TABLE>
< CAPTION> daftar harga buah </CAPTION>
< TR>< TH> nama < /TH>< TH> harga < /TH>< /TR>
< TR>< TD> apel < /TD>< TD> 30.000 </TD>< /TR>
< TR>< TD> durian < /TD>< TD> 50.000 < /TD>< /TR>
< TR>< TD> semangka < /TD>< TD> 45.000 < /TD>< /TR>
< TR>< TD> melon < /TD>< TD> 40.000 < /TD>< /TR>
< /TABLE>
< /BODY>
< /HTML>

Maka hasil yang di peroleh dari script di atas sebagai berikut :

Membuat Garis Pada Tabel.

Cara Membuat garis pada Tabel ini kita bisa menggunakan perintah BORDER. pada dasarnya apabila kita tidak menambahkan perintah ini pada Script yang kita buat. maka perintah ini akan di anggap sama dengan 0 (Nol) artinya tidak akan di aktifkan atau tidak di kasih garis pada tabel yang kita buat. berikut cara penulisan atribut ini pada Tag Table.
< T A B L E       B O R D E R = " Bilangan "> .....< / T A B L E >

Perhatikan pada contoh Berikut :

< HTML>
< HEAD>
< TITLE>tabel nsederhana </TITLE>
< /HEAD>
< BODY>
< TABLE BORDER ="1">
< CAPTION> daftar harga buah </CAPTION>
< TR>< TH> nama < /TH>< TH> harga < /TH>< /TR>
< TR>< TD> apel < /TD>< TD> 30.000 </TD>< /TR>
< TR>< TD> durian < /TD>< TD> 50.000 < /TD>< /TR>
< TR>< TD> semangka < /TD>< TD> 45.000 < /TD>< /TR>
< TR>< TD> melon < /TD>< TD> 40.000 < /TD>< /TR>
< /TABLE>
< /BODY>
< /HTML>
Maka hasil yang di peroleh dari script di atas sebagai berikut :


bisa kita lihat perbedaannya dari hasil yang di peroleh pada gambar di atas.

Membuat Judul di bawah Tabel

Seperti yang penulis jelaskan di atas, bahwa tag CAPTION memiliki fungsi untuk membuat judul pada tabel atau di dalam tabel. berikut cara penulisan tag CAPTION di script Tabel. kita harus menambahkan atribut ALIGN = “BOTTOM” pada tag CAPTION. mari kita perhatikan contoh script di bawah ini.

< HTML>
< HEAD>
< TITLE>tabel nsederhana </TITLE>
< /HEAD>
< BODY>
< TABLE BORDER ="1">
< CAPTION ALIGN = "BOTTOM"> daftar harga buah </CAPTION>
< TR>< TH> nama < /TH>< TH> harga < /TH>< /TR>
< TR>< TD> apel < /TD>< TD> 30.000 </TD>< /TR>
< TR>< TD> durian < /TD>< TD> 50.000 < /TD>< /TR>
< TR>< TD> semangka < /TD>< TD> 45.000 < /TD>< /TR>
< TR>< TD> melon < /TD>< TD> 40.000 < /TD>< /TR>
< /TABLE>
< /BODY>
< /HTML>
Maka hasil yang di peroleh dari script di atas sebagai berikut :
sampai di sini dulu pembahasan tentang cara membuat tabel dan beberapa atribut yang bisa kita gunakan. di lain kesempatan sya akan lanjut dengan atribut tabel yang lain karena masih banyak atribut yang bisa kita gunakan... terimakasih pada sahabat Bocah Komputer yang sudah hadir di blog ini. jangan lupa untuk terus kunjungi blog penulis ini yang insyaAllah memberi manfaat. dan terus dukung penulis untuk tetap aktif dan update dengan cara klik iklan yang muncul....

Berlangganan update artikel terbaru via email:

0 Response to "Cara Mudah Membuat Tabel dan Fungsi Atribut yang ada di Tag Tabel Part 1"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel