Monday, March 11, 2019

Belajar Cara Membuat Tabel di HTML dan Atribute Dasar Membuat Tabel Yang Bagus di HTML

belajar cara membuat tabel di html

Pembahasan pada saat ini bagaimana cara membuat tabel di html dan ditambah dengan membahas atribut table yang penting untuk di pelajari dan dipahami agar tabel yang di buat di dalam html adalah tabel yang bagus dan menarik. Untuk membuat tabel dalam html bisa ditulis di notepad, dreamweaver, sublime dan lainnya

Tag <table>

Untuk membuat tabel di html sangat mudah, karena dari html sudah disediakan tag table yang berguna untuk membuat sebuah atau lebih tabel didalam HTML maupun PHP. Bentuknya seperti berikut ini.

<table> …. </table>

Letak tag <table> harus dan mutlak dituliskan didalam tag <body>. Dengan kata lain tabel adalah bagian dari badan suatu web bukan header atau lainnya.

Namun diatas hanya blok table saja, dan tidak akan disebut tabel jika tidak ada baris dan kolom. terus bagai mana agar menjadi sebuah tabel? Ada 2 tag didalam lingkup tag <table> yaitu tag <tr> dan tag <td>.

Tag <tr> berguna untuk mementuk baris, sedangkan tag <td> berguna untuk membentuk kolom.  

Untuk lebih jelasnya kita masuk kedalam contoh pertama dalam belajar cara membuat tabel di html.

 <table border=”1”>
 <tr>
  <td>Kolom 1</td>
  <td>Kolom 2</td>
  <td>Kolom 3</td>
  <td>Kolom 4</td>
  <td>Kolom 5</td>
 </tr>
</table> 
Berikut hasil membuat tabel di html tersebut

cara membuat tabel di html
Gambar Membuat Tabel Sederhana di HTML

Perhatikan bahwa hanya terdapat satu baris saja pada tabel tersebut,mengapa? Perhatikan bahwa hanya terdapat satu tag <tr>. Ingat tag <tr> berguna untuk membuat atau menambah baris pada tabel. Contohnya sebagai berikut

 
<table border=”1”>
<tr>  </tr>
<tr> </tr>
<tr> </tr>
<tr> </tr>
</table>

Diatas akan membuat baris tabel sebanyak 4 baris didalam table, namun baris tidak akan tampak karena belum ada kolom sama sekali. Kita tambah kolom dan tabel html akan seperti berikut.


<table border=”1”>
<tr> <td> Baris 1 kolom 1</td>  </tr>
<tr> <td>Baris 2 kolom 1</td>  </tr>
<tr> <td>Baris 3 kolom 1</td>  </tr>
<tr> <td>Baris 4 kolom 1</td>  </tr>
</table>

Hasilnya dari script membuat tabel diatas sebagai berikut ini

cara menambah baris dan kolom tabel di html
Gambar Membuat Tabel Di HTML

Sampai disini mengerti cara membedakan tag <tr> dan tag <td>? Intinya. Jika kita ingin menambah baris tabel, maka kita gunakan tag <tr>. Dan jika kita ingin menambahkan kolom tabel pada suatu baris, maka kita gunakan tag <td>. Coba perhatikan contoh script tabel dalam html berikut ini.


<table border=”1”>
 <tr> 
  <td> Baris 1 kolom 1</td> 
   <td> Baris 1 kolom 2</td> 
   <td> Baris 1 kolom 3</td> 
 </tr>
 <tr> 
  <td> Baris 2 kolom 1</td> 
   <td> Baris 2 kolom 2</td> 
   <td> Baris 2 kolom 3</td> 
 </tr>
 <tr> 
  <td> Baris 3 kolom 1</td> 
   <td> Baris 3 kolom 2</td> 
   <td> Baris 3 kolom 3</td> 
 </tr>
</table>

Dari script tabel html tersebut akan membentuk tabel sebagai berikut

cara membuat tabel yang bagus di html
Gambar Membuat tabel di HTML

Membuat Header Tabel di HTML

Kemudian, kita ingin baris pertama adalah bagian judul setiap kolom, maka didalam tag table sudah disediakan tag alternative dari tag <td> yang berguna untuk judul dari setiap kolom yaitu tag <th>. 

Tag <th> biasanya digunakan untuk header dalam membuat tabel di html. Contohnya sebagai berikut.


<table border=”1”>
 <tr> 
  <th> NIM </th> 
   <th> Nama Mahasiswa </th> 
   <th> Jenis Kelamin </th> 
 </tr>
 <tr> 
  <td> 1601003112</td> 
   <td> Anakit</td> 
   <td> Laki-Laki</td> 
 </tr>
 <tr> 
  <td> 1601003112</td> 
   <td> Budi </td> 
   <td> Laki-laki</td> 
 </tr>
</table>
Dari script membuat tabel diatas akan menghasilkan tabel sebagai berikut ini
cara membuat header tabel di html dengan tag <th>
Gambar Membuat Header Tabel di HTML

Dengan tag <th> tersebut membantu dalam menandai perbedaan antara baris penting (Seperti Judul) dan baris lainnya (seperti isi)

Mengatur Letak Tulisan di Table HTML

Untuk Meletakkan Tulisan berada dikiri/tengah/kanan, anda bisa menambahkan attribute pada tag <td> atau <th> yaitu align=”left/center/right” 

<td align=”left”> Meletakkan Tulisan di Kiri </td>
<td align=“center”> Meletakkan Tulisan ditengah </td>
<td align=”right”> Meletakkan Tulisan Kanan </td>, 

Mengatur Lebar Tabel di HTML

Selanjutnya kita bisa mengatur lebar dari table dengan attribute width pada tag <table> agar bisa tentukan lebarnya berapa.

