Bahasa Penanda Hiperteks (HTML)/Jadual

Jadual digunakan bagi memaparkan data. Sering kali, jadual juga disalah guna bagi membuat susun atur laman. Jadual boleh disisipkan di mana sahaja dalam laman, termasuklah ke dalam sebuah jadual yang lain. Kita akan membincangkan bagaimana membuat jadual asas dan juga bagaimana menambah tag pada jadual. Anda digalakkan membuat ujian dalam pembinaan jadual.

Tag-tag yang berguna bagi membuat jadual adalah <table> - table, <tr> - table row, <td> - table data, dan <th> - table heading.

Jadual Paling Minimum

Mari kita lihat contoh mudah dan ringkas:

 <table>
 <tr><th>Makanan</th><th>Harga</th></tr>
 <tr><td>Roti</td><td>$2.99</td></tr>
 <tr><td>Teh</td><td>$1.40</td></tr>
 </table>

Kod asas buat Jadual. Setiap jadual bermula dengan tag <table> dan berakhir dengan tag </table>. Dalam tag jadual, anda boleh memberi definisi atribut jadual tersebut seperti yang akan ditunjukkan kemudian.

Sesebuah jadual itu mengandungi baris-baris, setiap satunya bermula dengan tag baris jadual <tr> dan berakhir dengan tag </tr>. Tag akhiran ini ialah pilihan. Baris perlu diletakkan di dalam jadual.

Baris mengandungi sel, setiap satu sel jadual bermula dengan tag data jadual <td> dan secara pilihan diakhiri dengan tag </td>. Sel mesti diletakkan di dalam baris.

Jika anda letakkan sebuah sel jadual di luar baris, ataupun anda lupa menutup sel, atau baris, atau jadual, hasilnya mungkin tidak seperti yang anda sangka. Teks yang dirancang diletak di dalam jadual mungkin dipaparkan pada tempat yang lain, di luar jadual. Paling teruk, jadual mungkin tidak dipaparkan langsung.

Sebagai contoh, dengan IE dan Firefox:

• Sel yang diletakkan di luar baris dianggap baris berasingan sebagai satu baris pada posisi menegak yang berkaitan.
• Semua kandungan yang diletak di luar sel, sama ada di dalam baris atau tidak, diletkkan mendahului seluruh jadual, mengikut jujukan ia berlaku. IE meletakkan setiap item pada baris baharu sementara Firefox pula meletakkan ruang kosong di antara item.

Sekiranya tag pilihan </td> dan </tr> tidak ditulis, masalah di atas akan berlaku pada kandungan yang diletak sebelum baris pertama, dan pada baris-baris sebelum unsur pertama. Perhatikan bahawa </table> diperlukan; jika ia tidak hadir, semua kandungan yang menyusul dianggap sebagai kandungan sel terakhir, termasuklah jadual lain.

Membuat Jadual

1. Buat sebuah fail HTML, berikan nama yang bermakna (contoh, "jadual.html") dan masukkan kod di bawah ke dalam bahagian body fail:

Kod HTML

Kod:

 <table>
 <tr><th>Makanan</th><th>Harga</th></tr>
 <tr><td>Roti</td><td>$2.99</td></tr>
 <tr><td>Susu</td><td>$1.40</td></tr>
 </table>

Output:

Makanan	Harga
Roti	$2.99
Susu	$1.40

Simpan fail dan buka dengan pelayar kesukaan anda.

Ia tidak kelihatan macam jadual yang sempurna buat masa ini, tapi kita akan tambah beberapa perkara lagi.

Jadual ini terdiri daripada dua baris (perhatikan dua tag <tr>) dan dalam setiap baris terdapat dua entri data (dua tag <td>)

Anda boleh andaikan sesebuah jadual itu sebagai satu hamparan atau spreadsheet. Yang ini memiliki dua baris dan dua lajur yang membuat 4 sel yang mengandungi data (2 baris x 2 lajur = 4 sel).

Kapsyen dan Pengepala

Mari kita mula dengan contoh ringkas:

<table>
<tr><th>Formula</th><th>Hasil</th></tr>
<tr><td>1 + 1</td><td>2</td></tr>
<tr><td>3 * 5</td><td>15</td></tr>
</table>

Kod asas pengepala

Kapsyen berguna jika kita mahu memberi definisi atau pemerian berkaitan kandungan jadual. Kapsyen adalah pilihan.

Untuk menambah kapsyen pada jadual, masukkan unsur caption selepas tag pemula table, dengan teks kapsyen dilteka di dalam unsur, seperti diberikan di bawah:

Kod meletakkan kapsyen dan pengepala pada jadual

Kod:

<table>
<caption>Formula dan Hasil</caption>
<tr><th>Formula</th><th>Hasil</th></tr>
<tr><td>1 + 1</td><td>2</td></tr>
<tr><td>3 * 5</td><td>15</td></tr>
</table>

