Cara Membuat Berbagai Jenis Tabel HTML
Tag Dalam Suatu Tabel
Contoh ini mendemonstrasikan bagaimana menampilkan elemen di dalam elemen lain.
<html>
<body>
<table border =”1”>
<tr>
<td>
<p>This is a paragraph</o>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table :
<table border=”1”>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<td> This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pinapple</li>
</ul>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
<body>
<table border =”1”>
<tr>
<td>
<p>This is a paragraph</o>
<p>This is another paragraph</p>
</td>
<td>This cell contains a table :
<table border=”1”>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
</td>
</tr>
<td> This cell contains a list
<ul>
<li>apples</li>
<li>bananas</li>
<li>pinapple</li>
</ul>
</td>
<td> </td>
</tr>
</table>
</body>
</html>
| This is a paragraph |
This is another paragraph
This cell contains a table :
| A | B |
| C | D |
- apples
- bananas
- pinapple
Cellpadding
Contoh ini menunjukkan bagaimana menggunakan cellpedding untuk membuat spasi lebih dari antara sel dan bordernya.
Cellspacing
<html>
<body>
<h4>Without Cellpadding:</h4>
<table border=”1”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With Cellpadding :</h4>
<table border=”1” cellpadding=”10”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
<body>
<h4>Without Cellpadding:</h4>
<table border=”1”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With Cellpadding :</h4>
<table border=”1” cellpadding=”10”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Without Cellpadding:
| First | Row |
| Second | Row |
With Cellpadding :
| First | Row |
| Second | Row |
Cellspacing
Contoh ini menunjukkan bagaimana menggunakan cellspacing untuk menambah jarak antar sel.
Mengatur Align (Isi) Sel
<html>
<body>
<h4>Without Cellspacing:</h4>
<table border=”1”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With Cellscpacing :</h4>
<table border=”1” cellspacing=”10”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
<body>
<h4>Without Cellspacing:</h4>
<table border=”1”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>With Cellscpacing :</h4>
<table border=”1” cellspacing=”10”>
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
Without Cellspacing:
| First | Row |
| Second | Row |
With Cellscpacing :
| First | Row |
| Second | Row |
Mengatur Align (Isi) Sel
Contoh ini menunjukkan bagaimana menggunakan atribut align untuk mengatur isi sel, membuat tabel lebih teratur/menarik untuk dilihat.
Tabel Dalam Tabel
<html>
<body>
<table width=”400” border=”1”>
<tr>
<th align=”left”>Money Spent On...</th>
<th align=”right”>January</th>
<th align=”right”>February</th>
</tr>
<tr>
<td align=”left”>Clothes</td>
<td align=”right”>$241.10</td>
<td align=”right”>$50.20</td>
</tr>
<tr>
<td align=”left”>Make-up</td>
<td align=”right”>$30.00</td>
<td align=”right”>$44.45</td>
</tr>
<tr>
<td align=”left”>Food</td>
<td align=”right”>$730.40</td>
<td align=”right”>$650.00</td>
</tr>
<tr>
<td align=”left”>Sum</td>
<td align=”right”>$1001.50</td>
<td align=”right”>$744.65</td>
</tr>
</table>
</body>
</html>
<body>
<table width=”400” border=”1”>
<tr>
<th align=”left”>Money Spent On...</th>
<th align=”right”>January</th>
<th align=”right”>February</th>
</tr>
<tr>
<td align=”left”>Clothes</td>
<td align=”right”>$241.10</td>
<td align=”right”>$50.20</td>
</tr>
<tr>
<td align=”left”>Make-up</td>
<td align=”right”>$30.00</td>
<td align=”right”>$44.45</td>
</tr>
<tr>
<td align=”left”>Food</td>
<td align=”right”>$730.40</td>
<td align=”right”>$650.00</td>
</tr>
<tr>
<td align=”left”>Sum</td>
<td align=”right”>$1001.50</td>
<td align=”right”>$744.65</td>
</tr>
</table>
</body>
</html>
| Money Spent On... | January | February |
|---|---|---|
| Clothes | $241.10 | $50.20 |
| Make-up | $30.00 | $44.45 |
| Food | $730.40 | $650.00 |
| Sum | $1001.50 | $744.65 |
Tabel Dalam Tabel
Berikut ini contoh tabel dalam tabel.
<html>
<head>
<title></title>
</head>
<body>
<h1>Table on Table<h1>
<hr>
<table border=”1”>
<tr>
<td>Parent 1</td>
<td>
<table border=”1”>
<tr>
<td>Child 1</td>
<td>
<table border=”1”>
<tr>
<td>Grandson 1</td>
<td>Grandson 2</td>
</tr>
<td>Grandson 3</td>
<td>Grandson 4</td>
</table>
</tr>
<tr>
<td>Child 2</td>
<td>Child 3</td>
</tr>
</table>
</td>
</tr>
<td>Parent 2</td>
<td>Parent 3</td>
</table>
</body>
</html>
<head>
<title></title>
</head>
<body>
<h1>Table on Table<h1>
<hr>
<table border=”1”>
<tr>
<td>Parent 1</td>
<td>
<table border=”1”>
<tr>
<td>Child 1</td>
<td>
<table border=”1”>
<tr>
<td>Grandson 1</td>
<td>Grandson 2</td>
</tr>
<td>Grandson 3</td>
<td>Grandson 4</td>
</table>
</tr>
<tr>
<td>Child 2</td>
<td>Child 3</td>
</tr>
</table>
</td>
</tr>
<td>Parent 2</td>
<td>Parent 3</td>
</table>
</body>
</html>
Table on Table
| Parent 1 |
| Parent 2 | Parent 3 |
<html>
<head>
<title>Tabel Dasar Dengan Atribut Colspan</title>
<body bgcolor="orange">
<h1 align="center">Tabel Dasar Dengan Atribut Colspan</h1>
<br>
<table border = 8 width=80% height=200 align="center" cellspacing=15
cellspading=20>
<tr>
<td colspan=3 align="center"><font color="Blue" size=4>WEBSITE SAYA</font>
</td>
</tr>
<td align="center">
<marquee direction="up" scrolldelay=100><font color="red" size=3>
Hai Saya Akan Jadi Sahabat Baik!</marquee></font>Masa Kecil Saya
</td>
<td align="center"><img src="isi di sini alamat foto kalian">
<td align="center">
<marquee direction="down" scrolldelay=100><font color="green" size=3>
Saya Tekun Belajar!</marquee>Masa Kuliah</font>
</td>
</tr>
</table>
</body>
</html>
<marquee><font color="blue" size=5></font>Jangan Salah, ini cowok masa kini!</marquee>
<head>
<title>Tabel Dasar Dengan Atribut Colspan</title>
<body bgcolor="orange">
<h1 align="center">Tabel Dasar Dengan Atribut Colspan</h1>
<br>
<table border = 8 width=80% height=200 align="center" cellspacing=15
cellspading=20>
<tr>
<td colspan=3 align="center"><font color="Blue" size=4>WEBSITE SAYA</font>
</td>
</tr>
<td align="center">
<marquee direction="up" scrolldelay=100><font color="red" size=3>
Hai Saya Akan Jadi Sahabat Baik!</marquee></font>Masa Kecil Saya
</td>
<td align="center"><img src="isi di sini alamat foto kalian">
<td align="center">
<marquee direction="down" scrolldelay=100><font color="green" size=3>
Saya Tekun Belajar!</marquee>Masa Kuliah</font>
</td>
</tr>
</table>
</body>
</html>
<marquee><font color="blue" size=5></font>Jangan Salah, ini cowok masa kini!</marquee>
Tabel Dasar Dengan Atribut Colspan
| WEBSITE SAYA |
Masa Kuliah