Hallo semua nya kali ini kita berada di postingan pertama dari notepate. kali ini kita akan membahas tentang HTML tetapi kali ini yang akan kita buat adalah sebuah tabel. sebernya saya akan memberikan penjelasan dan sedikit source code tabel yang sudah jadi tapi tidak saya sarankan kalian mengcopy source code ini karena source code ini bukan yang terbaik saya cuma menjelaskan dan memberikan contoh saja jadi buat kalian yang mempunyai tugas sekolah untuk membuat tabel maka saya sarankan untuk memahami nya saja ok...
Nah untuk materi tabel kali ini sebenarnya cukup simpel saja karena untuk membuat tabel kalian hanya perlu memahami tag
<table>
<tr>
<thead>
<tbody>
<th>
<td>
<tr>
<thead>
<tbody>
<th>
<td>
beberapa tag tersebut harus kalian pahami penjelasan tentang tag tersebut ada di bawah ini
- Tag <tr> untuk membuat baris atau row
- Tag <table> untuk menunjukan bahwa ini adalah tabel
- Tag <thead> untuk menunjukan bagian atas atau kepala tabel
- Tag <tbody> untuk menunjukan bagian badan tabel
- Tag <th> bagian head atau kepala tabel
- Tag <td> bagian badan atau body tabel
contohnya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Notepate</td>
<td>Indonesia</td>
</tr>
</table>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tabel</title>
</head>
<body>
<table border="1">
<tr>
<th>No</th>
<th>Nama</th>
<th>Alamat</th>
</tr>
<tr>
<td>1</td>
<td>Notepate</td>
<td>Indonesia</td>
</tr>
</table>
</body>
</html>
Maka hasilnya akan seperti dibawah ini
| No | Nama | Alamat |
|---|---|---|
| 1 | Notepate | Indonesia |
Sedikit penjelasan jika kalian lihat pada bagian <table border="1"> itu saya menggunakan border nya 1 jika kalian merubahnya dengan angka 0 maka tidak akan ada garis maka itu sama dengan table tanpa border jika kalian ingin membuatnya sedikit lebih cantik kalian dapat menambahnya sedikit css untuk mempercantik tampilan dari tabel tersebut
kalian juga bisa memberikan class pada bagian <tr>, <th>, <td> lalu buat tag <style> di bagian atas </head> lalu isikan dengan class tadi lalu berikan css border:1px solid black;
penjelasan 1px itu adalah tebal dari garis tabel nanti sedangkan solid adalah tipe dari garis nya sebenarnya untuk tipe garis ada 4 kalo tidak salah yaitu :
- solid
- dotted
- dashed
- double
sedangkan black adalah warna dari garis tabel kalian bisa menggunakan rgba untuk menentukan warna dari garis nya
sekian dulu penjelasannya semoga bermanfaat kalo masih ada pertanyaan atau kebingunan bisa langsung berkomentar postingan selanjutnya kita akan membahas tentang tabel menggunakan colspan dan rowspan.
Belum ada tanggapan untuk "Tutorial Membuat Tabel"
Post a Comment