Belajar Html Membuat Tabel bagian 3

Pada postingan kemren kita telah membuat bagaimana Belajar Html Membuat Tabel bagian 2 dan Belajar Html Membuat Tabel. Kali ini Anda akan mencoba pengembangan lebih jauh dari tag table. Mulailah mencoba kode-kode di bawah ini, kemudian silakan bereksperimen mengubah sendiri aribut maupun nilainya untuk melihat efek perubahannya. Adapun pada Postingan Kali ini akan membuat Cell Padding, Cell Spacing, Menambahkan latar belakang ke tabel, Menambahkan latar belakang ke sel tabel, Mengatur isi sel tabel, dan Atribut frame pada tabel.

Cell Padding
<html>
<body>
<h4>Tanpa cellpadding:</h4>
<table border=”1″>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan cellpadding:</h4>
<table border=”1″ cellpadding=”10″>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
</body>
</html>

Cell Spacing
<html>
<body>
<h4>Tanpa cellspacing:</h4>
<table border=”1″>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan cellspacing:</h4>
<table border=”1″
cellspacing=”10″>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
</body>
</html>

Menambahkan latar belakang ke tabel
<html>
<body>
<h4>Dengan warna latar belakang:</h4>
<table border=”1″ bgcolor=”red”>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan latar belakang gambar:</h4>
<table border=”1″ background=”../bg.jpg”>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
</body>
</html>

Menambahkan latar belakang ke sel tabel
<html>
<body>
<h4>Latar belakang pada sel:</h4>
<table border=”1″>
<tr>
<td bgcolor=”red”>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td background=”../bg.jpg”>
Kedua</td>
<td>Baris</td>
</tr>
</table>
</body>
</html>

Mengatur isi sel tabel
<html>
<body>
<table width=”400″ border=”1″>
<tr>
<th align=”left”>Dana yang dikeluarkan pada bulan….</th>
<th align=”right”>Januari</th>
<th align=”right”>Februari</th>
</tr>
<tr>
<td align=”left”>Pakaian</td>
<td align=”right”>Rp. 241.000,00</td>
<td align=”right”>Rp. 50.000,00</td>
</tr>
<tr>
<td align=”left”>Make-Up</td>
<td align=”right”>Rp. 30.000,00</td>
<td align=”right”>Rp. 44.500,00</td>
</tr>
<tr>
<td align=”left”>Makanan</td>
<td align=”right”>Rp. 730.000,00</td>
<td align=”right”>Rp. 650.000,00</td>
</tr>
<tr>
<th align=”left”>Jumlah</th>
<th align=”right”>Rp. 1001.500,00</th>
<th align=”right”>Rp. 744.650,00</th>
</tr>
</table>
</body>
</html>

Atribut frame pada tabel
<html>
<body>
<p>
Bila Anda tidak melihat adanya frame di sekeliling tabel pada contoh ini, berarti browser Anda terlalu lama, atau mungkin tidak mendukung frame dalam tabel.
</p>
<h4>With frame=”border”:</h4>
<table frame=”border”>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan frame=”box”:</h4>
<table frame=”box”>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan frame=”void”:</h4>
<table frame=”void”>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan frame=”above”:</h4>
<table frame=”above”>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan frame=”below”:</h4>
<table frame=”below”>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan frame=”hsides”:</h4>
<table frame=”hsides”>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan frame=”vsides”:</h4>
<table frame=”vsides”>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan frame=”lhs”:</h4>
<table frame=”lhs”>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
<h4>Dengan frame=”rhs”:</h4>
<table frame=”rhs”>
<tr>
<td>Pertama</td>
<td>Baris</td>
</tr>
<tr>
<td>Kedua</td>
<td>Baris</td>
</tr>
</table>
</body>
</html>

Tentang belalangtue

manusia biasa yang ingin terus belajar.............
Pos ini dipublikasikan di Computer, HTML, pemrograman, tutorial dan tag , , , . Tandai permalink.

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