HTML atau Hypertext Markup Language adalah bahasa markah yang digunakan untuk membuat halaman web. Salah satu komponen penting dalam pembuatan halaman web adalah tabel. Tabel digunakan untuk mengorganisir dan menampilkan data secara terstruktur, sehingga memudahkan pembaca untuk membacanya. Dalam artikel ini, kita akan membahas bagaimana cara membuat tabel di HTML.
Tabel di HTML dibuat dengan menggunakan tag <table> dan beberapa tag lainnya untuk mengatur konten dalam tabel. Berikut ini adalah langkah-langkah untuk membuat tabel di HTML.
- Membuat Tag Table Untuk membuat tabel, pertama-tama kita harus membuat tag <table> di mana tag ini akan menandai awal dan akhir dari tabel. Contohnya seperti berikut ini:
css<table>
</table>
- Membuat Tag Row Setelah membuat tag <table>, selanjutnya kita akan membuat baris dalam tabel. Dalam HTML, tag untuk baris adalah <tr>. Contohnya seperti berikut ini:
css<table>
<tr>
</tr>
</table>
- Membuat Tag Kolom Setelah membuat baris dalam tabel, selanjutnya kita akan membuat kolom dalam tabel. Dalam HTML, tag untuk kolom adalah <td>. Contohnya seperti berikut ini:
css<table>
<tr>
<td></td>
</tr>
</table>
- Mengisi Konten dalam Tabel Setelah membuat tag <td>, kita bisa mengisi konten dalam tabel seperti teks atau gambar. Contohnya seperti berikut ini:
css<table>
<tr>
<td>Nama</td>
<td>Usia</td>
<td>Alamat</td>
</tr>
<tr>
<td>Andi</td>
<td>25</td>
<td>Jakarta</td>
</tr>
<tr>
<td>Budi</td>
<td>30</td>
<td>Bandung</td>
</tr>
</table>
- Mengatur Style pada Tabel Selain mengatur konten dalam tabel, kita juga bisa mengatur tampilan atau style pada tabel. Kita bisa menggunakan tag <style> untuk mengatur style pada tabel. Contohnya seperti berikut ini:
php<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;
border-bottom: 1px solid #ddd;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
Dalam contoh di atas, style pada tabel diatur dengan mengatur tampilan border, padding, dan warna latar belakang.
Demikianlah cara membuat tabel di HTML beserta contoh dan penjelasannya. Semoga artikel ini dapat membantu Anda dalam membuat tabel di HTML.
Komentar