170 likes | 345 Views
MODUL TEORI III. Oleh : Timoti Adri Mahendra Putra, S.Kom SMK WIRA HARAPAN. HTML (Hypertext Markup Language). Membuat Tabel pada Halaman HTML. Tabel seperti yang kita tahu terdiri dari kolom dan baris .
E N D
MODUL TEORI III Oleh: TimotiAdriMahendra Putra, S.Kom SMK WIRA HARAPAN HTML(Hypertext Markup Language)
Membuat Tabel pada Halaman HTML • Tabelseperti yang kitatahuterdiridarikolomdanbaris. • Padatabel data-data dimasukkandalamkombinasiantarakolomdanbaristertentu. • Beberapabarisdankolomdaritabelbisadigabungkanuntukmembuattampilan yang sesuaidengankebutuhan data kita.
Pada html semuaitudapatdilakukan, namuntentunyakitaharusmengetahuiterlebihdahulubahan-bahanapasaja yang diperlukanuntukmeraciksebuahtabel. • Untukmeraciksebuahtabelkitaakanmembutuhkanbahan-bahansebagaiberikut, <table>, <tr>,dan<td>
HTML TABLE <table BORDER=“1“> <tr> <td>baris 1, kolom 1</td> <td>baris 1, kolom 2</td> </tr> <tr> <td>baris 2, kolom 1</td> <td>baris 2, kolom 2</td> </tr> </table>
Tabel didefinisikan atau diapit oleh tag <table> • <tr> kepanjangan dari Table Row digunakan untuk membuat suatu baris baru. • <td> kepanjangan dari Table Data digunakan untuk membuat kolom/data. • Supaya gampang mengingatnya, ingat saja huruf belakangnya, tr --> r = row, td --> d = data.
Menyatukan 2 kolompadasebuahtabelsecara horizontal <table border="1"> <tr> <td colspan="2">Iniadalahkolom yang digabungkan </td> </tr> <tr> <td>baris 2, kolom 1</td> <td>baris 2, kolom 2</td> </tr> <tr> <td>baris 3, kolom 1</td> <td>baris 3, kolom 2</td> </tr></table>
Perhatikanbagian "Iniadalahkolom yang digabungkan", sebelumnyaterlihatperintah <td colspan="2"> • Iniadalahcontohpenggunaancolspan. • Colspanmemerintahkan agar beberapakolomdigabungkantergantungdarinilai yang dituliskan. • Padacontohdiatasnilaitersebutadalah "2" sehingga 2 kolomdigabungkanmenjadisatudanhasilnyadapat kalian lihatseperticontoh tag html diatas.
Menyatukan 2 kolompadasebuahtabelsecaraVertikal <table border=“1”> <tr> <td>baris 1, kolom 1</td> <td>baris 1, kolom 2</td> </tr> <tr> <td rowspan="2">ini yang digabungkan</td> <td>baris 2, kolom 2</td> </tr> <tr> <td>baris 3, kolom 2</td> </tr> </table>
Perhatikanbagian "Ini yang digabungkan", sebelumnyaterlihatperintah <td rowspan="2"> • Iniadalahcontohpenggunaanrowspam. • Rowspanmemerintahkan agar beberapabarisdigabungkantergantungdarinilai yang dituliskan. • Padacontohdiatasnilaitersebutadalah "2" sehingga 2 barisdigabungkanmenjadisatudanhasilnyadapat kalian lihatseperticontoh tag html diatas.
Colspan digunakan untuk menggabungkan kolom • Rowspan digunakan untuk menggabungkan baris
ATRIBUT TABLE • Bgcolor • Height • Width • Align • Center • Left • Right • Valing • top • Middle • bottom • Border • Cellpadding • Cellspacing • Frame • Border • Box • Void • above • Below • hsides • vsides • lhs • rhs
<html> <body> <table width="403" height="121" border="1"> <tr> <td colspan="2"> </td> <td width="102"> </td> </tr> <tr> <td width="57"> </td> <td width="222" rowspan="2"> </td> <td> </td> </tr> <tr> <td> </td> <td> </td> </tr> </table> </body> </html>
SOAL: 1
2. Cell that spans two columns: Cell that spans two rows:
3. DATA STASTISTIK PENJUALAN KOMPUTER “WIRA KOMPUTER”