Seperi yang kita ketahui fungsi dari table ini sangat membantu sekali dalam membuat blog
. Dari bentuknya yang sederhana kadang membuat kita lupa cara
membuatnya.Untuk itu sengaja saya posting sekedar untuk mengingatkan
siapa tahu jadi lupa.Untuk sobat yang kadang suka lupa juga semoga cara membuat table ini bisa sedikit membantu.
Langsung saja supaya cepat ingat kita buat saja table nya.
Tag yang biasa digunakan untuk membuat table:
- <Table></Table>
<tr></tr> Merupakan baris table.
<td></td> Jumlah kolom dalam baris table yang letaknya di dalam tr
Satu baris table dengan satu kolom table: Tag yang kita buat seperti ini: <table border="1" width="200"> <tr> <td>Kolom 1</td> </tr> </table> Maka akan menghasilkan seperti ini:
| Satu baris table dengan dua kolom table: Tag yang kita buat seperti ini: <table border="1" width="200"> <tr> <td>Kolom 1</td> <td>Kolom 2</td> </tr> </table> Maka akan menghasilkan seperti ini:
|
Dua baris table dengan masing -masing satu kolom table: Tag yang kita buat seperti ini: <table border="1" width="200"> <tr> <td>Kolom 1</td> </tr> <tr> <td>Kolom 1</td> </tr> </table> Maka akan menghasilkan seperti ini:
| Dua baris table dengan masing-masing dua kolom table: Tag yang kita buat seperti ini: <table border="1" width="200"> <tr> <td>Kolom 1</td> <td>Kolom 2</td> </tr> <tr> <td>Kolom 1</td> <td>Kolom 2</td> </tr> </table> Maka akan menghasilkan seperti ini:
|
cellpandding.
Cellspasing : adalah jarak antara kolom.
Cellpadding : adalah jarak di dalam kolom.
Kita tambahkan juga colspan yaitu untuk menyesuaikan dari jumlah cell
yang ada.
Di bawah ini adalah sebuah table dengan 4 cell.
<table border="1" width="500" cellpadding="4" cellspacing="5">
<tr>
<td align="center" colspan="4">Table</td>
</tr>
<tr>
<td align="center">cell 1</td>
<td align="center">cell 2</td>
<td align="center">cell 3</td>
<td align="center">cell 4</td>
</tr>
</table>
| Table | |||
| cell 1 | cell 2 | cell 3 | cell 4 |
Kita juga bisa memberi warna ( bgcolor).
<table bgcolor="#9933cc" border="0" cellpadding="4" cellspacing="5" style="width:500px;">
<tr>
<td align="center" bgcolor="#006699" colspan="3">Table</td>
</tr>
<tr>
<td align="center" bgcolor="#666633">cell 1</td>
<td align="center" bgcolor="#666633">cell 2</td>
<td align="center" bgcolor="#666633">cell 3</td>
</tr>
</table>
| Table | ||
| cell 1 | cell 2 | cell 3 |
Untuk lebih detailnya mungkin kita bisa buat sebuah tabel misalnya seperti daftar harga di bawah ini:
Kita tambahkan juga tag <th>... </th> (Table head) dan
<caption>....</caption> (Title).
<table align="left" border="2" bgcolor=#FF3366" cellpadding="5"
cellspacing="0"><caption align="top" color="FF3366"><b>Daftar
harga</b></caption>
<tr >
<th colspan="1" bgcolor="#0066FF">No</th>
<th colspan="1" bgcolor="#0066FF">Kode stok</th>
<th colspan="1" bgcolor="#0066FF">Nama barang</th>
<th colspan="1" bgcolor="#0066FF">Gol.</th>
<th colspan="2" bgcolor="#0066FF">Harga jual / satuan</th>
</tr>
<tr>
<td bgcolor="#006600">1. </td>
<td bgcolor="#006600">Cm </td>
<td bgcolor="#006600">Computer </td>
<td bgcolor="#006600">HD </td>
<td bgcolor="#006600">3.300.000 </td>
<td bgcolor="#006600">Unit </td>
</tr>
<tr>
<td bgcolor="#006600">2. </td>
<td bgcolor="#006600">tv </td>
<td bgcolor="#006600">Televisi </td>
<td bgcolor="#006600">ET </td>
<td bgcolor="#006600">2.300.000 </td>
<td bgcolor="#006600">Unit </td>
</tr>
<tr>
<td bgcolor="#006600">3. </td>
<td bgcolor="#006600">Rd </td>
<td bgcolor="#006600">Radio </td>
<td bgcolor="#006600">Vs </td>
<td bgcolor="#006600">1.300.000 </td>
<td bgcolor="#006600">Unit </td>
</tr>
<tr>
<td bgcolor="#006600">4. </td>
<td bgcolor="#006600">gbr </td>
<td bgcolor="#006600">baby </td>
<td bgcolor="#006600"><img src="alamat gambar"> </td>
<td bgcolor="#006600"><img src="alamat gambar"></td>
<td bgcolor="#006600"><img src="alamat gambar"></td>
</tr>
</table>
0 komentar:
Posting Komentar