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