Memodifikasi Tabel pada Web Page
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 |