Cara Membuat Sebuah Tabel Sederhana di HTML

table

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 : 
MantapBlog
12

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 : 
MantapBlog
12

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 


Script:



<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

0 Response to "Cara Membuat Sebuah Tabel Sederhana di HTML"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel