Table

Jikalau diterjemahkan, maksudnya agak pelik iaitu "meja"? Sebenarnya istilah atau elemen tag ini menggunakan nama "table" adalah dengan mengambil sifat kedudukan atau susunan meja di suatu tempat. Sekarang cuba anda bayangkan satu kelas yang mempunyai 30 biji meja dan di susun rapi mengikut baris dan lajur tertentu.

Kita dapat mengetahui lokasi atau titik sesuatu meja dengan menyatakan baris ke berapa dan lajur ke berapa. Idea ini diaplikasikan dalam HTML bagi mewakili satu-satu ruangan sel data disusun dalam baris dan lajur tertentu.

Penggunaan tag atau elemen ini memaparkan data-data atau maklumat dengan lebih jelas dan terancang.

Dalam HTML, ia dinyatakan dengan tag <table>. Kemudian dia dibahagikan kepada baris (row) yang dinyatakan dengan tag <tr> yang membawa maksud "table row". Kemudian setiap baris boleh dibahagikan kepada beberapa lajur (colum atau divide) yang dinyatakan dengan tag <td> yang membawa maksud "table data".

Kehadiran kedua-dua elemen sokongan ini, <tr> dan <td> akan menghasilkan beberapa ruangan sel data yang boleh diisi dengan sebarang maklumat atau elemen lain seperti teks, gambar, senarai, perenggan dan juga borang.

Contoh:

<table border="1">
<tr>
<td>baris 1, lajur 1</td>
<td>baris 1, lajur 2</td>
</tr>
<tr>
<td>baris 2, lajur 1</td>
<td>baris 2, lajur 2</td>
</tr>
</table>

Hasil:

Atribut sokongan

Untuk elemen <table>, beberapa atribut sokongan boleh digunakan untuk mengawal bentuk paparan yang akan dihasilkan. Terdapat 3 atribut sokongan yang disenaraikan untuk membantu tag ini iaitu:

  • border: menghasilkan garis pemisah antara satu sel dengan sel yang lain. Sekiranya tidak dinyatakan, nilaian "1" akan digunakan.
  • cellpadding: jarak antara kandungan data-data di dalam sel dengan dinding sel. Sekiranya tidak dinyatakan, nilaian "0" akan digunakan.
  • cellspacing: jarak antara sel dengan sel yang lain. Sekiranya tidak nyatakan, nilaian "1" akan digunakan.

Dibawah ini, saya sertakan beberapa contoh penggunaan dan sampel "table" yang menggunakan beberapa variasi atribut sokongan dan hasilnya.

<table border="1"
 cellpadding="2"
 cellspacing="1">
<tr>
<td>Baris 1, Lajur 1</td>
<td>Baris 1, Lajur 2</td>
</tr>
</table>
<table border="2"
 cellpadding="0"
 cellspacing="0">
<tr>
<td>Baris 1, Lajur 1</td>
<td>Baris 1, Lajur 2</td>
</tr>
</table>
<table border="2"
 cellpadding="5"
 cellspacing="5">
<tr>
<td>Baris 1, Lajur 1</td>
<td>Baris 1, Lajur 2</td>
</tr>
</table>

Penggunaan "Headings"

Kadangkala setiap satu "table" kita ingin menyatakan tajuk atau perkara utama yang diwakili oleh setiap lajur (column). Anda mungkin terfikir untuk menggunakan elemen "style" bagi membezakan antara tajuk dan set data.

Hakikatnya, HTML sudah menyediakan kemudahan ini bagi menyenangkan proses menstailkan data set.

Ia merupakan antara tag tambahan yang sangat jarang digunakan oleh pembangunan laman web buat masa sekarang dan dinyatakan dengan tag <th> yang membawa maksud "table headings". Ia haruslah digunakan di dalam tag <tr> bagi menggantikan elemen <td>.

Perhatikan contoh di bawah ini:

Contoh:

<table border="1">
<tr>
<th>Tajuk</th> <th>Tajuk Lain</th>
</tr>
<tr>
<td>baris 1, lajur 1</td>
<td>baris 1, lajur 2</td>
</tr>
<tr>
<td>baris 2, lajur 1</td>
<td>baris 2, lajur 2</td>
</tr>
</table>

Hasil:

Data sel kosong

Setiap satu sel seharusnya perlu diisi dengan sebarang data. Elakkan dari meninggalkannya kosong tanpa sebarang kemasukkan kod HTML kerana sesetengah web pelayar akan memaparkan ralat yang akan mencacatkan laman web anda.

Sekiranya memang tiada data yang perlu dimasukkan, masukkan elemen ruangan atau "space" sebagai pegganti.

Namun seperti dalam tutorial sebelum ini, oleh kerana HTML tidak mampu untuk menterjemahkan "space" dengan betul di dalam penterjemahan kod, maka kita perlu menggunakan sisipan gantian iaitu "&nbsp;" yang akan diterjemahkan oleh HTML sebagai ruangan.

Contoh:

<table border="1" cellpadding="2" cellspacing="1">
<tr>
<td>Baris 1, Lajur 1</td>
<td>&nbsp;</td>
</tr>
</table

Saiz "table"

Satu lagi atribut sokongan yang boleh digunakan dan diimplimentasikan dalam penggunaan "table" adalah saiz. Kita boleh nyatakan sama ada untuk menggunakan saiz tetap atau fleksibel yang lebih biasa dikenali sebagai "fluid".

Saiz tetap bermaksud, saiz untuk satu-satu "table" akan sentiasa tetap tidak mengira saiz web pelayan atau resolusi skrin. Sekiranya nilai besar dinyatakan dan saiz resolusi skrin yang kecil, garisan "scroll" akan keluar dan kurang senang untuk diperhatikan.

Jadi teknik "fluid" menjadi jalan penyelesaian.

  • Saiz tetap: saiz biasanya dinyatakan dengan meletakkan angka sahaja seperti "400", "600" yang membawa maksud saiz 400 piksel dan 600 piksel.
  • Saiz "fluid": saiz biasanya dinyatakan dengan menggunakan peratusan seperti "80%", "60%" yang akan diterjemahkan kepada saiz sebenar berdasarkan kepada saiz web pelayar. Katakan nilaian "60%" digunakan dan saiz web pelayar pada resolusi skrin 800x600, maka saiz akan diterjemahkan kepada: 60/100 x 800 = 480 piksel. Sekiranya resolusi mengecil kepada 400x300, maka saiz baru akan diterjemahkan iaitu: 60/100 x 400 = 240 piksel.
Penilaian: 
5
Average: 5 (3 votes)