Belajar HTML (Part 6): Membuat Table HTML

Tutorial belajar HTML

SeniKoding.com - Table sering digunakan didalam halaman website, misalnya saja dalam menampilkan data siswa, rekap keuangan, dan masih banyak lagi. Dengan table, tampilan website akan lebih rapi dan bagus secara desain. Tampilan data yang berasal dari database pun akan lebih nyaman dilihat jika ditampilkan dalam bentuk table. Oleh karena itu, sangatlah penting utuk mempelajari bagaimana pembuatan table didalam website.

Tutorial Belajar HTML Membuat Table HTML


Untuk membuat Table, HTML sudah menyediakan tag khusus untuk digunakan dalam membuatnya, antara lain :

<table> : Digunakan untuk mendefinisikan sebuah table.
<tr> : Digunakan untuk mendefinisikan baris table.
<th> : Digunakan untuk mendefinisikan judul pada sel dalam table.
<td> : Digunakan untuk mendefinisikan isi tiap sel dalam table.
<caption> : Digunakan untuk membuat judul table.

Sedangkan atribut-atribut dalam membuat Table seperti :

align : Digunakan untuk mendefinisikan posisi horisontal table, center, justify, left, right.
valign: Digunakan untuk mendefinisikan posisi vertikal teks dalam sel, baseline, top, bottom, middle.
background: Digunakan untuk mendefinisikan gambar latar belakang table.
bgcolor: Digunakan untuk mendefinisikan warna latar belakang table.
border : Digunakan untuk mendefinisikan tebal bingkai table.
bordercolor: Digunakan untuk mendefinisikan warna bingkai table.
cellspacing: Digunakan untuk mendefinisikan jarak spasi antar sel.
cellpadding: Digunakan untuk mendefinisikan jarak isi sel dengan bingkai.
height: Digunakan untuk mendefinisikan tinggi table.
weight: Digunakan untuk mendefinisikan lebar table.

Untuk tag <td> ada tambahan atribut, yaitu :

colspan : Digunakan untuk mendefinisikan jumlah kolom yang digabung.
rowspan : Digunakan untuk mendefinisikan jumlah baris yang digabung.
nowrap : Digunakan untuk mendefinisikan agar teks tetap satu baris.

Contoh membuat Table:

<!DOCTYPE html>
<html>
    <head>
        <title>latihan membuat table</title>
    </head>
    <body>
    <table border="1">
  <caption>Belajar Table HTML</caption>
        <tr>
            <th>Kolom 1</th>
            <th>Kolom 2</th>
            <th>Kolom 3</th>
            <th colspan="2">Kolom 4 dan 5</th>
        </tr>
        <tr>
            <td>Baris 1 kolom 1</td>
            <td>Baris 1 kolom 2</td>
            <td>Baris 1 kolom 3</td>
            <td>Baris 1 kolom 4,5</td>
            <td>Baris 1 kolom 4,5</td>
        </tr>
        <tr>
            <td>Baris 2 kolom 1</td>
            <td>Baris 2 kolom 2</td>
            <td>Baris 2 kolom 3</td>
            <td>Baris 2 kolom 4,5</td>
            <td>Baris 2 kolom 4,5</td>
        </tr>
    </table>
    </body>
</html>

Dari kode diatas akan menghasilkan tampilan table seperti dibawah ini.

tutorial belajar HTML membuat table
Table HTML

Contoh lain:

<!DOCTYPE html>
<html>
    <head>
        <title>latihan membuat table</title>
    </head>
    <body>
 <p>Tutorial Belajar HTML di Senikoding.com.</p>
 <br/>
 <table cellpadding="5px" cellspacing="5px" border="2px">
  <tr>
   <td>No.</td>
   <td>Nama</td>
   <td>Divisi</td>
   <td>Umur</td>
  </tr>
  <tr>
   <td>1</td>
   <td>Edi</td>
   <td>Staf</td>
   <td>25</td>
  </tr>
  <tr>
   <td>2</td>
   <td>Alex</td>
   <td>Gudang</td>
   <td>27</td>
  </tr>
  <tr>
   <td>3</td>
   <td>Sami</td>
   <td>Produksi</td>
   <td>31</td>
  </tr>
 </table>
 </body>
</html>

Tutorial belajar HTML membuat table HTML
Table HTML

PREVIEW Belajar HTML Membuat Table HTML


See the Pen latihan-table1 by edisutanto (@edisutanto) on CodePen.


Dengan dasar table ini Anda bisa mengembangkan lagi, dengan ditambah sentuhan CSS pasti akan lebih menarik.

Sampai disini Tutorial Belajar HTML Membuat Table HTML, semoga bermanfaat.

- Salam -


Berlangganan Artikel Kami Gratis, masukan Email dan Verifikasi:

0 Response to "Belajar HTML (Part 6): Membuat Table HTML"

Post a Comment

* Berkomentar sesuai tema ya gaes..

- Terima Kasih -