Petik.net - Table HTML adalah elemen HTML yang digunakan untuk membuat tabel data. Setiap tabel terdiri dari baris dan kolom, di mana masing-masing kolom memiliki header dan beberapa baris data.
Berikut ini adalah contoh kode HTML untuk membuat tabel:
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
Penjelasan kode:
<table>adalah elemen HTML yang menandakan bahwa ini adalah sebuah tabel.<tr>adalah elemen yang menandakan sebuah baris dalam tabel.<th>adalah elemen yang menandakan sebuah header kolom.<td>adalah elemen yang menandakan sebuah sel dalam tabel.
Anda bisa menambahkan atribut seperti border atau width untuk memformat tabel sesuai keinginan. Sebagai contoh:
<table border="1" width="100%">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
Di sini, atribut border="1" menambahkan garis pada tabel dan atribut width="100%" menentukan lebar tabel sebesar 100% dari lebar tampilan.
Selain itu, Anda juga bisa menambahkan gaya CSS ke tabel untuk memformatnya dengan lebih baik. Berikut adalah contoh kode yang menggunakan CSS:
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
<td>Row 1, Column 3</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
<td>Row 2, Column 3</td>
</tr>
</table>
Di sini, kami menggunakan CSS untuk menentukan jarak antar sel dan warna latar belakang header kolom. Anda bisa menyesuaikan gaya sesuai keinginan Anda.
Ini hanyalah contoh sederhana, tetapi Anda bisa menambahkan lebih banyak elemen dan gaya untuk membuat tabel yang lebih kompleks dan menarik. Semoga contoh ini membantu Anda memahami cara membuat tabel HTML!
