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.
 |
| 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>
 |
| Table HTML |
PREVIEW Belajar HTML Membuat Table HTML
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 -
Tidak ada komentar
Posting Komentar
Dilarang SPAM Komentar!