cara mudah membuat table di blog ~ tukaran banner yuk..

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 trDi 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

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>