setelah kita belajar membuat tabel dengan cara yang sederhana, disini kita coba belajar membuat colspan dan rowspan pada tabel dengan menggunakan kode HTML, seperti contoh di bawah ini>>
Saat kita membuat kode sperti di bawah ini :
<TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2>Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH COLSPAN=2>Sales</TH> </TR> <TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE> |
maka akan menjadi table seperti di bawah ini:
Production | |
---|---|
Raha Mutisya | 1493 |
Shalom Buraka | 3829 |
Brandy Davis | 0283 |
Sales | |
Claire Horne | 4827 |
Bruce Eckel | 7246 |
Danny Zeman | 5689 |
untuk menambahkan warna background pada <th> atau table head maka hanya menambai (bgcolor="ganti dengan kode warna ") dan di letakkan di dalam kurung
<TABLE BORDER=2 CELLPADDING=4> <TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Production</TH> </TR> <TR> <TD>Raha Mutisya</TD> <TD>1493</TD> </TR> <TR> <TD>Shalom Buraka</TD> <TD>3829</TD> </TR> <TR> <TD>Brandy Davis</TD> <TD>0283</TD> </TR> <TR> <TH COLSPAN=2 BGCOLOR="#99CCFF">Sales</TH> </TR> <TR> <TD>Claire Horne</TD> <TD>4827</TD> </TR> <TR> <TD>Bruce Eckel</TD> <TD>7246</TD> </TR> <TR> <TD>Danny Zeman</TD> <TD>5689</TD> </TR> </TABLE> |
dan hasilnya akan menjadi seperti ini:
Production | |
---|---|
Raha Mutisya | 1493 |
Shalom Buraka | 3829 |
Brandy Davis | 0283 |
Sales | |
Claire Horne | 4827 |
Bruce Eckel | 7246 |
Danny Zeman | 5689 |
keterangan:
<TH COLSPAN=2> =berapa kolom yang akan anda buat dalam satu head, angka "2" adalah jumlah kolom yang terdapat dalam setiap header kolom
Membuat Rowspan
hampir sama dengan colspan mencakup beberapa kolom yang ada, bedanya kalau colspan terdapat diatas kolom, kalau rowspan terdapat disamping kolom
mari kita coba membuatnya
dengan menulis kode HTML dibawah ini:
<TABLE BORDER=2 CELLPADDING=4><TR> <TH ROWSPAN=3 BGCOLOR="#99CCFF">Production</TH> <TD>Raha Mutisya</TD> <TD>1493</TD></TR> <TR><TD>Shalom Buraka</TD> <TD>3829</TD></TR> <TR><TD>Brandy Davis</TD> <TD>0283</TD></TR> <TR><TH ROWSPAN=3 BGCOLOR="#99CCFF">Sales</TH> <TD>Claire Horne</TD> <TD>4827</TD></TR> <TR><TD>Bruce Eckel</TD> <TD>7246</TD></TR> <TR><TD>Danny Zeman</TD> <TD>5689</TD></TR> </TABLE> |
maka akan menjadi table seperti dibawh ini:
Production | Raha Mutisya | 1493 |
---|---|---|
Shalom Buraka | 3829 | |
Brandy Davis | 0283 | |
Sales | Claire Horne | 4827 |
Bruce Eckel | 7246 | |
Danny Zeman | 5689 |
sumber tuttorial editing by : RadenMas sugiyanto