Belajar Html (Part 6): Menciptakan Table Html
- Table sering dipakai didalam halaman website, contohnya saja dalam menampilkan data siswa, rekap keuangan, dan masih banyak lagi. Dengan table, tampilan website akan lebih rapi dan anggun secara desain. Tampilan data yang berasal dari database pun akan lebih nyaman dilihat jikalau ditampilkan dalam bentuk table. Oleh alasannya ialah itu, sangatlah penting utuk mempelajari bagaimana pembuatan table didalam website.
Tutorial Belajar HTML Membuat Table HTML
Untuk menciptakan Table, HTML sudah menyediakan tag khusus untuk dipakai 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 menciptakan judul table.
Sedangkan atribut-atribut dalam menciptakan Table ibarat :
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 pemanis atribut, yaitu :
colspan : Digunakan untuk mendefinisikan jumlah kolom yang digabung.
rowspan : Digunakan untuk mendefinisikan jumlah baris yang digabung.
nowrap : Digunakan untuk mendefinisikan supaya teks tetap satu baris.
Contoh menciptakan Table:
<!DOCTYPE html> <html> <head> <title>latihan menciptakan 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 isyarat diatas akan menghasilkan tampilan table ibarat dibawah ini.
 |
| Table HTML |
Contoh lain:
<!DOCTYPE html> <html> <head> <title>latihan menciptakan 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 dapat menyebarkan lagi, dengan ditambah sentuhan CSS niscaya akan lebih menarik.
Sampai disini Tutorial Belajar HTML Membuat Table HTML, semoga bermanfaat.
- Salam -