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.



11 komentar:

Wong tanjung pura mengatakan...

Kapan kapan aku mampir lagi. . .
habis sekarang aku mau keluar kota dulu, biasa namanya supir ya kaya gini, hidupku tua di jalan.
makasih tutorialnya, nanti pasti aku coba.

DPULSE mengatakan...

Pa bisa tlng dilihat di blog saya www.ronnyyuan.blogspot.com. kenapa tabel saya punya jarak yg banyak sekali dr heaternya, tq

Darmasena mengatakan...

@ Wong tanjung pura
        Maaf baru bisa balas, trmksh atas kunjungannya. Jangan tua di jln, kasihan cucunya.

@ DPULSE
        Trmksh kunjungannya. Utk table nya coba dihilangkan kode ganti barisnya <br> terutama yg disisipkan pada </tr> <br> <tr> dan </td> <br> </tr> coba dihilangkan semua. Smoga sukses dan makin laris pulsanya.

gHieLank mengatakan...

kerennn,,,,,
dan harus dicoba,, thanks ya artikelnya mantabbbb....

harry mengatakan...

wah nice info gan :D,
thx yahh info.y ,

jgn lupa mmpir di blog sy yah
http://harrysaputra06.blogspot.com/

blog anda sdh sy follow,
follow balik yah, please :D

Hots Game mengatakan...

waaahhh info table sangat berguna sobat maju terus...,...

Info Bisnis&Kesehatan mengatakan...

Makasih Gan atas infonya. Langsung praktek nech...

Build Your Dreams mengatakan...

wah infonya sangat bermanfaat nih,,,

hehehe,,,, main yuk ke blog punyaku >> andikasoul.co.cc

safar saputra mengatakan...

thanks untuk infonya, visit my blog http://www.alexandereducation.blogspot.com

nur rosyidi mengatakan...

tanks' gan infonya..........mampir juga ke http://nrosyidi78.blogspot.com

Sarah Hussein Moedava mengatakan...

Makasih ya Mas.. :)
keren jadinya Euiii..
sangat membantu saya

:) :( ;) :D ;;) :P :-* :-o :(( =)) ~x(
Poskan Komentar