Assalamualaikum
Wr.Wb
Membuat Tabel Dengan HTML
Pertama . . . . . ketikan listing html pada notepad dan simpan dengan
nama.html
Untuk membuat table yang sederhana ada 3 elemen
utama yaitu table, tr dan td. Tag <table> adalah untuk membuat tabel
kemudian di ikuti dengan tag <tr> (table rows) adalah untuk membuat baris
pada tabel kemudian tag <td> (table data) adalah untuk membuat kolom pada
tabel, kolom-kolom hasil dari tr dan td ini disebut dengan table cell yaitu
sebagai lokasi dimana kita memasukkan data-data yang akan di tampilkan.
Berikut ini
merupakan contoh tabel 3 baris dan 2 kolom.
<html>
<table border="1">
<tr>
<td> Berita Politik</td>
<td> Berita IPTEK</td>
</tr>
<tr>
<td> Seputar Religius</td>
<td> Seputar Olahraga</td>
</tr>
<tr>
<td> Aneka Info</td>
<td> Aneka Hiburan</td>
</tr>
</table>
<tr>
<td> Berita Politik</td>
<td> Berita IPTEK</td>
</tr>
<tr>
<td> Seputar Religius</td>
<td> Seputar Olahraga</td>
</tr>
<tr>
<td> Aneka Info</td>
<td> Aneka Hiburan</td>
</tr>
</table>
</html>
Nah hasilnya seperti dibawah ini :
Untuk border pada tabel tersebut bisa
digunakan ukuran atau bahkan dihilangkan dengan cara
merubah angka pada border-nya.
Mengatur Lebar dan Tinggi Tabel
Untuk mengatur
lebar table digunakan atribut width atau bisa juga dengan style CSS dengan
properti width. Untuk lebar dan tinggi dari td kita gunakan atribut style
dengan properti width dan height.
Berikut adalah
contoh tabel dengan lebar 50% dari lebar dokumen dan lebar kolom masing
50% dengan tinggi pada baris pertama adalah 40px.
<html>
<table
border="1" width="50%">
<tr>
<td
style="width:50%;height:40px;"> Berita Politik</td>
<td>
Berita IPTEK</td>
</tr>
<tr>
<td>
Seputar Religius</td>
<td>
Seputar Olahraga</td>
</tr>
<tr>
<td>
Aneka Info</td>
<td>
Aneka Hiburan</td>
</tr>
</table>
</html>
Hasilnya sebagai berikut :
Untuk satuan
ukuran widht dan height dari atribut maupun style tersebut kita dapat
menggunakan px atau %.
Menggabungkan
Kolom dan Baris
Table Cell atau
baris dan kolom dari tabel tersebut dapat kita gabungkan sesuai kebutuhan
bentuk tabel yang diinginkan.
Untuk
menggabungkan kolom dalam tabel digunakan atribut colspan.
<html>
<table border="1"
width="50%">
<tr>
<td
colspan="2">Gabungan Berita Politik&Berita
IPTEK</td>
</tr>
<tr>
<td>
Seputar Religius</td>
<td>
Seputar Olahraga</td>
</tr>
<tr>
<td>
Aneka Info</td>
<td>
Aneka Hiburan</td>
</tr>
</table>
</html>
Hasil :
Sedangkan untuk menggabungkan baris dalam tabel digunakan atribut rowspan.
<html>
<table border="1"
width="50%">
<tr>
<td
style="width:50%" rowspan="2">Gabungan Berita
Politik&Seputar Religius</td>
<td>
Berita IPTEK</td>
</tr>
<tr>
<td>
Seputar Olahraga</td>
</tr>
<tr>
<td>
Aneka Info</td>
<td>
Aneka Hiburan</td>
</tr>
</table>
</html>
Hasil :
Mengatur Jarak Kolom pada Tabel
Untuk mengatur
posisi cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding
adalah untuk pengaturan sisi dari bagian dalam cell.
<html>
<table border="1"
width="50%" cellpadding="8">
<tr>
<td
style="width:50%;">Berita Politik</td>
<td>
Berita IPTEK</td>
</tr>
<tr>
<td>
Seputar Religius</td>
<td>
Seputar Olahraga</td>
</tr>
<tr>
<td>
Aneka Info</td>
<td>
Aneka Hiburan</td>
</tr>
</table>
</html>
Hasil :
Sedangkan
Cellspacing adalah pengaturan sisi dari bagian luar cell.
<html>
<table border="1"
width="50%" cellspacing="8">
<tr>
<td
style="width:50%;">Berita Politik</td>
<td>
Berita IPTEK</td>
</tr>
<tr>
<td>
Seputar Religius</td>
<td>
Seputar Olahraga</td>
</tr>
<tr>
<td>
Aneka Info</td>
<td>
Aneka Hiburan</td>
</tr>
</table>
</html>
Hasil :
Membuat Tittle pada Tabel
Untuk tabel yang
lengkap dengan tittle, kita bisa menambahkan tag
<caption> tepat setelah tag <table> dan kita juga bisa mengganti td
dengan th (table heading)sebagai tittle dari baris maupun kolom.
Caption dan th
akan secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan
tebal.
<html>
<table
border="1" width="50%">
<caption>Tittle</caption>
<tr>
<th
style="width:50%;">Berita Politik</th>
<th> Berita IPTEK</th>
</tr>
<tr>
<td>
Seputar Religius</td>
<td> Seputar Olahraga</td>
</tr>
<tr>
<td>
Aneka Info</td>
<td>
Aneka Hiburan</td>
</tr>
</table>
</html>
Hasil :
Menghilangkan
Garis tabel
Untuk
menghilangkan garis tabel menggunakan <table border="0">
Contohnya:
<html>
<table border="0" width="50%">
<caption>Tittle</caption>
<tr>
<th
style="width:50%;">Berita Politik</th>
<th>
Berita IPTEK</th>
</tr>
<tr>
<td> Seputar
Religius</td>
<td>
Seputar Olahraga</td>
</tr>
<tr>
<td> Aneka Info</td>
<td> Aneka Hiburan</td>
</tr>
</table>
</html>
Hasil:
Sekian . . . . . dan Terimakasih
Wassalam
Tidak ada komentar:
Posting Komentar