Oleh Ezil Dilihat : 76 17 Januari 2020

Tutorial membuat layout sederhana dengan tag table

Untuk membuat sebuah website biasanya kita menentukan terlebih dahulu tema website yang akan kita buat, lalu kita bisa merancang sebuah layout atau tampilan website kita bakal seperti apa. Untuk seorang pemula yang baru mempelajari HTML, tentu penggunaan tag table untuk membangun layout tentu sangat membantu. Sebelum lanjut ke pembuatan layout alangkah baiknya kita mengerti dulu pengertian, fungsi dan turunan dari tag table

Pengertian, fungsi dan turunan tag table

tag <table> adalah sebuah tag yang berdiri sendiri tentunya didalam tag body. Biasanya tag table digunakan untuk membuat sebuah layout, laporan dan juga untuk merapikan sebuah form input agar tersusun rapi. tag table sendiri mempunyai turunan yaitu <thead>, <tbody> dan <tfoot>.

Tag turunan tersebut biasanya dipakai khusus untuk membuat sebuah struktur laporan atau pun sebuah daftar isi. Pada setiap tag <thead>, <tbody> dan <tfoot> , terdapat turunan tag lagi yaitu hanya tag <tr>, dan tag <tr> memiliki turuanan terakhir yaitu <td> atau <th> .berikut contoh tag <table>.

1.pembuatan laporan ataupun daftar isi

<table>
	<thead>
		<tr>
			<th></th>
			<th></th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tbody>
	<tfoot>
		<tr>
			<td></td>
			<td></td>
		</tr>
	</tfoot>
</table>

2.Pembuatan Form

<form>
	<table>
		<tr>
			<td>Nama</td>
			<td>:</td>
			<td>
				<input type="text"/>
			</td>
		</tr>
		<tr>
			<td>alamat</td>
			<td>:</td>
			<td>
				<input type="text"/>
			</td>
		</tr>
		<tr>
			<td>email</td>
			<td>:</td>
			<td>
				<input type="email"/>
			</td>
		</tr>
	</table>
	<button type="submit">Simpan</button>
</form>

Untuk setiap pembuatan tag tidak boleh ada peletakkan tag lain selain format diatas, jika ada penempatan tag lain, maka hendaknya diletakkan setelah tag <th> atau tag <td>. Berikut kepanjangan dari setiap turunan tag <table>

  • <thead> => table head . yang artinya sebuah blok untuk baris judul
  • <tbody> => table body . yang artinya sebuah blok tempat menampung isi dari table, dan dibagian inilah setiap tag <tr> akan berulang penggunaanya
  • <tfoot> => tabel foot. yang artinya catatan kaki dari sebuah table
  • <tr> => table row . Untuk pembuatan setiap baris
  • <th> => table heading . yang artinya judul kolom. boleh menggunakan tag lain didalam tag ini
  • <td> => table description . merupakan isi dari setiap judul kolom, boleh menggunakan tag lain didalam tag ini

Setelah memahami bagaimana syntax dari sebuah tag table, maka selanjutnya adalah cara membuat layout sederhana dengan tag table

Membuat Layout Sederhana dengan Tag Table

1.Persiapkan folder dan file index.html

Disini kita buat dulu sebuah folder bernama layout, terserah anda mau diletakkan dimana folder tersebut karena kita hanya akan membuat file berekstensi .html. Didalam folder layout itu kita buat dulu sebuah file bernama index.html , setelah dibuat maka selanjutnya buka editor anda, bisa menggunakan sublime, aptana ataupun notepad++ tergantung selera anda

2.Mulai mengkoding untuk membuat layout

<!doctype html>
<html>
	<head>
		<title>Membuat layout sederhana</title>
	</head>
	<body>
		<table border="1" width="80%" align="center">
			<tr>
				<td colspan="2">
					disini judul website
				</td>
			</tr>
			<tr>
				<td style="height:300px; width:150px" valign="top">
					disini menu
				</td>
				<td  valign="top">
					disini konten
				</td>
			</tr>
		</table>
	<body>
</html>

Pada kode diatas, dapat kita lihat ada atribut yang bernama colspan.colspan adalah menggabungkan 2 atau lebih kolom menjadi 1 kolom. dan atribut ini hanya dimiliki oleh tag <th> dan <td>

Setelah selesai mengkoding, maka selanjutnya kita tampilkan hasilnya pada browser, jika kode anda tidak ada yang salah maka akan memunculkan tampilan seperti pada gambar.

wikitapad_membuat_layout_sederhana_dengan_table.JPG

Demikianlah tutorial membuat layout sederhana dengan tag table ini saya sampaikan, untuk selanjutnya kita akan membuat navigasi menu dan menambahkan logo pada layout yang sudah kita buat barusan. silahkan pantengi terus artikel ini untuk dikembangin menjadi sebuah web cantik

Bagikan!!! Tulisan ini jika bermanfaat share artikel ke facebook share artikel ke twitter share artikel ke pinterest share artikel ke linkedin
    Belum ada komentar untuk artikel iniJadilah yang pertama mengomentari artikel ini
Ilmu & Tutorial

Ilmu & Tutorial

HTML

# tutorial layout # tag table
Artikel Ilmu & Tutorial
Portal Berita
  1. Dampak Corona, Pabrik Yamaha Hentikan Sementara Produksi Motor - Kompas.com - KOMPAS.com
  2. Unboxing Oppo Reno 3, Kamera Selfie Lebih Besar Dari Versi Global - Nextren
  3. Musisi AS, DJ Black N Mild Meninggal karena Covid-19 - Dream
  4. Meggy Diaz Minta Kejelasan Status Hubungannya dengan Tukul Arwana - Kompas.com - KOMPAS.com
  5. Foto Rafathar Dipajang Oleh Akun Jual Beli Bayi, Raffi Ahmad dan Nagita Slavina Meradang - KapanLagi.com
  6. Ramai Mobil Ceper Pakai Airsus, Bus Sudah Dahulu Pakai - Kompas.com - Otomotif Kompas.com
  7. Kalau Roy Keane Manajer MU, David De Gea Sudah Digantung - detikSport
  8. Kontras, Majikannya Makan Enak di Atas Kursi, ART Ayu Ting-ting Sibuk Nikmati Santapan sambil Jongkok dan D... - Suar
  9. 10 Fakta Jihane Almira, Juara Tiga Puteri Indonesia 2020 - Wolipop
  10. Resmi Rilis di RI Hari ini, Berapa Harga Oppo Reno 3? - CNBC Indonesia
  11. Resmi Diperkenalkan, Intip Spesifikasi Lengkap Apex 2020 - detikInet
  12. Penyebaran Virus Corona Bisa Lewat Udara, Benarkah? - Detiknews
  13. Krustasea Baru Ditemukan, Namanya Diambil Dari Grup Band Metallica - National Geographic - National Geographic
  14. Hadapi Persita Tangerang, PSM Makassar Waspada - detikSport
  15. Anaknya Nangis, Andre Taulany Coba Beli Kembali Mobil Rp 700 Juta dari Raffi Ahmad - Kompas.com - KOMPAS.com
  16. DNA Manusia Tertua di Dunia Ditemukan pada Potongan Gigi Kanibal - Kompas.com - KOMPAS.com
  17. Oppo Gelar Trade-In Reno3 - Selular.ID
  18. Asyik! Menteri Basuki tunda kenaikan tarif tol, apa alasannya? - Kontan
  19. Facebook Larang Iklan yang Mengklaim Sembuh dari Virus Corona - Kompas.com - KOMPAS.com
  20. Gejala Virus Corona - detikNews