Cara membuat tabel dengan HTML

Membuat tabel

Assalamualaikum wr,wb sahabat blogger,masih seputar Tutorial HTML.  Kali ini saya akan berbagi tips dan trik untuk membuat tabel dalam HTML. Tabel ini juga bisa digunakan dalam postingan,misalnya saja jika anda ingin membuat atau membandingkan sebuah data. Tabel memiliki banyak fungsi di dalam HTML,selain untuk mengurutkan dan membuat data menjadi rapi. Tabel juga sangat efisien digunakan.

Untuk lebih jelasnya,berikut cara cara atau langkah langkah mudah mebuat tabel dalam HTML :

1.Awali kode HTML dengan :
<table>
Konten</table>
2. Setelah ada tabelnya sesuaikan ukuranya,misalnya saja ukuranya width=1000 dan border/garis pinggir=1.
<table width="1000" border="1">
Konten</table>
3. Jika sudah bentuklah baris/row dan kolom/column dengan script seperti ini :
<tr>
    <td><table width="1000" height="257" border="1">
      <tr>
        <td width="39" height="40">&nbsp;</td>
        <td width="557">&nbsp;</td>
        <td width="382">&nbsp;</td>
      </tr>
Note : Ganti kode yang berwarna merah sesuai dengan ukuran yang anda inginkan,dan jangan sampai lupa jika mengawali dengan kode <tr> maka akhirnya juga harus </tr>.

4. tr artinya Table row,dan Td artinya tabel column,jadi jika kita ingin membentuk 3 kolom dan 3 baris tabel,maka dapat dicontohkan scriptnya seperti ini :
<table border="1" style="width: 500px;">
  <tbody>
<tr>
    <td width="39">&nbsp;No</td>
    <td width="198">&nbsp;Nama</td>
    <td width="241">&nbsp;Alamat</td>
  </tr>
<tr>
    <td>&nbsp;1</td>
    <td>&nbsp;Budi</td>
    <td>&nbsp;Selong</td>
  </tr>
<tr>
    <td>&nbsp;2</td>
    <td>&nbsp;Rozikin</td>
    <td>&nbsp;Lombok</td>
  </tr>
</tbody></table>
<table border="1" style="width: 500px;">
  <tbody>
</tbody></table>
5.Jika sudah,maka hasil dari script  diatas akan menghasilkan 3 baris dan 3 kolom seperti ini :

 No  Nama  Alamat
 1  Budi  Selong
 2  Rozikin  Lombok


Nah,bagaimana mudah bukan untuk membuat sebuah tabel dari html?,semoga artikel ini dapat bermanfaat bagi kita semua. Baca juga artikel menarik lainya Cara membuat logo android sendiri dengan corel draw.


Previous
Next Post »

4 komentar

Click here for komentar
dunia maya
admin
28 March 2014 at 18:50 ×

kapan2 bsa dicba ni

Reply
avatar
tes
admin
28 March 2014 at 19:09 ×

Simple namun sangat bermanfaat bro..
Kalau hal dasar ini tidak difami oleh programmar website, mka selanjutnya akan kebingunang...

Reply
avatar
Unknown
admin
31 March 2014 at 02:12 ×

Iya may,hehe,ini masih dasar dasar Html nya aja kok,masih ada level yang lebih sulit lagi :D

Reply
avatar
Unknown
admin
31 March 2014 at 02:14 ×

Betul banget bro,,kita harus tahu dasar dasarnya dulu sebelum ke tingkat lanjutnya,,kalo nggak nanti kita sendiri yang kebingungan ,, :D

Reply
avatar

Aturan Berkomentar Di Blog Capunkshare :
1.Dilarang Keras Mencantumkan Link Aktif Pada Komentar,Jika Tidak Komentar Akan Dihapus!
2.Berkomentar Sesuai Dengan Topik Yang Dibahas
ConversionConversion EmoticonEmoticon