cara mengatur tabel di html dengan pixel
Gambar Mengatur Lebar Tabel di HTML

400 berarti adalah 400 pixel. Jadi anda tinggal menentukan berapa lebarnya tabel yang akan anda buat. Anda juga bisa membuatnya dalam persentase. Semisal anda buat

cara mengatur lebar tabel di html dengan persen
Gambar Mengatur Lebar Tabel di HTML

Nah 30% berarti lebar tabelnya adalah 30% dari lebar layar dengan persentase yang maksimal adalah 100%.

Anda bisa menambahkan attribute align=”left/center/right” untuk memposisikan letak tabel di kiri (left), tengah (center), atau di kanan (right).

<table border=”1” width="30%" align="center">

Fungsi attribute border adalah untuk member garis pada pinggir dari kolom dan table itu sendiri. Semisal kita buat tabel tanpa border. Maka…

<table width="30%" align="center">

Contoh menghilangkan border pada tabel di html.
cara menambah border tabel di html dan cara menghilangkan garis border tabel di html
Gambar Menghilangkan Border Tabel di HTML

Border ini adalah pilihan atau optional terhadap andanya. Tergantung selera saja. Yang penting dalam membuat tabel di html anda mengerti dasar-dasarnya. Namun untuk membuat tabel html yang bagus perlu diperhatikan dalam pemberian border yang tepat

Itulah panduan Cara Membuat Tabel di HTML, semoga dengan artikel ini bisa membantu teman-teman dalam cara membuat sebuah tabel dengan script html.

Apa Selanjutnya?

Membuat Tabel Berwarna di HTML

Selanjutnya Bagaimana membuat tabel html berwarna, ini adalah point penting agar tabel memiliki warna sehingga tabel dalam html tersebut akan lebih menarik. Itu berarti kita akan membahas cara membuat tabel html berwarna dan ini akan membuat tabel html yang bagus.

Nah dalam membuat tabel berwarna didalam html ini tergantung pilihan anda bagaimana pemberian warnanya, apakah keseluruhan langsung atau setiap baris atau setiap kolom

Semisal kita ingin member warna untuk tabel secara keseluruhan baik itu kolom dan baris. Kita hanya menambahkan attribute “bgcolor” saja pada tag <table>, perhatikan pemberian warna pada tabel berikut

<table width="60%" align="center" bgcolor="green">
cara menambahkan warna tabel di html
Gambar Membuat Tabel Berwarna di HTML

Atau
<table width="60%" align="center" bgcolor=”#f3faf”>
cara membuat tabel berwarna dengan html di notepad
Gambar Membuat Tabel Berwarna di HTML


Jika kita ingin memberikan satu warna untuk satu kesatuan tabel, cukup tambahkan “bgcolor” hanya di tag <table>. Anda bisa memberikan warna dalam nama langsung dari warna seperti red, green, blue, dll. Atau bisa dengan kode warna yang biasanya diawal ditambah dengan # seperti terlihat pada contoh pemberian warna diatas.

Namun jika anda ingin memberikan warna yang berbeda-beda setiap baris, maka yang harus anda lakukan adalah menambah attribute “bgcolor” pada tag <tr> yang akan anda berikan warna. Contohnya seperti berikut 


<table width="60%" align="center" bgcolor="green">
 <tr bgcolor="red"> 
  <th> NIM </th> 
   <th> Nama Mahasiswa </th> 
   <th> Jenis Kelamin </th> 
 </tr>
 <tr bgcolor="yellow"> 
  <td> 1601003112</td>
    <td> Anakit</td> 
   <td> Laki-Laki</td> 
 </tr>
 <tr bgcolor="orange"> 
  <td> 1601003112</td> 
   <td> Budi </td> 
   <td> Laki-laki</td> 
 </tr>
</table>
Akan menghasilkan tabel yang berwarna sebagai berikut ini
cara membuat tabel berwarna di html
Gambar Tabel Berwana di HTML


Warna tabel diatas hanya formalitas saja, ingat untuk membuat tabel yang bagus di html yg tentunya menarik, faktor pemberian warna adalah hal yang harus dipertimbangkan dengan tepat. 

Nah begitu juga jika anda ingin memberikan warna yang berbeda pada setiap kolom, maka yang harus anda tambah attribute “bgcolor” pada tag <td> atau <th>. Dan jangan lupa jika pada tag <tr> jangan diberikan “bgcolor” seperti berikut ini


<table width="60%" align="center">
 <tr"> 
  <th bgcolor="red"> NIM </th> 
   <th bgcolor="yellow"> Nama Mahasiswa </th> 
   <th bgcolor="green"> Jenis Kelamin </th> 
 </tr>
 <tr"> 
  <td bgcolor="red"> 1601003112</td>
    <td bgcolor="yellow"> Anakit</td> 
   <td bgcolor="green"> Laki-Laki</td> 
 </tr>
 <tr"> 
  <td bgcolor="red"> 1601003112</td> 
   <td bgcolor="yellow"> Budi </td> 
   <td bgcolor="green"> Laki-laki</td> 
 </tr>
</table>
Demikian pembahasan tentang belajar tabel dalam html, baik itu cara membuat tabel di html, cara memberikan border pada tabel di html, cara memberikan warna tabel di html, cara mengatur lebar tabel di html dengan pixel atau persentase. Semoga artikel ini sangat membantu anda. 

Untuk Membuat Tabel Html Yang Bagus Perlu Untuk Di Pelajari Selanjutnya :
Belajar Membuat 2 Tabel Tau Lebih di HTML
Belajar Cara Membuat Tabel Responsif dengan HTML dan CSS


EmoticonEmoticon