Output:

Formula dan Hasil

Formula	Hasil
1 + 1	2
3 * 5	15

Paparan kapsyen dan pengepala

Kapsyen lazimnya dipaparkan di luar sempadan jadual, pada bahagian atas. Paparan dan tempat letak sebenar kapsyen bergantung kepada penggayaan CSS.

Pengepala jadual adalah satu cara bagi memerikan kandungan sesebuah lajur jadual. kapsyen lazimnya diletakkan pada baris pertama <tr>.

Kita menggunakan <th> bagi sel dan tidak <td>.

Secara lalai, teks di dalam pengepala jadual diparkan dengan teks tebal dan diletakkan di bahagian tengah jadual.

Sintaksnya adalah: <tr><th>teks</th><th>teks</th></tr>

Membuat Kapsyen dan Pengepala Jadual

1. Buka fail jadual.html anda
2. Tambah kapsyen anda pada jadual
3. Lihat hasilan
4. Tambah pengepala Item dan $ Harga pada jadual
5. Lihat hasilan

Sempadan

Sempadan adalah pilihan: kadang kala sempadan dapat menjadikan jadual kelihatan lebih jelas dan kemas, dan ada masanya sempadan lebih elok ditinggalkan sahaja.

Namun, demikian mewujudkan sempadan semasa anda mencipta jadual ialah satu idea yang baik: ia membuat jadual lebih jelas dan memudahkan penciptaannya. Anda boleh membuang sempadan itu selepas anda selesai membuat jadual.

Membuat Sempadan

<table border="1" cellspacing="0">
<tr><td>
Sempadan jadual ini seluas 1 piksel.
</td></tr>
</table>

Kod asas untuk membuat sempadan Jadual.

Kod untuk sempadan seluas 5 piksel

 <table border="5" cellspacing="0"><tr><td>
Sempadan jadual ini seluas 5 piksel.
</td></tr>
</table>

Output:

Sempadan jadual ini seluas 5 piksel.

Nilai lalai adalah 0 (yakni, sifar, tiada sempadan).

Border ialah sebuah atribut tag table.

Sintaks adalah seperti berikut:

<table border=X> di mana "x" adalah saiz sempadan dalam unit piksel.

Anda dapat menggunakan CSS bagi menetapkan warna sempadan.

Membuat Sempadan keliling Jadual

1. Buka fail jadual.html anda
2. Dalam tag <table>, tambah border=2
   yakni, <table border=2>
3. Simpan dan tonton fail
4. Ubah saiz sempadan (cuba angka 0, 10, atau apa jua angka)
5. Simpana dan tonton

Adakah anda perasan bahawa hanya sempadan luar yang bertambah besar?

Tinggi dan Lebar

Secara lalai, saiz sebuah jadual itu hanya mengikut saiz data yang dimasukkan ke dalamnya.

Kita dapat mengubah ketinggian (height) dan kelebaran (width) sesbuah jadual mengikut saiz ketetapan kita.

Saiz dapat ditetapkan mengikut saiz piksel mutlak, atau relatif berbanding saiz tetingkap atau skrin.

Sintaks seperti berikut:

<table height=*** width=***>
di mana *** adalah saiz dalam piksel ataupun peratusan saiz skrin.

Juga, kita dapat menentukan saiz sel atau baris, satu persatu.

Contoh sintaks

<tr height=80> <td width="50%">

Perhatikan bahawa:

• Kita dapat mencampuradukkan unit-unit ketinggian dan kelebaran.
• Kita juga dapat melakukan perkara yang sama dengan CSS dengan mengubah peraturan padding.

Tentukan Saiz Jadual

1. Buka fail jadual.html anda
2. Dalam tag <table border=2>, masukkan parameter bagi height dan width, contoh <table border=2 height=200 width=300>
3. Simpan fail dan kemudian buka dan tontonnya. Ubah saiz tetingkap pelayar dan perhatikan apa yang jadi — saiz jadual tetap sama dan tidak berubah.
4. Cuba tukar parameter dan lihat fail sekali lagi.
5. Kemudian tukar unit piksel dengan peratus, misalnya, <table border=2 height="40%" width="50%">
6. Simpan fail dan buka dengan pelayar. Ubah saiz tetingkap pelayar dan perhatikan perbezaan yang berlaku apabila anda mengguna saiz mengikut peratus. Saiz jadual berubah apbila saiz tetingkap pelayar berubah.

Penjarakan Sel dan Penebal Sel

Penjarakan sel adalah bilangan piksel di antara sel.

Penebal sel adalah ruang piksel di dalam sel, iaitu, jarak antara data dan tepi sel dalam jadual.

Kedua-dua pilihan ini merupakan atribut tag <table>

Contoh

<table border=1 cellspacing=0 cellpadding=0></table>

