Tabel HTML memungkinkan pengembang web untuk mengatur data ke dalam baris dan kolom.
Contoh
Sebuah tabel HTML sederhana:
Code :
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>Tabel HTML</h2>
<table>
<tr>
<th>Nama Siswa</th>
<th>No HP</th>
<th>Alamat</th>
</tr>
<tr>
<td>Maruf</td>
<td>0812xxxxxxxx</td>
<td>Bandung</td>
</tr>
<tr>
<td>Abdul</td>
<td>0812xxxxxxxx</td>
<td>Purwakarta</td>
</tr>
<tr>
<td>Sapna</td>
<td>0812xxxxxxxx</td>
<td>Jakarta</td>
</tr>
</table>
</body>
</html>
Sel Tabel
Setiap sel tabel didefinisikan oleh a <td>dan </td>tag.
td singkatan dari tabel data.
Segala sesuatu di antara <td>dan </td>adalah konten sel tabel.
Catatan: Sel tabel dapat berisi semua jenis elemen HTML: teks, gambar, daftar, tautan, tabel lain, dll.
Baris Tabel
Setiap baris tabel dimulai dengan a <tr>dan diakhiri dengan </tr>tag.
tr singkatan dari tabel baris.
Anda dapat memiliki baris sebanyak yang Anda suka dalam sebuah tabel; pastikan saja jumlah selnya sama di setiap baris.
Catatan: Ada kalanya satu baris dapat memiliki lebih sedikit atau lebih banyak sel daripada yang lain.
Anda akan mempelajarinya di bab selanjutnya.
Tabel Header
Terkadang Anda ingin sel Anda menjadi sel header tabel. Dalam kasus tersebut gunakan <th>tag alih-alih <td>tag:
th singkatan dari tabel header.
Tag Tabel HTML
Tag = Description
<table> = Defines a table
<th> = Defines a header cell in a table
<tr> = Defines a row in a table
<td> = Defines a cell in a table
<caption> = Defines a table caption
<colgroup> = Specifies a group of one or more columns in a table for formatting
<col> = Specifies column properties for each column within a <colgroup> element
<thead> = Groups the header content in a table
<tbody> = Groups the body content in a table
<tfoot> = Groups the footer content in a table
Note : Pastikan kalian membaca artikel sebelumnya agar tau tools apa yang digunakan untuk membuat coding di chromebook