Membuat Tabel Dengan HTML

Membuat Tabel Dengan HTML

Tabel adalah sebuah rangkaian yang berbentuk baris dan kolom yang sejajar yang biasa hampir sama dengan aplikasi office spreadsheet seperti Google Sheets, LibreOffice/OpenOffice Calc, KingSoft Office Spreadsheet atau Microsoft Office Excel, yang memang aplikasi ini memiliki project yang berbentuk garis antara baris dan kolom, didalam tabel juga akan ada data-data yang sesuai satu sama lain, selain itu tabel juga digunakan pada database untuk menyimpan datanya. Untuk membuat tabel akan saya jelaskan secara bertahap dengan menggunakan tag html dibawah ini.

Table

Table adalah tag html yang mendefinisikan bahwa ini adalah tabel, tag table ini adalah tag untuk membuat root dasar dari pembuatan baris dan kolom.

Thead, Tbody dan Tfoot

Thead adalah sebuah tag untuk memisahkan atau baris untuk pembuatah kepala tabel, Tbody adalah tag untuk membuat body dari banyak baris dan banya kolom, sedangkan Tfoot adalah tag untuk kaki dari tabel bisa juga disamakan dengan tag thead.

Tr

Tr adalah tag untuk membuat baris yang digunakan pada semua tempat baik didalam thead, tbody atau tfoot.

Th dan Td

Th dan td adalah tag untuk membuat kolom, th adalah tag yang digunakan untuk membuat kolom pada thead dan tfoot sedangkan tag td digunakan pada tag tbody. Th umumnya lebih tebal dibandingkan dengan td.

Caption

Caption adalah penjelasan tentang tabel yang dibuat atau dengan istilah lain itu sebagai label yang menjelaskan identitas tabel tersebut.

Col dan Colgroup

Col dan colgroup adalah pengaturan dari sebuah kolom seperti ukuran sebuah kolom atau warna sebuah kolom atau yang lainnya dalam pengaturan kolom.

Untuk membuat sebuah dokumen html atau web yang dapat menjalankan tabel seperti code dibawah ini dan simpan dengan nama tabel.html.

<!DOCTYPE html>
<html>
<head>
     <title>Page Title</title>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- tag meta, link, script, style, base, title -->
</head>
<body>

<table>
  <caption>Label Tabel</caption>
  <colgroup>
    <col span="2" class="warna">
    <col class="warna">
  </colgroup>
  <thead>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Alamat</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>No</th>
      <th>Nama</th>
      <th>Alamat</th>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>6753333</td>
      <td>T Ghazali</td>
      <td>Bentayan</td>
    </tr>
    <tr>
      <td>5432289</td>
      <td>Bukhari</td>
      <td>Baroh Beureuleung</td>
    </tr>
  </tbody>
</table>

</body>
</html>

 

Tags: , ,