Cara Membuat tabel di HTML Dengan Mudah

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

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

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

 

Contoh Table di HTML

<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..

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

 

<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

 

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