ARI JULIANTO Network www.arijulianto.com

Oleh | HTML | | Dibaca 3.692 kali | 0 komentar

Perataan Tabel dan Sel

Tabel dapat diratakan baik secara horizontal maupun secara vertikal. Seperti diketahui perataan horizontal mempunyai orientasi ke kiri, kanan dan tengah. Sedang perataan vertikal orientasinya ke atas, bawah dan tengah.Berikut adalah contoh perataan tabel dengan menggunakan perintah ALIGN dan VALIGN

<h4> Perataan Pada Tabel</h4>

<table border=5 width="250">

<tr>

	<th width="50"></th>

	<th width="50">Kiri</th>

	<th width="50">Tengah</th>

	<th width="50">Kanan</th>

</tr>

<tr>

<th width="50" height="50">Atas</th>

	<td align="left" valign="top" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td>

	<td align="center" valign="top" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td>

	<td align="right" valign="top" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td>

</tr>

<tr>

	<th width="50" height="50">Tengah</th>

	<td align="left" valign="middle" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td>

	<td align="center" valign="middle" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td>

	<td align="right" valign="middle" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td>

</tr>

<tr>

<th width="50" height="50">Bawah</th>

	<td align="left" valign="bottom" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td>

	<td align="center" valign="bottom" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td>

	<td align="right" valign="bottom" width="50" height="50"><img border="0" src="bola.png" width="15" height="15"></td>

</tr>

</table>

Perataan Pada Tabel

Kiri Tengah Kanan
Atas
Tengah
Bawah

Pemberian warna dapat dilakukan pada tabel, sel maupun pada border dari suatu tabel. Warna dapat ditulis dengan menggunakan bilangan Hexadesimal RRGGBB atau dengan menyebutkan warnanya. Atribut BGCOLOR digunakan pada perintah TABLE, TD, TR. Sedang untuk mengubah warna border tabel, hanya dapat dilakukan pada internet explorer yang menyediakan beberapa macam atribut, yaitu

Atribut Fungsi
BORDERCOLOR Warna border tabel
BORDERCOLORLIGHT Warna border bagian atas dan kiri
BORDERCOLORDARK Warna border bagian bawah dan kanan

Ketiga atribut diatas harus digunakan bersama atribut BORDER. Berikut ini adalah contoh pewarnaan yang terjadi pada suatu tabel.

<table border=1 width="40%" bordercolorlight="red" bordercolordark ="yellow">

<tr bgcolor="yellow">

	<td align="center">warna kuning</td>

	<td align="center">warna kuning</td>

</tr>

<tr>

	<td align="center" bgcolor="red">warna merah</td>

	<td align="center" bgcolor="green">warna hijau</td>

</tr>

</table>
warna kuning warna kuning
warna merah warna hijau

Mengantur Spasi Tabel

Atribut yang digunakan untuk mengatur spasi dalam tabel yaitu CELLSPACING dan CELLPADDING. CELLSPACING digunakan untuk menentukan jumlah spasi yang terdapat diantara dua buah sel dalam sebuah tabel, sedangkan CELLPADDING digunakan untuk menentukan jumlah spasi yang terdapat diantara border sel dan dengan isi yang ada didalam sel tersebut. Berikut adalah contoh tabel yang menggunakan perintah cellpadding dan celspacing.

<table border="5" cellpadding="10" cellspacing="15" align="center">

<tr>

	<td>hallo</td>

	<td>hallo</td>

	<td>hallo</td>

</tr>

<tr>

	<td>hallo</td>

	<td>hallo</td>

	<td>hallo</td>

</tr>

</table>
hallo hallo hallo
hallo hallo hallo

Menggabungkan Kolom dan Baris

Seperti tabe umumnya, kita dapat menggabungkan dua atau lebih kolom/baris menjadi satu buah kolom/baris. Atribut yang digunakan untuk menggabungkan kolom adalah COLSPAN, sedang atribut untuk menggabungkan baris adalah ROWSPAN. Kedua atribut ini bisa dikenakan pada sembarang sel dalam suatu tabel (TH atau TD) dan untuk menggunakannya cukup dengan menentukan berapa banyak kolom atau baris yang akan digabungkan. Berikut adalah contoh penggunaan atribut COLSPAN dan ROWSPAN pada tabel.

<table border=1 width="50%">

<tr>

	<td align="center">Data1</td>

	<td colspan=2 align="center">Data 2</td>

</tr>

<tr>

	<td align="center">Data 1</td>

	<td align="center">Data2a</td>

	<td align="center">Data2b</td>

</tr>

</table>

<br>

Tabel dengan ROWSPAN<br>

<table border=1 width="50%">

<tr>

	<td rowspan=2 align="center">Data1</td>

	<td align="center">Data 2</td>

	<td align="center">Data 3</td>

	<td align="center">Data 4</td>

</tr>

<tr>

	<td align="center">Data 2</td>

	<td align="center">Data 3</td>

	<td align="center">Data 4</td>

</tr>

</table>

<br>

Tabel Gabungan ROWSPAN dan COLSPAN<br>

<table border=1 width="50%">

<tr>

	<th rowspan=2 colspan=2>COLSPAN 2 ROWSPAN 2</th>

	<th colspan=2>COLSPAN 2</th>

</tr>

<tr>

	<th>Kolom 1</th>

	<th>Kolom 2</th>

</tr>

<tr>

	<th rowspan=2>ROWSPAN</th>

	<th>Baris 1</th>

	<td align="center">1,1</td>

	<td align="center">1,2</td>

</tr>

<tr>

<th>Baris 1</th>

	<td align="center">1,1</td>

	<td align="center">1,2</td>

</tr>

</table>
Data1 Data 2
Data 1 Data2a Data2b

Tabel dengan ROWSPAN
Data1 Data 2 Data 3 Data 4
Data 2 Data 3 Data 4

Tabel Gabungan ROWSPAN dan COLSPAN
COLSPAN 2 ROWSPAN 2 COLSPAN 2
Kolom 1 Kolom 2
ROWSPAN Baris 1 1,1 1,2
Baris 1 1,1 1,2