Dalam HTML membuat tabel adalah hal dasar, oleh karena itu di tutorial kali ini abovatekno akan memberikan tutorial membuat tabel dalam HTML.
Sebelum membuat tabel anda dapat memahami ini terlebih dahulu, unsur-unsur utama dalam Tabel HTML adalah:
- baris (row)
- kolom (column)
- garis (border),
- sel (cell):
Tags yang diperlukan untuk membuat tabel:
- <table> untuk membungkus tabelnya
- <thead> untuk membungkus bagian kepala tabel
- <tbody> untuk membungkus bagian body dari tabel
- <tr> untuk membuat baris
- <td> untuk membuat sel
- <th> untuk membuat judul pada header
<table border="1">
<tr>
<td>Baris 1 Kolom 1</td>
<td>Baris 1 Kolom 2</td>
</tr>
<tr>
<td>Baris 2 Kolom 1</td>
<td>Baris 2 Kolom 2</td>
</tr>
</table>
- border untuk mengatur besar garis
- cellpadding untuk mengatur jarak antarsel
- bgcolor untuk mengatur warna latar belakang
bonus memperindah tabel dengan bootstrap:
menggunakan bootstrap akan membuat tabel anda lebih indah dan rapih, begini caranya:
<!DOCTYPE html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<style>
.table-center > * {
text-align: center}
</style>
</head>
<body>
<div>
<table class="table table-bordered" >
<thead>
<tr class="table-center">
<th scope="col">No</th>
<th scope="col">Nama</th>
<th scope="col">Kelas</th>
<th scope="col">Nilai</th>
</tr>
</thead>
<tbody>
<tr class="table-center">
<th scope="row">1</th>
<td>Ahmad</td>
<td>XI (RPL)</td>
<td>90</td>
</tr>
<tr class="table-center">
<th scope="row">2</th>
<td>Yudistira</td>
<td>XI (RPL)</td>
<td>100</td>
</tr>
<tr class="table-center">
<th scope="row">3</th>
<td>Udin</td>
<td>XI (RPL)</td>
<td>200</td>
</tr>
</tbody>
</table>