Pada kesempatan kali ini saya
sajikan beberapa contoh cara menggabungkan dua atau lebih dari sebuah tabel
HTml.
Menggabungkan dua cell kolom
Contoh 1.
Contoh 1.
Kode tabel 1
:
<center>
<table border="2"
width="80%" style="font-size:21px;">
<tr height="40"
align="center">
<td>kolom 1 baris 1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr height="40" align="center">
<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
</tr>
<tr height="40"
align="center">
<td>kolom 1 baris 3</td>
<td>kolom 2 baris 3</td>
</tr>
</table>
</center>
| kolom 1 baris 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1 baris 3 | kolom 2 baris 3 |
Misal kita akan menggabungkan cell kolom 1 baris 2 dengan cell
kolom 2 baris 2
maka :
<td>kolom 1 baris
2</td> diubah jadi <colspan=”2”>kolom 1+2 baris 2</td>
<td>kolom 2 baris
2</td> dihilangkan karena sudah digabung dengan cell kolom 1 baris 2.
Sehingga kode tabelnya
menjadi :
<center>
<table
border="2" width="80%" style="font-size:21px;">
<tr
height="40" align="center">
<td>kolom
1 baris 1</td>
<td>kolom
2 baris 1</td>
</tr>
<tr height="40"
align="center">
<td colspan=”2”>kolom 1+2 baris 2</td>
</tr>
<tr
height="40" align="center">
<td>kolom
1 baris 3</td>
<td>kolom
2 baris 3</td>
</tr>
</table>
</center>
Hasilnya
:
| kolom 1 baris 1 | kolom 2 baris 1 |
| kolom 1+2 baris 2 | |
| kolom 1 baris 3 | kolom 2 baris 3 |
Contoh 2.
Kode tabel 2
= kode tabel 1 :
<center>
<table border="2"
width="80%" style="font-size:21px;">
<tr height="40"
align="center">
<td>kolom 1 baris 1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr height="40" align="center">
<td>kolom 1 baris
2</td>
<td>kolom 2 baris 2</td>
</tr>
<tr height="40"
align="center">
<td>kolom 1 baris
3</td>
<td>kolom 2 baris
3</td>
</tr>
</table>
</center>
| kolom 1 baris 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1 baris 3 | kolom 2 baris 3 |
Misal kita akan menggabungkan cell kolom 1 baris 3 dengan cell
kolom 2 baris 3
maka :
<td>kolom 1 baris 3</td>
diubah jadi <colspan=”2”>kolom 1+2 baris 3</td>
<td>kolom 2 baris 3</td>
dihilangkan karena sudah digabung dengan cell kolom 1 baris 3.
Sehingga kode tabelnya
menjadi :
<center>
<table
border="2" width="80%" style="font-size:21px;">
<tr
height="40" align="center">
<td>kolom
1 baris 1</td>
<td>kolom
2 baris 1</td>
</tr>
<tr height="40"
align="center">
<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
</tr>
<tr
height="40" align="center">
<td colspan=”2”>kolom
1+2 baris 3</td>
</tr>
</table>
</center>
Hasilnya
:
| kolom 1 baris 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1+2 baris 3 | |
Menggabungkan dua cell
baris
Contoh 3.
Kode tabel 3
= kode tabel 1 :
<center>
<table border="2"
width="80%" style="font-size:25px;">
<tr height="40"
align="center">
<td>kolom 1 baris
1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr height="40" align="center">
<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
</tr>
<tr height="40"
align="center">
<td>kolom 1 baris 3</td>
<td>kolom 2 baris 3</td>
</tr>
</table>
</center>
| kolom 1 baris 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1 baris 3 | kolom 2 baris 3 |
Misal kita akan menggabungkan cell kolom 1 baris 1 dengan cell kolom 1 baris 2
maka :
<td>kolom 1 baris
1</td> diubah jadi <rowspan=”2”>kolom 1 baris 1+2</td>
<td>kolom 1 baris
2</td> dihilangkan karena sudah digabung dengan cell kolom 1 baris 1.
Sehingga kode tabelnya
menjadi :
<center>
<table border="2"
width="80%" style="font-size:21px;">
<tr height="40"
align="center">
<td rowspan=”2”>kolom
1 baris 1+2</td>
<td>kolom 2 baris 1</td>
</tr>
<tr height="40" align="center">
<td>kolom 2 baris 2</td>
</tr>
<tr height="40"
align="center">
<td>kolom 1 baris 3</td>
<td>kolom 2 baris 3</td>
</tr>
</table>
</center>
Hasilnya :
| kolom 1 baris 1+2 | kolom 2 baris 1 |
| kolom 2 baris 2 | |
| kolom 1 baris 3 | kolom 2 baris 3 |
Contoh 4.
Kode tabel 4
= kode tabel 1 :
<center>
<table border="2"
width="80%" style="font-size:21px;">
<tr height="40"
align="center">
<td>kolom
1 baris 1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr height="40" align="center">
<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
</tr>
<tr height="40"
align="center">
<td>kolom 1 baris 3</td>
<td>kolom 2 baris
3</td>
</tr>
</table>
</center>
| kolom 1 baris 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1 baris 3 | kolom 2 baris 3 |
Misal kita akan menggabungkan cell kolom 2 baris 2 dengan cell
kolom 2 baris 3
maka :
maka :
<td>kolom 2 baris
2</td> diubah jadi <rowspan=”2”>kolom 2 baris 2+3</td>
<td>kolom 2 baris
3</td> dihilangkan karena sudah digabung dengan cell kolom 2 baris 2.
Sehingga kode tabelnya
menjadi :
<center>
<table border="2"
width="80%" style="font-size:21px;">
<tr height="40" align="center">
<td>kolom
1 baris 1</td>
<td>kolom 2 baris 1</td>
</tr>
<tr height="40" align="center">
<td>kolom 1 baris 2</td>
<td rowspan=”2”>kolom 2 baris
2+3</td>
</tr>
<tr height="40"
align="center">
<td>kolom 1 baris 3</td>
</tr>
</table>
</center>
Hasilnya :
| kolom 1 baris 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2+3 |
| kolom 1 baris 3 |
Contoh 5.
Kode tabel 5
= kode tabel 1 :
<center>
<table border="2"
width="80%" style="font-size:25px;">
<tr height="40"
align="center">
<td>kolom
1 baris 1</td>
<td>kolom 2 baris
1</td>
</tr>
<tr height="40" align="center">
<td>kolom 1 baris 2</td>
<td>kolom 2 baris 2</td>
</tr>
<tr height="40"
align="center">
<td>kolom 1 baris 3</td>
<td>kolom 2 baris
3</td>
</tr>
</table>
</center>
| kolom 1 baris 1 | kolom 2 baris 1 |
| kolom 1 baris 2 | kolom 2 baris 2 |
| kolom 1 baris 3 | kolom 2 baris 3 |
Misal kita akan menggabungkan cell kolom 2 baris 1 dengan cell
kolom 2 baris 2 dan kolom 2 baris 3 maka :
<td>kolom 2 baris 1</td>
diubah jadi <rowspan=”3”>kolom 2 baris 1+2+3</td>
<td>kolom 2 baris 2</td>
dan
<td>kolom 2 baris 3</td> dihilangkan
karena sudah digabung dengan cell kolom 2 baris 1.
Sehingga kode tabelnya
menjadi :
<center>
<table border="2"
width="80%" style="font-size:21px;">
<tr height="40"
align="center">
<td>kolom
1 baris 1</td>
<td rowspan=”3”>kolom
2 baris 1+2+3</td>
</tr>
<tr height="40" align="center">
<td>kolom 1 baris 2</td>
</tr>
<tr height="40"
align="center">
<td>kolom 1 baris 3</td>
</tr>
</table>
</center>
Hasilnya :
| kolom 1 baris 1 | kolom 2 baris 1+2+3 |
| kolom 1 baris 2 | |
| kolom 1 baris 3 |
Itulah beberapa contoh cara menggabungkan dua atau lebih dari sebuah tabel
HTML semoga dengan adanya contoh-contoh di atas bisa membantu memperjelas dalam
mempelajari materi yang bersangkutan.
Tidak ada komentar:
Posting Komentar