Tabel adalah komponen penting dalam HTML untuk menampilkan data dalam format terstruktur dengan baris dan kolom. Dalam HTML, tabel dibuat menggunakan tag <table>, <tr>, dan <td>.
Tag <table> mewakili wadah tabel utama, yang berisi semua baris dan kolom. Baris didefinisikan menggunakan tag <tr>(baris tabel), sedangkan sel di dalam baris ditentukan menggunakan tag <td>(data tabel). Selain itu, Anda dapat menggunakan tag <th>(header tabel) untuk menentukan sel header untuk tabel.
Anda dapat menggunakan atribut seperti colspan dan rowspan untuk menggabungkan sel dalam tabel atau merentang sel di beberapa baris dan kolom. Selanjutnya, Anda dapat menerapkan properti CSS untuk menyesuaikan tampilan dan tata letak tabel.
Tabel( <table>)
- <table> Elemen ini digunakan untuk membuat tabel dalam HTML.
- Data ditempatkan dalam baris( <tr>) dan kolom( <td> atau <th>).
- Setiap sel data ditempatkan di dalam elemen <td>(sel data) atau <th>(sel header).
<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>
Tajuk Kolom( <th>)
- <th> Elemen digunakan untuk membuat tajuk kolom dalam tabel.
- Biasanya ditempatkan 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 membuat baris data dalam sebuah tabel.
- Sel data( <td>) atau sel header( <th>) ditempatkan di 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 Kolom( colspan)
Atribut colspan digunakan untuk menentukan jumlah kolom yang akan dibentang oleh sel data atau sel header dalam tabel.
<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 jumlah baris yang akan dibentang oleh sel data atau sel header dalam tabel.
<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 dapat menggabungkan keduanya colspan dan rowspan atribut untuk menggabungkan sel dalam sebuah tabel.
<table>
<tr>
<th rowspan="2">No.</th>
<th colspan="2">Personal Information</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
border Properti
- border Properti menentukan ketebalan batas tabel.
- Nilai dari border adalah bilangan bulat non-negatif.
<table border="1">
<!-- Table rows and columns -->
</table>
cellpadding Properti
-, cellpadding Properti menentukan jarak antara konten sel dan batas sel dalam tabel.
- Nilai dari cellpadding adalah bilangan bulat non-negatif
<table cellpadding="5">
<!-- Table rows and columns -->
</table>
cellspacing Properti
- cellspacing Properti menentukan jarak antar sel dalam tabel.
- Nilai dari cellspacing adalah bilangan bulat non-negatif.
<table cellspacing="10">
<!-- Table rows and columns -->
</table>
Atribut dan elemen ini memungkinkan Anda membuat dan menyesuaikan tabel dalam HTML sesuai dengan kebutuhan Anda. Anda dapat menggunakannya untuk menampilkan data secara jelas dan teratur di situs web Anda.