Membuat Tabel Dengan HTML

Dapet request dari temen untuk update informasi tentang html lagi (label webdesign) karena memang untuk membuat suatu blog yang rapih dan menarik basic ini sangat diperlukan. Kali ini akan dibahas bagaimana cara membuat tabel dengan HTML, yaa !!! script html ini saya gunakan untuk merapihkan advertise dan menu yang mungkin akan saya pasang pada halaman blog, cara ini sangat berguna untuk menata dan memanfaatkan space yang ada hanya dengan menambahkan 1 element layout pada blogger.

Berikut script untuk mebuat tabel sederhana seperti ini

isi kolom 1 baris 1

scriptnya adalah seperti berikut

<table width="200" border="1">
<tr>
<td>isi kolom 1 baris 1</td>
</tr>
</table>

table width = lebar tabel yang diinginkan
border = garis yang membatasi tabel
untuk menambahkan kolom hanya cukup menambahkan atau mengkopi baris <td> sampai </td> dan letakan dibawah script yang sama. dimana <td> adalah kode pembuka untuk membentuk kolom pada tabel dan </td> adalah kode penutupya.

<table width="200" border="1">
<tr>
<td>isi kolom 1 baris1</td>
<td>isi kolom 2 baris1</td><-- script kolom baru </tr> </table>
lihat hasil nya :

isi kolom 1 baris 1

isi kolom 2 baris 1

sekarang kita coba tambahkan baris dari kolom tabel yang sudah ada, berikut adalah scriptnya.

<table width="200" border="1">
<tr>
<td>isi kolom 1 baris 1 </td>
<td>isi kolom 2 baris 1 </td>
</tr>
<tr>
<td>isi kolom 1 baris 2 </td>
<td>isi kolom 2 baris 2 </td>
</tr>
</table>

untuk menambahkan baris kita tinggal mengcopy tanda <tr> sampai </tr> maka dihasilkan baris ke2 pada tabel. perlu di ingat tanda <tr> adalah kode pembuka untuk menciptakan baris pada tabel dan </tr> kode penutup untuk mengakhiri baris pada tabel.

bingung melihat script yang berderet, he he he he, pelajarilah terus maka anda akan terbiasa melihatnya bahkan dengan deretan script yang leboh komplex, supaya tidak coba saya beri tanda seperti berikut.

isi kolom 1 baris 1	isi kolom 2 baris 1
isi kolom 1 baris 1	isi kolom 2 baris 1

warna merah menandakan baris pertama dan warna biru menandakan baris kedua. Bagai mana script untuk memberi warna tabel diatas ??? berikut scripnya

<table width="200" border="1">
<tr>
<td bgcolor="blue">isi kolom 1 baris 1 </td>
<td bgcolor="blue">isi kolom 2 baris 1 </td>
</tr>
<tr>
<td bgcolor="red">isi kolom 1 baris 2 </td>
<td bgcolor="red">isi kolom 2 baris 2 </td>
</tr>
</table>

Sederhana bukan he he he ...... memang untuk membuatnya lebih mudah anda bisa menggunakan HTML editor seperti front page atau dreamweaver GUI based dengan langkah yang jauh lebih mudah dan tinggal mengcopy – paste kode html ke tag element yang anda tambahkan untuk blog anda, tentunya dengan basic yang sudah anda dapat dari bahasan diatas. Sebagai contoh untuk menampilakan iklan yang terdiri dari 2 kolom akan tampak seperti ini .



Umumnya banyak blogger menggunaka cara ini untuk memanfaatkan space yang tersedia pada kolom samping kanan halaman blog mereka . adapun script dari tampilan diatas adalah sebagai berikut.

<table border="0" width="200"><tr><td><a href="Link / alamat File Gambar anda" target="_blank"><img src="Source File Gambar anda"/></a></td><td><a href="Link / alamat File Gambar anda" target="_blank"><img src="Source File Gambar anda"/></a></td></tr> </table>

Sedikit tambahan penjelasan dari script diatas
<a href="link address" target="_blank">

a href = adalah script yang digunakan untuk membuat gambar atau text menjadi link atau agar gambar atau text bisa di klik dan diarahkan ke suatu halaman website tertentu , dalam kasus diatas ketika user mengklik gambar sebelah kiri maka akan mengarah ke alamat website http://tinyurl.com/6tby9g akhiri dengan kode </a> pada akhir objeck yang ingin di link.

target=blank , maksud dari script diatas adalah ketika anda mengklik gambar dan akan mengarah ke suatu alamat website maka alamat website tujuan akan terbuka pada tab atau window baru tanpa merubah window http://dibahas.com

img src= , adalah scipt untuk menampilkan gambar ( baca disini untuk penjelasanya ) dimana http://www.blogopics.net adalah image hosting / tempat mengumpulkan file gambar diserver online.

Posted in: Web-Blog 2:59 PM