Cara Membuat tabel di HTML Dengan Mudah

Cara Membuat tabel di HTML – Sebelumnya saya sudah menjelaskan mengenai pengertian HTML dan apa saja fungsi dari HTM tersebut. Pada kesempatan kali ini saya akan berbagai sedikit pengalaman mengenai cara membuat table di HTM dengan mudah dan sederhana.

Bagi kamu yang sedang mengembangkan sebuah blog/ website, maka sangat wajib untuk belajar HTM, karena sebagian besar bahasa pemerograman yang digunakan pada blog adalah HTML dan PHP. Blog itu seperti rumah dan HTML ini adalah bahan yang biasa digunakan untuk memperindah rumah tersebut. Itu adalah ilustrasi yang mudah dipahami.

Semakin kreatif kamu dalam mengembangkan ilmu HTML, maka semakin bagus pula hasil yang akan kamu dapat. Dalam dunia pemerograman, bukan siapa yang paling hebat, tapi siapa yang paling kreatif dan punya banyak ide. Nah, disini kita akan belajar bagaimana cara membuat table di HTML secara sederhana dan mudah dipahami. Berikut adalah contoh tabel dari HTML.

Cara Membuat tabel di HTML Dengan Mudah Dan Singkat!

Pada dasarnya untuk membuat sebuah tabel di HTML, kita membutuhkan paling tidak  4 tag,  <table>, <tr>, dan <td>, <td>: Berikut adalah kunci dasar membuat tabel di HTML dengan mudah.

  • Tag <table> ini digunakan untuk memulai baris pada tabel
  • Tag <tr>  merupakan singkatan dari table row, biasa digunakan untuk membuat baris dari tabel.
  • Tag <td> merupakan singkatan dari table data, fungsinya yatitu untuk menginput data ke tabel.
  • Tag <td> merupakan singkatan dari tag defines yang berfungsi sebagai cell standar table HTML
BACA:   Pengertian PHP Dan Fungsinya Untuk Website

Nah, setelah kita memahami beberapa fungsi dari tag table, maka berikut adalah contoh yang mungkin dapat kamu coba dan kembangkan.

 

Contoh Table di HTML

Bagi kamu yang belum mengerti mengenai cara membuat tabel dengan HTML berikut adalah contoh yang paling mudah dan dapat kamu terapkan di blog atau website kamu.

<style type=”text/css”>
.tg {border-collapse:collapse;border-spacing:0;border-color:#ccc;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#fff;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#ccc;color:#333;background-color:#f0f0f0;}
.tg .tg-s268{text-align:left}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class=”tg”>
<tr>
<th class=”tg-s268″>Nama Barang</th>
<th class=”tg-0lax”>Harga </th>
<th class=”tg-0lax”>Jumlah </th>
<th class=”tg-0lax”>Diskon</th>
</tr>
<tr>
<td class=”tg-0lax”>Micin</td>
<td class=”tg-0lax”>Rp.5000</td>
<td class=”tg-0lax”>5</td>
<td class=”tg-0lax”>5%</td>
</tr>
<tr>
<td class=”tg-0lax”>Kopi </td>
<td class=”tg-0lax”>Rp.15000</td>
<td class=”tg-0lax”>2</td>
<td class=”tg-0lax”>1%</td>
</tr>
<tr>
<td class=”tg-0lax”>Gula</td>
<td class=”tg-0lax”>Rp.12,000</td>
<td class=”tg-0lax”>6</td>
<td class=”tg-0lax”>3%</td>
</tr>
</table>

 

Hasil tabel di HTML.

Gambar di bawah ini merupakan hasil dari kode HTML tadi dimana kita membuat tabel sederhana dengan menggunakan kode HTML.

Cara Membuat tabel di HTML

Cara Membuat tabel di HTML

 

Catatan Disini saya tambahakan beberapa styl CSS agar lebih Keren…

 

Contoh Table di HTML Lainnya

Contoh table selanjutnya dapat kamu lihat pada kode HTML berikut ini!

 

<style type=”text/css”>
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:black;}
.tg .tg-s268{text-align:left}
</style>
<table class=”tg”>
<tr>
<th class=”tg-s268″>Nama</th>
<th class=”tg-s268″>Umur </th>
<th class=”tg-s268″>Pekerjaan</th>
</tr>
<tr>
<td class=”tg-s268″>Reza</td>
<td class=”tg-s268″>22 </td>
<td class=”tg-s268″>Sales</td>
</tr>
<tr>
<td class=”tg-s268″>Dwi Aditya</td>
<td class=”tg-s268″>25</td>
<td class=”tg-s268″>Freelance</td>
</tr>
<tr>
<td class=”tg-s268″>Rangga Ananda Putra</td>
<td class=”tg-s268″>28</td>
<td class=”tg-s268″>Penulis</td>
</tr>
<tr>
<td class=”tg-s268″>Dewi Santika</td>
<td class=”tg-s268″>27</td>
<td class=”tg-s268″>Ibu Rumah tangga</td>
</tr>
</table>

Hasilnya..

contoh table html

contoh table html

 

BACA:   Pengertian Bahasa Pemrograman Pascal, Manfaat & Cara Belajar PASCAL

Itulah tadi cara membuat tabel di html dengan mudah. Beberapa contoh tabel html diatas dapat Anda copy dan terapkan pada project yang Anda ingin buat. Sebelum itu pahami terlebih dahulu cara membuat tabel htm sehingga dapat dimodifikasi sesuai dengan ide dan kreatifitas Anda.

Add Comment