jom kita blog

Cataloged AutobiographyBERKENAAN SAYA Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..

The Readable Journal MENEROKA ARTIKEL Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini

Astrolab Tool KATEGORI ARTIKEL Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini

BINA TABLE

August 31, 2008 Posted by: Fauzie

Kandungan Tutorial

• Pendahuluan
• Tag, Attribute Dan Element
• Tajuk Atau Page Title
• Perenggan
• Heading
• List
• Link
• Image
• Membina Table
• Buat Borang atau Form
• Bina Webpage

Membina atau membuat "table" adalah sesuatu yang paling sukar dalam HTML terutama yang baru untuk mempelajari HTML.

Cara membina table telah pun dibincang sebelum ini. Sila klik Membina Table untuk mendapatkan keterangan yang lebih lanjut.

Terdapat banyak tag untuk membina sesuatu table. Sila lihat contoh kod di bawah ini:

<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</td>

<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</td>

<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</td>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</td>
</tr>
</table>

Kod <table> memberitahu "table" akan dibina.

Tag <tr> bermaksud "table row".

Tag <td> bermaksud "table data". Element td ini mestilah berada atau "enclosed" dalam tag tr iaitu di antara <tr> ..... </tr>

Dalam contoh di atas, table ini mempunya 4 row atau baris dan 3 column. Jika dilihat melalui browser, table mudah ini adalah seperti berikut:

Row 1, cell 1	Row 1, cell 2	Row 1, cell 3
Row 2, cell 1	Row 2, cell2	Row 2, cell 3
Row 3, cell 1	Row 3, cell 2	Row 3, cell 3
Row 4, cell 1	Row 4, cell 2	Row 4, cell 3

Lain-lain contoh table:

<h4>Contoh table 1 column:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>

<h4>Contoh table dengan 1 row dan 3 column:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
</table>

<h4>Contoh table dengan 2 row dan 3 column:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</table>

Contoh table 1 column:

100

Contoh table dengan 1 row dan 3 column:

100

200

300

Contoh table dengan 2 row dan 3 column:

100	200	300
400	500	600

<h4>Table dengan border biasa:</h4>
<table border="1">
<tr>
<td>First</td>
<Row</td>
</tr>
<tr>
<td>Second</td>
<td&gtRow</td>
</tr>
</table>

<h4>Table dengan border tebal:</h4>
<table border="8">
<tr>
<td>First</td>
<Row</td>
</tr>
<tr>
<td>Second</td>
<td&gtRow</td>
</tr>
</table>

<h4>Table dengan border paling tebal:</h4>
<table border="15">
<tr>
<td>First</td>
<Row</td>
</tr>
<tr>
<td>Second</td>
<td&gtRow</td>
</tr>
</table>

Table dengan border biasa:

First	Row
Second	Row

Table dengan border tebal:

Row	Pertama
Row	Kedua

Table dengan border yang paling tebal:

Row	Pertama
Row	Kedua

<h4>Header Table:</h4>
<table border="1">
<tr>
<th>Nama</th>
<th>Telefon</th>
<th>Fax</th>
</tr>
<tr>
<td>Abu Bakar</td>
<td>254 3092</td>
<td>254 3094</td>
</tr>
</table>

<h4>Header dalam bentuk vertical:</h4>
<Table border="1">
<tr>
<th>Nama:</th>
<td>Ali Ahmad</td>
</tr>
<tr>
<th>Telefon:</th>
<td>254 3092</td>
</tr>
<tr>
<th>Fax:</th>
<td>254 3094</td>
</tr>
</table>

Header Table:

Nama	Telefon	Fax
Abu Bakar	254 3092	254 3094

Header dalam bentuk vertical:

Nama:	Ali Ahmad
Telefon:	254 3092
Fax:	254 3094

<h4>Cell Table dengan 2 columns</h4>
<table border="1">
<tr>
<th>Nama</th>
<th colspan="2">Telefon</th>
</tr>
<tr>
<td>Ali B. Abu</td>
<td>254 3092</td>
<td>254 3093</td>
</tr>
</table>

<h4>Cell Table dengan dua row:</h4>
<table border="1">
<tr>
<th>Nama:</th>
<td>Ali B. Abu</td>
</tr>
<tr>
<th rowspan="2">Telefon:</th>
<td>254 3092</td>
</tr>
<tr>
<td>254 3093</td>
</tr>
</table>

Cell Table dengan 2 columns

Nama	Telefon
Ali B. Abu	254 3092	254 3093

Cell Table dengan dua row:

Nama:	Ali B. Abu
Telefon:	254 3092
	254 3093

Sila lihat rencana bagaimana Membina Table untuk mempelajari cara membuat table.


klik sini untuk kembali ke kandungan tutorial