Tabel merupakan hal yang paling penting dalam membuat
interface website anda. Dengan tabel anda dapat memecah layout website menjadi
beberapa kolom atau baris. Dengan tabel halaman website anda akan lebih rapih.
Table merupakan tag html terumit, karena didalam tag table terdapat tag-tag
lainnya. Dan table sangat penting. Karena itu sebelum meneruskan, tarik nafas
dalam-dalam dan konsentrasi.
Untuk membuat tabel maka diperlukan tag-tag dasar
seperti ini :
- <TABLE></TABLE>--Tag ini merupakan containers untuk membuat tabel.
- <TR></TR>--Didalam tabel tag ini berfungsi untuk membuat baris.
- <TD></TD>--Tag untuk membuat kolom. didalam tag <tr> harus terdapat tag <td>, anda bisa menambahkan banyak tag <td> didalam <tr> untuk membuat kolom.
- <TH></TH>--Sama dengan <td> hanya saja berfungsi sebagai header, biasanya digunakan pada baris pertama didalam tabel.
Setiap tag tabel tersebut memiliki banyak atribut. Oke
langsung saja coba kode berikut ini:
Contoh:
<table
border="1" width="60%">
<tr>
<td>Contoh
Table</td>
</tr>
</table>
Hasilnya:
Contoh Tabel
|
Tabel diawali dengan tag <table> dan
biasanya memiliki atribut border. Jika border="0"maka garis pada
tabel tidak ditampilkan. Biasanya jika kita tidak menampilkan atribut border
maka otomatis tabel tersebut juga tidak memiliki garis. <table> memiliki
atribut cellpadding untuk memberi jarak didalam kolom dan cellspacing untuk
memberi jarak antara kolom. Coba kode berikut ini:
<table
border="1" width="200" cellpadding="4"
cellspacing="5">
<tr>
<td
width="100">Cell 1</td>
<td
width="100">Cell 2</td>
</tr>
</table>
Hasil:
Cell 1
|
Cell 2
|
Coba anda ubah nilai dari atribut cellpadding dan cellspacing untuk
melihat perbedaannya, cobalah untuk mengutak-atik kode diatas dengan mengubah
nilai-nilai atributnya.
Setiap tabel memiliki baris dengan menggunakan
tag <tr>. Didalam baris perlu sebuah kolom atau lebih, kolom
dibuat dengan menggunakan tag <td>. Untuk lebih
jelasnya cobalah kode berikut ini:
<table
border="1" width="200" cellpadding="2">
<tr>
<td
width="100" align="center" bgcolor="#C0C0C0"><b>Header</b></td>
<td
width="100" align="center"
bgcolor="#C0C0C0"><b>Header</b></td>
/
</tr>
<tr>
<td
width="100">cell 1</td>
<td
width="100">cell 2</td>
</tr>
<tr>
<td
width="100">cell 3</td>
<td
width="100">cell 4</td>
/
</tr>
</table>
Hasil:
Header
|
Header
|
cell 1
|
cell 2
|
cell 3
|
cell 4
|
Bagaimana anda mengerti maksudnya kode diatas, coba
anda pahami dulu. Pada kode diatas terdapat atribut bgcolor yang
berguna untuk memberi warna pada background. Didalam kolom<td> anda
dapat menuliskan kode HTML apa saja, bahkan anda dapat memasang tag <table>didalamnya,
yang berarti anda memasang tabel didalam tabel. Contoh lainnya:
<table
border="1" width="200" cellpadding="2">
<tr>
<td
width="100" align="center"
bgcolor="#C0C0C0"><b>Header</b></td>
<td
width="100" align="center"
bgcolor="#C0C0C0"><b>Header</b></td>
</tr>
<tr>
<td
width="100" rowspan="2" valign="top">cell
1</td>
<td
width="100">cell 2</td>
</tr>
<tr>
<td
width="100">cell 4</td>
</tr</table>
Hasilnya:
Header
|
Header
|
cell 1
|
cell 2
|
cell 4
|
Anda lihat ada atribut rowspan="2" ini berguna
untuk menggabungkan 2 baris menjadi satu, jika anda ingin menggabungkan lebih
dari 2 baris, ubah saja nilainya. Bagaiman susah? coba anda pelajari terus.
Jika sudah coba anda pahami kode berikut ini:
<table
border="0" width="200" cellpadding="2"
cellspacing="1" bgcolor="#000000">
<tr>
td
width="100" align="center"
bgcolor="#C0C0C0"><b>Header</b></td>
<td
width="100" align="center"
bgcolor="#C0C0C0"><b>Header</b></td>
</tr>
<tr>
<td
width="100" valign="top" bgcolor="#CCCCCC"
align="left">Left</td>
<td
width="100" bgcolor="#CCCCCC"
align="right">Right</td>
</tr>
<tr>
<td
width="200" valign="top" colspan="2"
bgcolor="#FFFFFF" align="center">
Table
is cool</td>
</tr>
<tr>
<td
width="200" valign="top" colspan="2"
bgcolor="#FFFFFF" align="center">
But
it's not easy</td>
</tr>
</table>
Hasil:
Header
|
Header
|
Left
|
Right
|
Table is cool
|
|
But it's not
easy
|
|
No comments:
Post a Comment