Contoh sintaks yang menggunakan kedua-dua atribut cellspacing dan cellpadding. Nilai lalai bagi keduanya adalah 2

Menentukan Penjarakan dan Penebalan Sel

1. Buka fail jadual.html anda. Pastikan jadual anda mempunyai penetapan saiz yang besar, misalnya 300x200 (height x width). Anda tidak akan dapat melihat perubahan jika jadual terlalu kecil.
2. Uji dengan menukar saiz sempadan, penjarakan dan penebalan sel jadual. Cuba dengan kombinasi dimensi seperti 0, 1, 5, 10, dan sebagainya.
3. Simpan dan lihat perubahan

Penjajaran Sel-sel Jadual

Penjaran lalai bagi kandungan sel jadual adalah ke sebelah kiri dan diletak menegak tengah.

Jika anda mahu mengubah penjajaran sel, ia perlu dilakukanbagi setiap sel satu persatu. Perintah align dibekalkan dalam tag <td>. Anda juga dapat menukar penjajaran seluruh baris dengan menetapkan penjajaran dalam tag <tr>.

Penjajaran mendatar (Horizontal alignment)

Sintaks:
<td align="position"> di mana posisi adalah di kiri (left) tengah (center), atau kanan (right)
atau
<tr align="position"> di mana posisi adalah di kiri (left) tengah (center), atau kanan (right)

Penjajaran menegak (Vertical alignment)

Sintaks:
<td valign="position"> di mana posisi adalah di atas (top), tengah (middle) atau bawah (bottom)
atau
<tr valign="position"> di mana posisi adalah di atas (top), tengah (middle) atau bawah (bottom)

Anda juga boleh memasukkan perintah-perintah align dan valign ke dalam baris jadual dan dalam tag table.

Memuatkan align="left" atau align="right" ke dalam tag table TIDAK menjajarkan kandungan jadual. Sebaliknya, ia menjajarkan seluruh jadual pada halaman, yakni ia menjadikan teks yang diluar teks meliputi jadual.

Penjajaran Sel Jadual

1. Buka fail jadual.html anda
2. Ubah penjajaran sel-sel jadual agar sel-sel kelihatan seperti:

roti $2.99 susu $1.40

atau

roti $2.99 susu $1.40

1. Cuba ubah penjajaran menegak dan mendatar lain
2. Lihat perubahan yang anda buat

Rentang Baris dan Rentang Jalur

Every row must have the same number of table datas, occasionally table datas have to span more than one column or row. In this case the tags colspan and/or rowspan are used - where they are set to a number.

			<-- This row has three table datas
			<-- This row has two. The first uses colspan="2"
			<-- This row has three table datas, but one spans two rows because it uses rowspan="2"
			<-- This row has only two table datas, because its first is being taken up.

Syntax:

• <td colspan=X> where X is the number of columns that the cell spans across.
• <td rowspan=X> where X is the number of rows that the cell spans across.

Task - Row span and column span

1. Open your table.htm file.
2. Experiment with making one table cell span across multiple rows.
3. Experiment with making one table cell span across multiple columns.
4. View the result each time.

Background colour and images

It is possible to give each table cell, (or row, or table) a different background colour.

Syntax:

<td bgcolor="colour">
<tr bgcolor="colour">
<table bgcolor="colour">

where colour is a colour name or hexadecimal code.

Note: table background colours only display in version 3 browsers and above, and they may not print correctly.

Note: it is not recommended to specify background colours using HTML - it is much better to use Cascading Style Sheets for this purpose.

A background image is another modification of the appearance of a cell, row, or a complete table. Again these only display in version 3 browsers and above, and they may not print correctly.

Syntax:

<td background="filename">
<tr background="filename">
<table background="filename">

where filename is the path and filename of the background image.

Note: it is not recommended to specify background images using HTML - it is much better to use CSS for this purpose.

Task - Background colour and images

1. Open your table.htm file.
2. Experiment with changing the background colour of a table cell, a table row, and the table itself.
3. Add a background image to a table cell, a table row, and the table itself.
4. View the result each time.

Column groups

To specify a given format for a table column, you can use the <col> and <colgroup> tags. These tags are located at the top of the table, and specify the default format for the given column.

With the <col> tag, the first instance indicates the formatting for the first column, the second for the second column, and so on. <colgroup> works similarly, but also includes the span tag to cover multiple columns.

<colgroup> <col span="3" style="background-color:red"> <col style="background-color:yellow"> <col span="2" style="background-color:green"> </colgroup>

Project Completion

Jan	Feb	Mar	Apr	May	Jun
3%	17%	40%	55%	86%	100&

Summary

In this module you learn how to:

• Create and customise HTML tables,
• Control their dimensions and appearance,
• Add a caption to a table,
• Control the alignment of the table contents,
• Various attributes of the table tags.