Tabel Html

Pernahkan anda memikirkan cara membuat tabel di Web? Ternyata HTML itu mendukung juga cara pembuatan Tabel. Jadi bagi yang ingin menampilkan informasinya melalui Tabel, HTML pun bisa layaknya seperti Aplikasi Writer.

Contoh codenya:

Satu Kolom

<html>
<body>
<p>Ini adalah tabel pertamaku</p>
<table border=”1″>
<tr>
<td>aku</td>
</tr>
</table>
</body>
</html>

Hasilnya:
Ini adalah tabel pertamaku

aku

Satu baris, 3 kolom

<html>
<body>
<p>Ini adalah tabel pertamaku</p>
<table border=”1″>
<tr>
<td>aku</td>
<td>Kamu</td>
<td>Kita</td>
</tr>
</table>
</body>
</html>

Hasilnya:
Ini adalah tabel pertamaku

aku Kamu Kita

Dua baris, dua kolom

<html>
<body>
<p>Ini adalah tabel pertamaku</p>
<table border=”1″>
<tr>
<td>aku</td>
<td>Kamu</td>
</tr>
<tr>
<td>Kita</td>
<td>Kami</td>
</table>
</body>
</html>

Hasilnya:

Ini adalah tabel pertamaku

aku Kamu
Kita Kami

Tabel Border

Apa si tabel border itu?

Tabel border itu kalo menurut saya adalah tampilan garis-garis tepi yang ada pada tabel. Seperti hasil tabel di atas kan ada tepi-tepi berbentuk garis gitu? Nah itu yang dinamakan border

Contoh codenya:

<html>
<body>
<p>Ini tabel border normal</p>
<table border=”1″>
<tr>
<td>aku</td>
<td>Kamu</td>
</tr>
<tr>
<td>Kita</td>
<td>Kami</td>
</table>
<p>Tabel border tebal</p>
<table border=”6″>
<tr>
<td>aku</td>
<td>Kamu</td>
</tr>
<tr>
<td>Kita</td>
<td>Kami</td>
</table>
<p>Tabel border sangat tebal</p>
<table border=”10″>
<tr>
<td>aku</td>
<td>Kamu</td>
</tr>
<tr>
<td>Kita</td>
<td>Kami</td>
</table>
</body>
</html>

Hasilnya:

Ini tabel border normal

aku Kamu
Kita Kami

Tabel border tebal

aku Kamu
Kita Kami

Tabel border sangat tebal

aku Kamu
Kita Kami

Tabel tanpa border

Contoh tabel tanpa border:

<html>
<body>
<p>Contoh table tanpa border</p>
<table border=”0″>
<tr>
<td>Aku</td>
<td>Kamu</td>
</tr>
<tr>
<td>Aku</td>
<td>Kamu</td>
</tr>
</table>
</body>
</html>

Tabel dengan Caption (judul)

Contoh Codenya:

<html>
<body>
<p>Contoh table dengan caption</p>
<table border=”1″>
<caption>Ini tabelku</caption>
<tr>
<td>Aku</td>
<td>Kamu</td>
</tr>
<tr>
<td>Aku</td>
<td>Kamu</td>
</tr>
</table>
</body>
</html>

Hasilnya:
Contoh table dengan caption

Ini tabelku
Aku Kamu
Aku Kamu

Header dalam Tabel

Dan yang ini adalah contoh bagaimana membuat tabel dengan tambahan header.
Contoh codingannya:

<html>
<body>
<p>Contoh table dengan header</p>
<table border=”1″>
<tr>
<th>Aku</th>
<th>Kamu</th>
</tr>
<tr>
<td>Aku</td>
<td>Kamu</td>
</tr>
</table>
</body>
</html>

Hasilnya akan tampak seperti ini:

Contoh table dengan header

Aku Kamu
Aku Kamu

Colspan & Rowspan

Colspan dan Rowspan ini adalah menggabungkan 2 buah atau lebih cell sesuai kebutuhannya. Contoh codingannya:

<html>
<body>
<p>Contoh colspan dan rowspan</p>
<table border=”1″>
<tr>
<th colspan=”2″>Aku</th>
<th>Kamu</th>
</tr>
<tr>
<td>Aku</td>
<td>Kamu</td>
</tr>
</table>
</body>
</html>

Tampilannya akan terlihat seperti ini:

Contoh colspan dan rowspan

Aku Kamu
Aku Kamu Kita

Cell kosong

Suatu saat nanti kita pasti akan dihapadi dengan cell kosong pada tabel. Lalu bagaimanakah contoh codingannya?
Lihat ini:

<html>
<body>
<p>Contoh cell kosong</p>
<table border=”1″>
<tr>
<th >Aku</th>
<th >Kamu</th>
</tr>
<tr>
<td></td>
<td>Kamu</td>
</tr>
</table>
</body>
</html>

Hasilnya:

Contoh cell kosong

Aku Kamu
Kamu

Tag lain dalam suatu tabel

Pada kasus ini, saya akan mencoba membuat coding yang menampilkan tag lain yang ada di dalam tabel. Misalnya di dalam tabel terdapat tag ordered list dan lain-lain, atau bahkan menampilkan tabel di dalam tabel.
Contoh:

<html>
<body>
<table border="1">
<tr>
<td>
  <ul>
	<li>Aku adalah imron</li>
	<li>Aku adalah budi</li>
  </ul>
</td>
<td>
Tabel di dalam tabel:
<table border="1">
  <tr>
    <td>Ini adalah cell 1</td> 
    <td>Ini adalah cell 2</td>
  </tr>
</td>
</tr>
<tr>
   <td></td>
   <td>Kamu</td>
</tr>
</table>
</body>
</html>

Hasilnya:

  • Aku adalah imron
  • Aku adalah budi
Tabel di dalam tabel:

Ini adalah cell 1 Ini adalah cell 2
Keren ya… !! Kamu

Cellpadding

Mungkin sudah paham maksudnya setelah : judul di atas. Jadi maksudnya memberikan padding pada cell tabel.
Contoh codingannya:

Contoh cellpadding
<html>
<body>
<table border="1">
<tr>
<th>Satu</th>
<th>Dua</th>
</tr>
<tr>
<td>Tiga</td>
<td>Empat</td>
</tr>
</table>
</body>
</html>

Cellspacing

Contoh codingannya:

<html>
<body>
<table border="1">
<tr>
   <td cellspacing="5">Satu</td>
   <td cellspacing="5">Dua</td>
</tr>
<tr>
   <td cellspacing="5">Tiga</td>
   <td cellspacing="5">Empat</td>
</tr>
</table>
</body>
</html>

Pengaturan alignment tabel

Agar tabel terlihat rapih, maka kita juga perlu mengatur alignment dari si tabel tersebut. Contoh codingannya:

<html>
<body>
<table border="1">
<tr>
   <th>Nama</td>
   <th>Alamat</td>
</tr>
<tr>
   <td align="left">Imron</td>
   <td align="left">Jakarta</td>
</tr>
<tr>
   <td align="left">Laura</td>
   <td align="left">Jakarta</td>
</tr>
</table>
</body>
</html>
Advertisements

One comment

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