Kadang kita membutuhkan yang namanya table dalam menampilkan informasi. Apalagi kalau informasi tersebut berkaitan dengan data-data yang beragam, pasti akan kesulitan kalau diuraikan dalam bentuk teks narasi.
Misalnya nih, konco sinahu punya produk yang mau dijual. Maka menampilkannya dalam bagan table adalah salah satu langkah yang tepat. Produknya apa? Berapa harga per itemnya? spesifikasinya apa? itu semua tidak nyaman jika diuraikan dalam bentuk teks.
Oke, tentu masih banyak motifasi lain mengapa perlu menggunakan table ini. Nah, pada kesempatan kali ini kita akan belajar cara membuat table dengan bahasa HTML. Mungkin ini agak rumit untuk pemula yang sama sekali tidak kenal html. Saya sarankan untuk membaca dasar-dasarnya dulu tentang Elemen HTML dan tag HTML, Pengertian dan Penggunaannya dan Pengertian dan Contoh Atribut HTML.
Untuk membuat table normal dengan html silahkan simak kode-kode berikut ini. Saya katakan normal karena nanti ada tampilan table dengan sedikit kreasi dan modifikasi.
Hasilnya nanti akan seperti ini :
Ket :
- <tr> adalah table rows
- <td> adalah table data
- <th> adalah table heading
- Border adalah garis tepi
- Padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi.
silahkan mengganti besaran angka pada border dan padding untuk melihat perbedaannya.
- border-collapse berfungsi untuk meleburkan garis-garis tepi. Untuk mengetahui maksudnya silahkan dihapus kata collapse untuk melihat perbedaannya.
Sekian episode sinahu coding kali ini tentang Belajar Membuat Table dengan HTML. Ada yang kurang jelas bisa kita diskusikan di kolom komentar.
Misalnya nih, konco sinahu punya produk yang mau dijual. Maka menampilkannya dalam bagan table adalah salah satu langkah yang tepat. Produknya apa? Berapa harga per itemnya? spesifikasinya apa? itu semua tidak nyaman jika diuraikan dalam bentuk teks.
Oke, tentu masih banyak motifasi lain mengapa perlu menggunakan table ini. Nah, pada kesempatan kali ini kita akan belajar cara membuat table dengan bahasa HTML. Mungkin ini agak rumit untuk pemula yang sama sekali tidak kenal html. Saya sarankan untuk membaca dasar-dasarnya dulu tentang Elemen HTML dan tag HTML, Pengertian dan Penggunaannya dan Pengertian dan Contoh Atribut HTML.
Untuk membuat table normal dengan html silahkan simak kode-kode berikut ini. Saya katakan normal karena nanti ada tampilan table dengan sedikit kreasi dan modifikasi.
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th>Nama</th>
<th>Pekerjaan</th>
<th>Umur</th>
</tr>
<tr>
<td>Sukijan</td>
<td>Petani</td>
<td>50</td>
</tr>
<tr>
<td>Fitri</td>
<td>Mahasiswa</td>
<td>23</td>
</tr>
<tr>
<td>Jono</td>
<td>PNS</td>
<td>40</td>
</tr>
</table>
</body>
</html>
Hasilnya nanti akan seperti ini :
| Nama | Pekerjaan | Umur |
|---|---|---|
| Sukijan | Petani | 50 |
| Fitri | Mahasiswa | 23 |
| Jono | PNS | 40 |
Ket :
- <tr> adalah table rows
- <td> adalah table data
- <th> adalah table heading
- Border adalah garis tepi
- Padding adalah ruang horizontal dan vertikal yang diatur di sekitar area isi.
silahkan mengganti besaran angka pada border dan padding untuk melihat perbedaannya.
- border-collapse berfungsi untuk meleburkan garis-garis tepi. Untuk mengetahui maksudnya silahkan dihapus kata collapse untuk melihat perbedaannya.
Sekian episode sinahu coding kali ini tentang Belajar Membuat Table dengan HTML. Ada yang kurang jelas bisa kita diskusikan di kolom komentar.
0 Komentar untuk "Belajar Membuat Table dengan HTML"