Beranda > tutorial > Tutorial HTML bagian 3

Tutorial HTML bagian 3

Rasanya sudah lama sekali saya terbitkan HTML bagian 2. Nah sekarang saatnya kita lanjutkan lagi ke bagian 3. Kali ini kita akan membahas mengenai Table pada HTML. Untuk membuat tabel ada beberapa tag yang harus kita mengerti, yaitu :

<table>   merupakan tag awal tabel

<tr>   tag awal sebuah baris

<td>  tag awal sebuah kolom

</td> tag akhir sebuah kolom

</tr>  tag akhir sebuah baris

</table>  tag akhir table

Ada beberapa peroperti pada tag tabel yaitu :

kita coba latihan yuk,, buat file baru dengan nama tabel.html

<html>

<head>

<title>Latihan membuat table bersama indonesi4ku</title>

</head>

<body>

<table bgcolor=”#99999″ border=”1″ celpadding=”10″>

<tr>

<td> Kolom 1   </td>

<td> Kolom 2 </td>

</tr>

<tr>

<td> Kolom 3   </td>

<td> Kolom 4 </td>

</tr>

</table>

</body>

</html>

nah gimana bisa nggak??? bisa dong!!!! kalau di Excel mungkin sangat mudah untuk menyatukan kolom atau baris nah ada properti pada <td> yang dapat digunakan untuk menyatukan atau merge cell yaitu :

nah sekarang kita langsung coba aja ke latihan berikutnya. buat sebuah file baru dengan nama tabel2.html

<html>

<head>

<title>Latihan merge kolom bersama  indonesi4ku</title>

</head>

<body>

<table bgcolor=”#99999″ border=”1″ celpadding=”10″>

<tr>

<td colspan=”2″> Kolom 1/3   </td>

<td> Kolom 2 </td>

</tr>

<tr>

<td> Kolom 4 </td>

</tr>

</table>

</body>

</html>

nilai yang ada didalam colspan/ rowspan adalah jumlah kolom yang ingin disatukan/ merge

sekarang kita coba buat file tabel3.html

<html>

<head>

<title>Latihan membuat table bersama indonesi4ku</title>

</head>

<body>

<table bgcolor=”#99999″ border=”1″ celpadding=”10″>

<tr>

<td rowspan=”2″ bgcolor=”green”> Kolom 1   </td>

</tr>

<tr>

<td> Kolom 3   </td>

<td> Kolom 4 </td>

</tr>

</table>

</body>

</html>

  1. Belum ada komentar.
  1. No trackbacks yet.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: