Sabtu, 07 Desember 2013
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.
<table
border="1">
<tr>
<td>Cell
1 - Baris 1 Kolom 1</td>
<td>Cell
2 - Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Cell
3 - Baris 2 Kolom 1</td>
<td>Cell
4 - Baris 2 Kolom 2</td>
</tr>
<tr>
<td>Cell
5 - Baris 3 Kolom 1</td>
<td>Cell
6 - Baris 3 Kolom 2</td>
</tr>
</table>
|
Ini hasilnya :
Cell 1 – Baris 1 Kolom 1
|
Cell 2 – Baris 1 Kolom 2
|
Cell 3 – Baris 2 Kolom 1
|
Cell 4 – Baris 2 Kolom 2
|
Cell 5 – Baris 3 Kolom 1
|
Cell 6 – Baris 3 Kolom 2
|
Untuk border pada tabel
tersebut bisa digan 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 75% dari lebar dokumen dan lebar kolom masing 50% dengan
tinggi pada baris pertama adalah 40px.
<table
border="1" width="75%">
<tr>
<td
style="width:50%;height:40px;">Baris 1 Kolom 1</td>
<td>Baris
1 Kolom 1</td>
</tr>
<tr>
<td>Baris
2 Kolom 1</td>
<td>Baris
2 Kolom 2</td>
</tr>
<tr>
<td>Baris
3 Kolom 1</td>
<td>Baris
3 Kolom 2</td>
</tr>
</table>
|
Hasilnya sebagai berikut :
Baris 1 Kolom 1
|
Baris 1 Kolom 1
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Baris 3 Kolom 1
|
Baris 3 Kolom 2
|
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.
<table
border="1" width="75%">
<tr>
<td
colspan="2">Gabungan Kolom 1&2 pada Baris 1</td>
</tr>
<tr>
<td
style="width:50%">Baris 2 Kolom 1</td>
<td>Baris
2 Kolom 2</td>
</tr>
<tr>
<td>Baris
3 Kolom 1</td>
<td>Baris
3 Kolom 2</td>
</tr>
</table>
|
Hasil :
Gabungan Kolom 1&2 pada Baris 1
|
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Baris 3 Kolom 1
|
Baris 3 Kolom 2
|
Sedangkan untuk
menggabungkan baris dalam tabel digunakan atribut rowspan.
<table
border="1" width="75%">
<tr>
<td
style="width:50%" rowspan="2">Gabungan Baris
1&2 pada Kolom 1</td>
<td>Baris
1 Kolom 2</td>
</tr>
<tr>
<td>Baris
2 Kolom 2</td>
</tr>
<tr>
<td>Baris
3 Kolom 1</td>
<td>Baris
3 Kolom 2</td>
</tr>
</table>
|
Hasil :
Gabungan Baris 1&2 pada Kolom 1
|
Baris 1 Kolom 2
|
Baris 2 Kolom 2
|
|
Baris 3 Kolom 1
|
Baris 3 Kolom 2
|
Untuk mengatur posisi
cell dalam tabel digunakan atribut cellpadding dan cellspacing.
Cellpadding adalah untuk
pengaturan sisi dari bagian dalam cell.
<table
border="1" width="75%" cellpadding="8">
<tr>
<td
style="width:50%;">Baris 1 Kolom 1</td>
<td>Baris
1 Kolom 2</td>
</tr>
<tr>
<td>Baris
2 Kolom 1</td>
<td>Baris
2 Kolom 2</td>
</tr>
</table>
|
Hasil :
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Sedangkan Cellspacing
adalah pengaturan sisi dari bagian luar cell.
<table
border="1" width="75%" cellspacing="8">
<tr>
<td
style="width:50%">Baris 1 Kolom 1</td>
<td>Baris
1 Kolom 2</td>
</tr>
<tr>
<td>Baris
2 Kolom 1</td>
<td>Baris
2 Kolom 2</td>
</tr>
</table>
|
Hasil :
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Membuat Titel pada Tabel
Untuk tabel yang lengkap
dengan titel, kita bisa menambahkan tag <caption> tepat setelah tag
<table> dan kita juga bisa mengganti td dengan th (table heading)sebagai
titel dari baris maupun kolom.
Caption dan th akan
secara otomatis berada pada posisi tengah dan th akan menghasilkan tulisan
tebal.
<table
border="1" width="75%">
<caption>Disini
adalah titel tabel ini</caption>
<tr>
<th
style="width:50%;">Header Kolom 1</th>
<th>Header
Kolom 2</th>
</tr>
<tr>
<td>Baris
1 Kolom 1</td>
<td>Baris
1 Kolom 2</td>
</tr>
<tr>
<td>Baris
2 Kolom 1</td>
<td>Baris
2 Kolom 2</td>
</tr>
</table>
|
Hasil :
Header Kolom 1
|
Header Kolom 2
|
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
Membuat
background pada tabel
Untuk membuat background pada tabel kita gunakan atribut style dengan
properti background.
Berikut adalah contoh table dengan
background warna kuning muda dengan heading warna merah.
<table
style="background:#ffc" width="75%"
border="1">
<tr>
<th
style="background:red;width:50%;">Header Kolom 1</th>
<th
style="background:red;">Header Kolom 2</th>
</tr>
<tr>
<td>Baris
1 Kolom 1</td>
<td>Baris
1 Kolom 2</td>
</tr>
<tr>
<td>Baris
2 Kolom 1</td>
<td>Baris
2 Kolom 2</td>
</tr>
</table>
|
Header Kolom 1
|
Header Kolom 2
|
Baris 1 Kolom 1
|
Baris 1 Kolom 2
|
Baris 2 Kolom 1
|
Baris 2 Kolom 2
|
0 Comments:
Subscribe to:
Posting Komentar (Atom)
