CARA MEMBUAT TABLE DI BLOK

---

---

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

Di bawah ini adalah contoh satu baris table dengan jumlah kolom:

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: Kolom 1

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: Kolom 1 Kolom 2

Jika membuat lebih dari satu baris, misalnya di sini kita buat dua baris dengan beberapa jumlah kolomnya.

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: Kolom 1 Kolom 1

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: Kolom 1 Kolom 2 Kolom 1 Kolom 2

Sekarang kita coba dengan memberi atribut cellspacing dan
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

Biar ingat lagi coba perhatikan fungsi dari colspan diatas.

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>

Daftar harga

No	Kode stok	Nama barang	Gol.	Harga jual / satuan
1.	Cm	Computer	HD	3.300.000	Unit
2.	tv	Televisi	ET	2.300.000	Unit
3.	Rd	Radio	Vs	1.300.000	Unit
4.	gbr	baby

Kita juga bisa memasukkan alamat gambar ke dalam table.

Semoga bermanfaat.

Posted by Yeye

Tweet