Tabel di HTML

Untuk bisa menyisipkan table di html kita bisa menggunakan tag <table>. Tp sebelumnya kita perlu memahami konsepnya terlebih dahulu. Perhatikan gambar dibawah ini.


table

inserttable

Keterangan :
<tr> : Table Row (Baris)
<td> : Table Data (Cell)

Jadi untuk membuat table seperti gambar di atas kurang lebih seperti ini.

<table>
	<tr>
		<td>First Name</td>
		<td>Last Name</td>
		<td>Points</td>
	</tr>
	
	<tr>
		<td>Jill</td>
		<td>Smith</td>
		<td>50</td>
	</tr>
	
	<tr>
		<td>Eve</td>
		<td>Jackson</td>
		<td>94</td>
	</tr>
	
	<tr>
		<td>John</td>
		<td>Doe</td>
		<td>80</td>
	</tr>
	
	<tr>
		<td>Adam</td>
		<td>Johnson</td>
		<td>67</td>
	</tr>
</table>

Hasilnya :
runtable1.

Anehnya, kok gak sama sama contoh di atas ya? Memang terdapat perbedaan dengan contoh di atas. Mari kita bandingkan dulu.

compare_table2

Untuk bisa seperti table yang dibawah maka kita tinggal tambahkan di tag

code border=”1”.

insert_table3

<table border="1">
	<tr>
		<td>First Name</td>
		<td>Last Name</td>
		<td>Points</td>
	</tr>
	
	<tr>
		<td>Jill</td>
		<td>Smith</td>
		<td>50</td>
	</tr>
	
	<tr>
		<td>Eve</td>
		<td>Jackson</td>
		<td>94</td>
	</tr>
	
	<tr>
		<td>John</td>
		<td>Doe</td>
		<td>80</td>
	</tr>
	
	<tr>
		<td>Adam</td>
		<td>Johnson</td>
		<td>67</td>
	</tr>
</table>

Coba lihat hasilnya di browser.

insert_table4

Biasanya dalam sebuah tabel terdapat informasi kepala tabel. Bagaimana kita bisa membuat kepala tabel dengan menggunakan scripts html?

kpltable

Untuk dapat membuat kepala tabel kita bisa menggunakan <th> (table header) sehingga jika kita modifikasi scripts sebelumnya akan menjadi seperti ini

<tr>
	<th>First Name</th>
	<th>Last Name</th>
	<td>Points</td>
</tr>

Perhatikan tag <td> (table data) berganti menjadi <th> (table header)

Segini dulu untuk dasar membuat table dengan html. Kedepannya penulis usahakan untuk upload bagaimana mengeluarkan file yang telah tersimpan di mysql dalam bentuk tabel seperti di atas.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s