Widodo

#HTML Dasar Part 7 Cara Membuat Table dengan HTML

Cara Membuat Table

Dalam menampilkan data yang terstruktur biasanya kita selalu menampilkanya dalam bentuk tabel. HTML juga menyediakan Tabel tag digunakan untuk menampilkan data dalam bentuk tabel. Dalam tutorial ini kita akan membahas cara penggunaannya.

Table adalah cara kita menampilkaninformasi dalam susunan rapi didalam kotak-kotak yang dibentuk dari baris dan kolom. Untuk membuat table di HTML ada tiga buah tag yangdilibatkan antara lain :

  • Tag <table> digunakan untuk memulai pembuatan table didalam halaman web.
  • Tag <tr> (Singkatan dari table row) digunakan untuk membuat baris table.
  • Tag <td> (Singkatan dari table data) digunakan untuk menginput data ke table.

Berikut contoh kode HTML untuk membuat table sederhana didalam halaman web.

<table border="1">
	<tr>
		<td>Header</td>
		<td>Header</td>
		<td>Header</td>
	</tr>

	<tr>
		<td>Item</td>
		<td>Item</td>
		<td>Item</td>
	</tr>

	<tr>
		<td>Item</td>
		<td>Item</td>
		<td>Item</td>
	</tr>

	<tr>
		<td>Item</td>
		<td>Item</td>
		<td>Item</td>
	</tr>

	<tr>
		<td>Item</td>
		<td>Item</td>
		<td>Item</td>
	</tr>

</table>

 

Tag <table> memiliki atribut bernama border  yang digunakan untuk memberikan nilai garis tepi dari table. Nilai ini diatur dalam satuan pixel. Dengan demikian, border="1" berarti kita menginstruksikan kepada web browser bahwa table tersebut akan dilengkapi garis tepi sebesar 1 pixel. Jika tidak ditambahkan, secara default table tidak memiliki garis tepi.

Menggabung Beberapa Sel

Apabila anda ingin membuat sel berukuran besar diantara sel-sel lainnya, maka anda bisa menggunakan atribut colspan yang diletakkan didalam tag <td>. Sebagai contoh, kalau kita ingin menggabungkan tiga sel menjadi satu, cukup kita tuliskan seperti ini :

<table border="1">
	<tr>
		<td>Header</td>
		<td>Header</td>
		<td>Header</td>
	</tr>

	<tr>
		<td colspan="2">Item</td>
		<td>Item</td>
	</tr>

	<tr>
		<td colspan="2">Item</td>
		<td>Item</td>
	</tr>

	<tr>
		<td colspan="2">Item</td>
		<td>Item</td>
	</tr>

	<tr>
		<td colspan="2">Item</td>
		<td>Item</td>
	</tr>
</table>

Sedangkan apabila anda ingin menggabung bebebrapa baris menjadi sel, maka gunakan atribut rowspan seperti ini :

<table border="1">
	<tr>
		<td>Header</td>
		<td>Header</td>
		<td>Header</td>
	</tr>

	<tr>
		<td rowspan="2">Item</td>
		<td>Item</td>
		<td>Item</td>
	</tr>


	<tr>
		<td>Item</td>
		<td>Item</td>
	</tr>

	<tr>
		<td>Item</td>
		<td>Item</td>
		<td>Item</td>
	</tr>

</table>

Sampai disini kita telah mempelajari beberapa tag HTML yang sering digunakan dalam pembuatan halaman web Semoga tutorial ini bermanfaat Bagi teman-teman yang baru saja belajar dasar-dasar HTML.



0 Komentar


Copyright © 2015 S-widodo.com Digital marketing