Penulisan Table - Bagian 2

Atribut Pendukung Table

Kode	Keterangan
align	mengatur posisi horizontal
valign	mengatur posisi vertikal
width	mengatur lebar
height	mengatur tinggi
border	mengatur tebal garis
border-color	memberi tebal garis dengan warna
cellpadding	mengatur jarak garis dengan objek didalamnya
cellspacing	mengatur jarak tiap cell
bgcolor	mengatur warna
background	mengatur latar gambar
rowspan	jumlah baris yang memotong beberapa baris
colspan	jumlah kolom yang memotong beberapa kolom

Contoh Terapan

Kode :

<table width="100%" border="1" cellspacing="0" cellpadding="3">
<tr>
    <th width="58" rowspan="3" bgcolor="#DBDBDB">
        Keterangan
    </th>
    <th width="80" height="41" align="center" bgcolor="#FFD0D0">
        Nama
    </th>
    <th width="100" align="center" bgcolor="#B6B6FF">
        Alamat
    </th>
    <th width="95" align="center" bgcolor="#FFFFB6">
        Telp.
    </th>
    <th colspan="2" align="center" bgcolor="#B6FFB6">
        Handphone
    </th>
</tr>
<tr>
    <td>
        Si Pitung
    </td>
    <td>
        Jl. Batavia No. 15
    </td>
    <td>
        021-3456789
    </td>
    <td width="92">
        085-7456789
    </td>
    <td width="92">
        081-2345678
    </td>
</tr>
<tr>
    <td bgcolor="#FFD0FF">
        Sogol
    </td>
    <td align="center" bgcolor="#FFD0FF">
        Jl. Jawa TImur No. 009
    </td>
    <td bgcolor="#FFD0FF">
        031-2233445
    </td>
    <td bgcolor="#FFD0FF">
        085-6677889
    </td>
    <td bgcolor="#FFD0FF">
        081-7888999
    </td>
</tr>
</table>

Hasil :

Keterangan	Nama	Alamat	Telp.	Handphone
	Si Pitung	Jl. Batavia No. 15	021-3456789	085-7456789	081-2345678
	Sogol	Jl. Jawa TImur No. 009	031-2233445	085-6677889	081-7888999

Contoh Terapan dengan CSS

Kode :

<style type="text/css">
table{margin:0 auto;width:100%;border-collapse:collapse;background:#ecf3eb;}
caption h3{}
th, td{border:1px solid #999;}
th{padding:8px 0;text-align:center;background:#B6FFB6;}
td{padding:4px 8px;}
</style>

<table id="table">
<caption><h3>Terapan Tabel dengan CSS</h3></caption>
    <tr>
        <th rowspan="4" style="background:#DBDBDB">Keterangan</th>
    <th>Nama</th>
        <th>Alamat</th>
        <th>Telp.</th>
        <th colspan="2";>Handphone</th>
    </tr>
    <tr>
        <td>Si Pitung</td>
        <td>Jl. Batavia No. 15</td>
        <td>021-3456789</td>
        <td>085-7456789</td>
        <td>081-2345678</td>
    </tr>
    <tr>
        <td>Sogol</td>
        <td>Jl. Jawa TImur No. 009</td>
        <td>031-2233445</td>
        <td>085-6677889</td>
        <td>081-7888999</td>
    </tr>
</table>

Hasil :

Terapan Tabel dengan CSS

Keterangan	Nama	Alamat	Telp.	Handphone
	Si Pitung	Jl. Batavia No. 15	021-3456789	085-7456789	081-2345678
	Sogol	Jl. Jawa TImur No. 009	031-2233445	085-6677889	081-7888999

Sumber : www.w3schools.com