* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { background-color: black; } .badan { width: 880px; margin: 35px auto; background-color: white; padding: 20px; overflow: hidden; } .badan h2 { color: crimson; border-bottom: 1px solid gainsboro; margin: 5px; margin-bottom: 13px; } .list-produk { border: 1px solid gainsboro; padding: 10px; float: left; width: 200px; margin: 5px; } .list-produk:hover { transition-duration: 700ms; box-shadow: 5px 5px gainsboro; } .list-produk img { width: 100%; height: 175px; display: block; margin-bottom: 5px; } .list-produk h4, .list-produk h5 { color: crimson; text-align: center; margin-bottom: 5px; } .tombol { text-decoration: none; border-radius: 7px; padding: 7px; display: block; float: left; width: 45%; margin: 4px; text-align: center; color: white; } .tombol:hover { background-color: black; transition-duration: 700ms; } .tombol-detail { background-color: green; } .tombol-beli { background-color: crimson; }
Skip to content Skip to sidebar Skip to footer
Home / html

Tutorial Cara Membuat Tabel Dengan HTML


Pada artikel kali ini saya akan share tentang Tutorial Cara Membuat Tabel Dengan HTML. Tabel ini berfungsi untuk menampilkan data-data. tabel ini juga sama dengan tabel-tabel lain seperti di Microsoft Office, Excel dan lain-lain. Tanpa memperpanjang lagi langsung saja simak tutorial berikut ini.

Tutorial Cara Membuat Tabel Dengan HTML

1. Buat file tabel.html
Pertama, silahkan anda buat file dengan nama tabel.html di text-editor anda, Lalu ketikan kode berikut ini.

<!DOCTYPE html>
<html>
<head>
 <title>Tutorial Membuat Tabel Dengan HTML</title>
</head>
<body>
<style type="text/css">
 body{
  font-family: 'Robot',sans-serif;
 }

 .judultabel{
  background-color: #000;
  color: #fff;
 }
</style>
<h2 align="center">Tutorial Membuat Tabel Dengan HTML</h2>
<table border="1" align="center">
 <thead>
  <tr class="judultabel">
   <th width="300">Nama</th>
   <th width="300">Alamat</th>
   <th width="300">No HP</th>
   <th width="300">Jenis Kelamin</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th>Fiqisulaiman</th>
   <th>Jakarta</th>
   <th>089988776655</th>
   <th>Laki-Laki</th>
  </tr>
 </tbody>
</table>
</body>
</html>

Kode di atas sekaligus saya berikan sedikit CSS yaitu mengubah font (tulisan) dan warna pada tabel, anda juga bisa mengubah sesuai keinginan anda.

2. Simpan
Kedua, silahkan anda simpan file tabel.html nya lalu jalankan di browser anda. Setelah dijalankan maka akan membentuk tampilan seperti di bawah ini.


Berikut ada artikel tentang Tutorial Cara Membuat Tabel Dengan HTML, sangat mudah sekali dalam membuat tabel dengan HTML ini. dan anda juga bisa mengedit tabel anda sendiri sesuai keinginan anda. Sekian terima kasih.
m