DeretCode|

Tips, Trik dan Tutorial
Seputar IT, Coding, Internet Marketing, Keahlian, Pendidikan, Hobi Dan Lainnya
Night :

Tutorial Lengkap Belajar Html # Membuat Tabel Html

advertisement
Membuat tabel html

Sebelumnya kita telah belajar bagaimana cara format teks di html.
Pada tutorial kali ini kita akan belajar cara membuat sebuah tabel html.
Tabel dapat kita gunakan untuk menampilkan ikhtisar sejumlah data informasi berupa kata kata atau bilangan agar lebih mudah dipahami.
Tabel tersusun dari baris dan kolom
Struktur tabel
Dan kotak hasil irisan dari kolom dan baris disebut sel.
Sel tabel

Tag Pembuat Tabel Html

Untuk membuat tabel maka kita perlu tag-tag penyusun tabel.
Tag Keterangan Sering digunakan
<table> Digunakan untuk membuat tabel
<tr> Digunanak untuk untuk membuat baris cell baru
<td> Digunakan untuk untuk membuat kolom cell baru
<thead> Digunakan untuk membuat membungkus bagian judul kolom
<tbody> Digunakan untuk membungkus bagian dari isi dari tabel
<tfoot> Digunakan untuk untuk membungkus bagian footer dari tabel
<th> Digunakan untuk membuat kolom judul tabel
<caption> Digunakan untuk membuat judul/informasi singkat dari tabel
<col> Digunakan untuk membuat styling dari kolom
<colgroup> Digunakan untuk mengelompokan tag <col>
Kita tidak akan menggunakan semuanya. 
Hanya tag-tag yang dengan tanda ✔ diatas yang akan sering kita gunakan untuk membuat tabel

Cara membuat tabel html

Membuat tabel secara sederhana

Membuat tabel secara sederhana artinya kita hanya menggunakan tag-tag pokok dalam membuat tabel, yaitu tag <table>, <tr><th>dan <td>.
Contohnya,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
      <table border="1">
         <tr>
           <th>No</th>
           <th>Nama</th>
         </tr>
         <tr>
           <td>1</td>
           <td>Deret</td>
         </tr>
         <tr>
           <td>2</td>
           <td>Code</td>
         </tr>
      </table>
    </body>
</html>
Hasilnya,
Cara menampilkan tabel sederhana
Penjelasan,
Penjelasan struktur tabel
  1. <tr> digunakan untuk membuat baris tabel
  2. <th> digunakan untuk membuat kolom judul
  3. <td> digunakan untuk membuat sel kolom 

Membuat tabel secara sempurna

Membuat tabel secara sempurna artinya kita menambahkan tag <thead>,<tbody> dan <tfoot> untuk mengelompokan bagian header tabel, isi tabel dan footer tabel.
Contohnya,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
      <table border="1">
	 <thead>
	    <tr>
		<th>No</th>
		<th>Nama</th>
	    </tr>
	  </thead>
	  <tbody>
	    <tr>
		<td>1</td>
		<td>Deret</td>
	    </tr>
	    <tr>
		<td>2</td>
		<td>Code</td>
	    </tr>
	   </tbody>
	   <tfoot>
	    <tr>
		<td>Jumlan:</td>
		<td>2</td>
	    </tr>
	   </tfoot>
      </table>
    </body>
</html>
Hasilnya,
Membuat tabel sempurna
Hasilnya memang akan terlihat sama, tapi tabel yang dibuat memiliki struktur yang lengkap jika kita liat kode tabel itu sendiri.
Note: Selalu pastikan tag <td> atau <th> selalu didalam tag <tr> tidak boleh terbalik

Tips dan trik membuat tabel html

Menggabungkan sel

Untuk menggabungkan sel yang ada disebuah tabel kita dapat menggunakan atribut colspan dan rowspan.
colspan digunakan untuk menggabungkan sel ke arah samping (kolom) dan rowspan digunakan untuk menggabungkan sel kearah bawah(baris).
Contoh,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
      <table border="1">
		<thead>
		  <tr>
			<th>Bulan</th>
			<th>Tabungan</th>
			<th>Pengeluaran<th>
		  </tr>
		</thead>
		<tbody>
		  <tr>
			<td>Januari</td>
			<td>100.000</td>
			<td rowspan="2">10.000</td>
		  </tr>
		  <tr>
			<td>Februari</td>
			<td>200.000</td>
		  </tr>
		</tbody>
		<tfoot>
		  <tr>
			<td colspan="2">Jumlah Sekarang</td>
			<td>280.000</td>
		  </tr>
		</tfoot>
	  </table>
    </body>
</html>
Hasilnya,
Contoh colspan dan rowspan

Membuat nowrap sel

Ketika kita ingin teks yang ada di dalam sel tidak di wrapping jika teks tersebut panjang maka kita bisa menggunakan atribut nowrap
Contohnya,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
      <table border="1">		
        <tr>
	    <td>Deretcode.com</td>
	    <td nowrap>Ini adalah tutorial membuat tabel di html</td>
	</tr>	  
      </table>
    </body>
</html>
Hasilnya,
Contoh penggunaan atribut nowrap


Memberikan warna latar belakang pada sel

Memberikan warna latarbelakang pada sel dapat dilakukan dengan menggunakan atribut bgcolor .
Contohnya,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
      <table border="1">		
        <tr>
	    <td>Deretcode.com</td>
	    <td bgcolor="red">Ini adalah tutorial membuat tabel di html</td>
	</tr>	  
      </table>
    </body>
</html>
Hasilnya,
Contoh penggunaan atribut bgcolor
bgcolor adalah atribut general, bisa di gunakan pada tag html apapun bukan hanya <td>

Membuat tabel dapat discroll

Jika tabel yang kita buat terlalu lebar sehingga tidak cukup untuk ditampilkan secara penuh dilayar, kita bisa membuat tabel tersebut dapa di scroll. Caranya adalah dengan membungkus tabel tersebut dengan elemen div dan tambahkan atribut style dengan property css overflow-x:auto didalamnya.
Contohnya,
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Deretcode.com</title>
    </head>
    <body>
	<div style="overflow-y:auto;">
	  <table border="1">		
	    <tr>
	      <td>Deretcode.com</td>
	      <td nowrap>Ini adalah tutorial membuat tabel di html</td>
	    </tr>	  
	  </table>
	</div>
    </body>
</html>
Hasilnya,
Cara membuat tabel dapat di scroll


Sampai disini tutorial tentang cara membuat tabel di html. Jika kalian merasa artikel ini bermanfaat silahkan klik tombol share dan jika ada hal yang ingin di tanyakan atau disampaikan silahkan tulis di kolom komentar.


advertisement



0 Komentar untuk " Tutorial Lengkap Belajar Html # Membuat Tabel Html"

Silahkan berkomentar dengan baik dan bijak!