Assalamu'alaikum warahmatullahi wabarakatuh
Selamat pagi, Selamat Siang, Selamat Malam semuanya.
Kali ini kita akan membahas tentang bagaimana cara pembuatan tabel menggunakan HTML. Untuk membuat tampilan website kita lebih bagus maka kita dapat menggunakan tabel agar informasi yang ditampilkan di web kita lebih teratur, mudah dibaca , ringkas dan pastinya akan lebih menarik.
Untuk membuat tabel, HTML menyediakan tag <TABLE>. Dalam tag <TABLE> terdapat attribute seperti berikut :
Atribut
|
Fungsi
|
| Border | Menentukan ukuran border /garis tabel |
| WIDTH | Menentukan lebar tabel |
| HEIGHT | Menentukan tinggi tabel /garis tabel |
| BGCOLOR | Menentukan background tabel/garis tabel |
| BACKGROUND | Menentukan gambar yang digunakan untuk background tabel/garis tabel |
| COLOR | Untuk mengatur warna suatu sel dalam tabel |
| ALIGN | Mengatur bentuk perataan horisontal |
| VALIGN | Mengatur bentuk perataan vertikal |
| ROWSPAN | Menggabungkan beberapa baris |
| COLSPAN | Menggabungkan beberapa kolom |
| CELLSPACING dan CELLSPADDING | Mengatur spasi antarsel dan spasi dalam sel |
Membuat tabel sederhana
Perhatikan video pembuatan Tabel menggunakan HTML dibawah ini, selamat menikmati :
Membuat judul tabel
Judul tabel dibedakan menjadi tiga macam , yaitu judul tabel, judul kolom table dan judul baris table.
Judul tabel atau biasa disebut caption terletak dibagian luar tabel, caption bias berada dibawah atau diatas tabel, tetapi tidak bisa dibagian kiri atau kanan luar tabel. Judul tabel dibuat dengan menggunakan elemen CAPTION yang biasanya diletakkan setelah tag awal <TABLE>.
Judul kolom atau judul baris dibuat dengan elemen yang sama yaitu elemen Table Header <TH>. Judul kolom terletak pada sel disebelah kiri atau kolom pertama suatu tabel, sedangkan judul baris terletak pada baris pertama suatu tabel. Untuk membuat judul kolom gantilah atribut <TD>..</TD> pada kolom pertama dengan tag <TH...</TH>. Sedangkan untuk membuat judul baris gantilah atribut <TD>...</TD> pada kolom pertama dengan tag <TH>...</TH>
Contoh - Listing HTML :
<HTML><HEAD>
<TITLE> *** MEMBUAT TABEL *** </TITLE>
</HEAD>
<BODY>
<table border=1>
<caption align=top>
<b> DAFTAR ALAMAT </B>
</caption>
<tr>
<th>No. </th>
<th> Nama </th>
<th> Alamat </th>
</tr>
<tr>
<td>1.</td>
<td> Soraya Khairani</td>
<td> Jl. Asrama 2 </td>
</tr>
<tr>
<td>2.</td>
<td>Melani Arsyi</td>
<td>Jl. Aksara 78 </td>
</tr>
</table>
</BODY>
</HTML>
<TITLE> *** MEMBUAT TABEL *** </TITLE>
</HEAD>
<BODY>
<table border=1>
<caption align=top>
<b> DAFTAR ALAMAT </B>
</caption>
<tr>
<th>No. </th>
<th> Nama </th>
<th> Alamat </th>
</tr>
<tr>
<td>1.</td>
<td> Soraya Khairani</td>
<td> Jl. Asrama 2 </td>
</tr>
<tr>
<td>2.</td>
<td>Melani Arsyi</td>
<td>Jl. Aksara 78 </td>
</tr>
</table>
</BODY>
</HTML>
Hasil Listing-1:
Mengatur Lebar dan Tinggi Suatu Tabel
Lebar suatu tabel diatur dengan menggunakan atribut WIDTH dan untuk tinggi table dengan atribut HEIGHT. Jika atribut width dan height digunakan dalam elemen TABLE nilainya menunjukkan lebar dan tinggi tabel terhadap browser sedang jika digunakan pada elemen TH dan TD, nilainya merupakan lebar dan tinggi dari suatu tabel. Nilai dari atribut tersebut ada dua yaitu menggunakan ukuran % (max 100%) dan ukuran pixel. Untuk lebih jelasnya perhatikan contoh berikut :
0 komentar:
Posting Komentar