Cara Membuat Sebuah Tabel Sederhana di HTML
Halo , Kembali lagi dengan saya di blog saya mantapblog.Sebelumnya kita pernah membahas tentang HTML dan belajar dasar dasarnya di artikel Mengenal HTML Dan Belajar Dasar HTML.dan kali ini saya ingin membagi sebuah tutorial yang sangat sederhana yaitu Cara Membuat Sebuah Tabel Sederhana di HTML .Gunanya apa dari sebuah tabel tersebut ? Tentunya Banyak !
Kegunaan sebuah tabel di HTML
- Untuk membuat sebuah form registrasi/login admin sebuah website
Pernahkah kalian memperhatikan sebuah tampilan form login admin sebuah website ? Pastinya berbentuk sebuah tabel bukan ?.Membuat Form login sebuah website tentunya menggunakan PHP agar bereaksi,tetapi dasar untuk membuat sebuah tabel form login sebuah website adalah HTML - Menyajikan Sebuah data dalam bentuk kolom atau baris
- Membuat Tabel seperti di Microsoft excel
Kegunaan Microsof Excel pada dasarnya adalah Menghitung sebuah angka secara otomatis yang berupa perhitungan,pengurangan,perkalian,dan pembagian .Ternyata di HTML juga bisa dengan cara membuat sebuah tabel dan menambahkan sedikit Script PHP - Design web
Para Programer/Developer web biasanya menggunakan tabel menggunakan html untuk membuat kolom dan baris - Dan lain lain ..
Dasar Dasar Membuat tabel
Script :
<html>
<title>Belajar Buat Tabel</title>
<head></head>
<body>
<table>
<tr>
<td>Mantap</td>
<td>Blog</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>Penjelasan :
Syntax/codingan <center> berguna untuk membuat ketengah
Syntax/codingan <table> yang artinya kita ingin membuat sebuah tabel
Syntax/codingan <tr> yang artinya itu sebuah baris
Syntax/codingan <td> yang artinya itu sebuah kolom
Pastinya di tutup dengan tag " / " (slash) contoh </table>
Hasil :
| Mantap | Blog |
| 1 | 2 |
Setiap saya membagikan codingan ,simpan Codingannya di notepad save as dengan eksitensi .html dan jalankan terserah mu (Chrome ,Mozila,Safari,Opera dll) , pastinya akan seperti itu
Mempertebal tabel dan memperindah Tabel
Kali ini kita ingin beranjak ke sedikit lebih atas dari yang sebelumnya dengan menambahkan sedikit Syntax/codingan.
Script:
<html>
<title>Belajar Buat Tabel</title>
<head></head>
<body>
<table border="2">
<tr>
<th>Mantap</th>
<th>Blog</th>
</tr>
<tr>
<th>1</th>
<th>2</th>
</tr>
</table>
Hasilnya :
| Mantap | Blog |
|---|---|
| 1 | 2 |
Sedikit ada perubahan tidak ? .Tentunya Iya ! .Di Tahap 2 ini saya menyisipkan sebuah syntax ke dalam <table> yaitu boder="2" dan mengubah <td> menjadi <th>
Penjelasan:
- Border="2" yang berguna untuk sebagai pembatas antara baris kolom 1 dan baris kolom 2 ,sedangkan ="2" itu ukuran ketebalan tabel
- <th> berguna untuk mempercantik dan memperindah tabel
Membuat rata Kolom pada Tabel
Script:
<html>
<title>Belajar Buat Tabel</title>
<head></head>
<body>
<table border="2" height="20%" width="30%">
<tr>
<th colspan="4"><center>Tabel</th>
</tr>
<tr>
<td>1</th>
<td>2</th>
<td>3</th>
<td>4</th>
</tr>
</table>
</body>
</html>
Penjelasan:
-Height artinya Tinggi dan Width artinya lebar saya memakai Lebar dan tinggi,saya memakai ukuran di sini yaitu persen di width dan artinya tabel akan memenuhi browser anda sebanyak 20%
-Untuk membuat rata kolom pada Tabel ,kita harus menyisipkan sebuah syntax di dalam <th> yaitu colspan artinya rata kolom menjadi <th colspan="4">,maksud 4 itu apaan sih ?. Di bawah ada 4 kolom ,nah di colspan juga harus 4 juga dan seterusnya.
Membuat rata Baris pada Tabel
<html>
<head></head>
<body>
<table border="2" height="30%" width="50%">
<tr>
<th rowspan="2"><center>Tabel</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
</body>
</html>
Penjelasan:
3Untuk membuat rata baris pada Tabel ,kita harus menyisipkan sebuah syntax di dalam <th> yaitu rowspan artinya rata baris menjadi <th rowspan="2">,maksud 2 itu apaan sih ?.Di samping hanya memakan 2 baris baris saja
Bagaimana dengan tutorial saya kali ini ? Menarik bukan ? Jika ada pertanyaan atau ada kesalahan hubungi saya langsung di fitur kontak saya.Ilmu anda sekarang sudah bertambah bukan ?
Sering sering berkunjung kesini agar mendapatkan tutorial yang sangat bermanfaat :)
Sekian dari saya saya ucapkan terima kasih telah berkunjung
Mantap gan..itu cara bikin script gitu gimana gan..?mampir juga ya https://jutex-infor.com
ReplyDelete