assalamualaikum wr. wb.
Kali ini kita akan belajar tentang cara membuat tabel dalam HTML.
Tujuan
Mengetahui bagaimana membuat tabel dalam HTML serta formatnya.
Tabel HTML didefinisikan dengan tag <table>. Setiap baris tabel didefinisikan dengan tag <tr>. Sebuah header dari tabel didefinisikan dengan tag <th>. Sebuah data/sel tabel didefinisikan dengan tag <td>.
Contoh membuat tabel :
<table style="width:100%">
<tr>
<th>NIS</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1234</td>
<td>Vika Tafrichana</td>
<td>XI RPL 1</td>
</tr>
<tr>
<td>1235</td>
<td>Risa Nurhaeni</td>
<td>XI RPL 1</td>
</tr>
<tr>
<td>1236</td>
<td>Prastiana rahayu</td>
<td>XI RPL 1</td>
</tr>
<tr>
<td>1237</td>
<td>Dian Putriana</td>
<td>XI RPL 1</td>
</tr>
</table>
Script diatas merupakan contoh tabel sederhana, silahkan mencoba. Untuk selanjutnya adalah menambahkan sebuah border pada tabel.
<html>
<head>
<style>
table, th,td {
border: 1px solid black;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>NIS</th>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>1234</td>
<td>Vika Tafrichana</td>
<td>XI RPL 1</td>
</tr>
</table>
</body>
</html>
Selanjutnya adalah script membuat collapse border pada tabel. Untuk membuat collapse border silahkan ditambahkan script berikut pada bagian style-nya.
<style>
table, th,td {
border: 1px solid black;
border-collapse: collapse;
}
</style>
Menambahkan Sel padding, yaitu untuk menentukan jarak antara isi sel dan perbatasannya. Untuk mengatur padding, gunakan properti CSS padding berikut di dalam style :
th,td {
padding: 10px;
}
Menambahkan text-align pada tabel, misalnya untuk membuat judul pada tabel menjadi rata kiri, ditambahkan script pada style :
th {
text-align: left;
}
Menambahkan border-spacing pada tabel, yaitu :
table {
border-spacing: 5px;
}
Membuat colspan pada tabel :
<table style="width:100%">
<tr>
<th>Nama</th>
<th colspan="2">Telepon</th>
</tr>
<tr>
<td>Vika</td>
<td>89768856</td>
<td>23674567</td>
</tr>
</table>
Membuat rowspan pada tabel :
<table style="width:100%">
<tr>
<th>Nama :</th>
<td>Vika</td>
</tr>
<tr>
<th rowspan="2">Telepone:</th>
<td>89768856</td>
</tr>
<tr>
<td>23674567</td>
</tr>
</table>
Menambahkan caption di atas tabel :
<table style="width:100%">
<caption>Data Siswa</caption>
<tr>
<th>Nama</th>
<th>Kelas</th>
</tr>
<tr>
<td>Vika</td>
<td>XI RPL 1</td>
</tr>
<tr>
<td>Risa</td>
<td>XI RPL 1</td>
</tr>
</table>
Anda juga bisa menambahkan format untuk tabel misalnya mengganti warna background tabel, kolom atau baris, dengan menulisnya di bagian dalam style.
Sekian postingan saya kali ini, terimakasih. Semoga bermanfaat..
wassalamualaikum wr. wb.
Referensi :
- http://www.w3schools.com/html/html_tables.asp
Tidak ada komentar:
Posting Komentar