Oleh Ezil Dilihat : 166 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
Pendidikan & Tutorial

Pendidikan & Tutorial

Web Develop

# tutorial layout # tag table
Artikel Web Develop
Portal Berita
  1. 4 Fakta tentang Asteroid Apollo yang Dekati Bumi 15 Ramadan Besok - Liputan6.com
  2. Perbedaan Khas Khabib Nurmagomedov Ketimbang Petarung UFC Lainnya - Kompas.com - KOMPAS.com
  3. Satelit Nusantara Dua Gagal Mengorbit, Layanan Penyiaran Tetap Aman - Kompas.com - KOMPAS.com
  4. Ferdinand Sinaga Bersahabat dengan Gawang Barito Putera - detikSport
  5. Ke Media Kroasia, Bojan Hodak Cerita Gilanya Suporter Indonesia - detikSport
  6. Lagi, dua balita PDP di Probolinggo meninggal dunia - ANTARA Jawa Timur
  7. [POPULER HYPE] Mobil Via Vallen Dibakar Orang | Baim Wong Klarifikasi soal Tagar #ShameOnYouBaimWong - Kompas.com - KOMPAS.com
  8. BRI & BCA Kuasai Hampir Sepertiga Transaksi BEI Hari Ini - CNBC Indonesia
  9. Buka-bukaan Joanna Alexandra soal Hamil di Luar Nikah hingga Anak Alami Perundungan - Kompas.com - KOMPAS.com
  10. Mau Beli Mobil Bulan Juni? Ada Cashback Rp 17 Juta Hingga Gratis Servis 4 Tahun - Detikcom
  11. Hati-hati, Gangguan Gigi dan Mulut Tingkatkan Risiko Penyakit Jantung - Kompas.com - KOMPAS.com
  12. Mike Tyson: Saya Tak Akan Menang Lawan Muhammad Ali dalam Pertarungan Sesungguhnya - Kompas.com - KOMPAS.com
  13. Bocoran Spesifikasi Xiaomi Redmi 9 - Republika Online
  14. Pemerintah: Jika Sakit Gejala Influenza Periksa, Jangan Tebak-tebak Sendiri - detikNews
  15. Raptor Bukan Dinosaurus Pemburu Mangsa Berukuran Besar, Ini Buktinya - Kompas.com - KOMPAS.com
  16. Sayonara! Ini Surat Perpisahan Chevrolet Hengkang dari RI - CNBC Indonesia
  17. Sukses jadi Youtuber, Intip Rumah Masa Kecil Ria Ricis yang Bisa Lihat Langsung Singapura dari Rooftop - Suar
  18. Cuma 4 Menit, 1.500 Unit Realme Narzo Ludes Terjual - Suara.com - Suara.com
  19. Undian Piala Asia U-19 2020 - Timnas U-19 Indonesia Diunggulkan, Malaysia Sesumbar Lolos Piala Dunia U-20 2021 - Bolasport.com
  20. Dulu Hidup Susah di Manggarai, Betrand Peto Ngaku Akhirnya Cicipi Lezatnya Buah Apel Setelah Jadi Anak Angk... - Grid.ID