Jadual ialah komponen penting dalam HTML untuk memaparkan data dalam format berstruktur dengan baris dan lajur. Dalam HTML, jadual dibuat menggunakan tag <table>, <tr> dan <td>.
Teg <table> mewakili bekas jadual utama, yang mengandungi semua baris dan lajur. Baris ditakrifkan menggunakan teg <tr>(baris jadual), manakala sel dalam baris ditakrifkan menggunakan teg <td>(data jadual). Selain itu, anda boleh menggunakan teg <th>(tajuk jadual) untuk menentukan sel pengepala untuk jadual.
Anda boleh menggunakan atribut seperti colspan dan rowspan untuk menggabungkan sel dalam jadual atau span sel merentas berbilang baris dan lajur. Tambahan pula, anda boleh menggunakan sifat CSS untuk menyesuaikan penampilan dan susun atur jadual.
Jadual( <table>)
- <table> Elemen digunakan untuk membuat jadual dalam HTML.
- Data diletakkan dalam baris( <tr>) dan lajur( <td> atau <th>).
- Setiap sel data diletakkan dalam elemen <td>(sel data) atau <th>(sel pengepala).
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Pengepala Lajur( <th>)
- <th> Elemen digunakan untuk membuat pengepala lajur dalam jadual.
- Biasanya diletakkan di baris pertama meja.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<!-- data rows -->
</table>
Baris Data( <tr>):
- <tr> Elemen digunakan untuk mencipta baris data dalam jadual.
- Sel data( <td>) atau sel pengepala( <th>) diletakkan dalam <tr> elemen ini.
<table>
<tr>
<th>No.</th>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
<td>30</td>
</tr>
</table>
Rentang Lajur( colspan)
Atribut colspan digunakan untuk menentukan bilangan lajur yang sel data atau sel pengepala akan menjangkau dalam jadual.
<table>
<tr>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td colspan="2">John Doe</td>
</tr>
</table>
Rentang Baris( rowspan)
Atribut rowspan digunakan untuk menentukan bilangan baris yang akan dipantau oleh sel data atau sel pengepala dalam jadual.
<table>
<tr>
<th rowspan="2">No.</th>
<td>1</td>
<td>John</td>
</tr>
<tr>
<td>2</td>
<td>Jane</td>
</tr>
</table>
Menggabungkan Sel( colspan dan rowspan)
Anda boleh menggabungkan kedua-duanya colspan dan rowspan atribut untuk menggabungkan sel dalam jadual.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border harta benda
- border Harta ini menentukan ketebalan sempadan jadual.
- Nilai border ialah integer bukan negatif.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding harta benda
-, cellpadding Harta ini menentukan jarak antara kandungan sel dan sempadan sel dalam jadual.
- Nilai cellpadding ialah integer bukan negatif
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing harta benda
- cellspacing Harta ini menentukan jarak antara sel dalam jadual.
- Nilai cellspacing ialah integer bukan negatif.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Atribut dan elemen ini membolehkan anda membuat dan menyesuaikan jadual dalam HTML mengikut keperluan anda. Anda boleh menggunakannya untuk memaparkan data dengan cara yang jelas dan teratur di tapak web anda.