Cara Membuat Tabel di HTML
Tabel merupakan salah satu komponen utama dalam sistem informasi, karena data-data kita nanti akan di input melalui form kemudian di simpan dan di tampilkan ke dalam tabel.
Tabel mempunyai beberapa bagian sebagai berikut:
Field atau Column Header adalah judul dari masing-masing kolom yang ada di dalam tabel
Record adalah tempat dimana data-data tersimpan, contoh nama indi, tris, rizal, dll
Baris adalah bagian tabel yang berbentuk horisontal / ke samping / melebar
Kolom adalah bagian tabel yang berbentuk ke bawah / vertikal
Garis atau border adalah pembatas di dalam tabel
Cel atau Sel adalah titik pertemuan antara baris dan kolom
Latihan Membuat Tabel di HTML
HTML Table
| Company | Contact | Country |
|---|---|---|
| Alfreds Futterkiste | Maria Anders | Germany |
| Centro comercial Moctezuma | Francisco Chang | Mexico |
| Ernst Handel | Roland Mendel | Austria |
| Island Trading | Helen Bennett | UK |
| Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
| Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
<!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>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
<tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
Ok, diatas adalah sintak dan hasil dari membuat tabel sederhana dengan menggunakan HTML.
Yuk kita terus belajar agar bisa memenangkan persaingan di era digitial saat ini.
Tempat belajar web desain (HTML, CSS, Bootstrap), PHP, MySQL, Laravel, dll di Kursus Komputer YMII Cileungsi.
