1 / 19

Table HTML

Table HTML. Digukan utk menyajikan data dlm bentuk kolom dan baris Tabel juga dapat dipergunakan sebagai LayOut dari document HTML Diperbolehkan membuat table dalam table. Tabel HTML. Tag-tag Tabel <table> .. </table> Mendefinisikan sebuah table

amal-boyer
Download Presentation

Table HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Table HTML • Digukan utk menyajikan data dlm bentuk kolom dan baris • Tabel juga dapat dipergunakan sebagai LayOut dari document HTML • Diperbolehkan membuat table dalam table

  2. Tabel HTML • Tag-tag Tabel • <table> .. </table> • Mendefinisikansebuah table • Jikaatribut border didefinisikanmakatabelakandiberi border/bingkai • <tr>.. </tr> • Mendefinisikansebuahbarisdalam table • <td>..</td> • Mendefinisikansebuahsel, bagianini yang dapatdiisiinformasi • <caption>..</caption> • Mendefinisikan Caption • <th>..</th> • Mendefinisikan heading

  3. Tabel HTML • Atribut Table • Width=“…” mengatur lebar dari table berupa pixel atau persen • Border=“…” mengatur ukuran bingkai table • Cellspacing=“…” mengatur jarak antar cel • Cellpadding=“…” mengajtur jarak bingkai dengan isi • Align=“…” mengatur perataan tengah, kanan atau kiri • Bgcolor=“…” mengatur warna dasar belakang table

  4. Tabel HTML • Artibut TR • Align=“…” mengatur perataan isi table tengah, kiri atau kanan • Valign=“…” mengatur perataan secara vertical, tengah atau bawah • Bgcolor=“…” mengatur warna dasar cel • Atribut TD • Rowspan=“…” menggabungkan beberapa baris menjadi satu • Colspan=“…” menggabungkan beberapa kolo, menjadi satu

  5. Contoh Table <html> <body> <table border="1"> <tr> <td>100</td> </tr> </table> <br> Satubaris, tigakolom <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> </table> <br> Duabarisdantigakolom <table border="1"> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>

  6. ContohTabeltanpa Border <html> <body> Tabel Tanpa Border <table> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>

  7. Border <html> <body> <h4>Border sedang:</h4> <table border="8"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> <h4>Dengan Border besar:</h4> <table border="15"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

  8. Heading <html> <body> <h4>Table headers:</h4> <table border="1"> <tr> <th>Name</th> <th>Telephone</th> <th>Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> <h4>Vertical headers:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th>Telephone:</th> <td>555 77 854</td> </tr> <tr> <th>Telephone:</th> <td>555 77 855</td> </tr> </table> </body> </html>

  9. Contohtabelcelkosong <html> <body> <table border="1"> <tr> <td>Some text</td> <td>Some text</td> </tr> <tr> <td></td> <td>Some text</td> </tr> </table> </body> </html>

  10. Dengan Caption <html> <body> <table border="6"> <caption>My Caption</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> </body> </html>

  11. Collspan <html> <body> <h4>Cell that spans two columns:</h4> <table border="1"> <tr> <th>Name</th> <th colspan="2">Telephone</th> </tr> <tr> <td>Bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </tr> </table> </body> </html>

  12. Rowspan <html> <body> <h4>Cell that spans two rows:</h4> <table border="1"> <tr> <th>First Name:</th> <td>Bill Gates</td> </tr> <tr> <th rowspan="2">Telephone:</th> <td>555 77 854</td> </tr> <tr> <td>555 77 855</td> </tr> </table> </body> </html>

  13. Cellspadding <html> <body> <h4>With cellpadding:</h4> <table border="1“ cellpadding="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

  14. CellSpacing <html> <body> <h4>With cellspacing:</h4> <table border="1" cellspacing="10"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

  15. Background Color Table <html> <body> <h4>A background color:</h4> <table border="1" bgcolor="red"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

  16. Background Image <html> <body> <h4>A background image:</h4> <table border="1" background="bgdesert.jpg"> <tr> <td>First</td> <td>Row</td> </tr> <tr> <td>Second</td> <td>Row</td> </tr> </table> </body> </html>

  17. Background Cell <html> <body> <h4>Cell backgrounds:</h4> <table border="1"> <tr> <td bgcolor="red">First</td> <td>Row</td> </tr> <tr> <td background="bgdesert.jpg"> Second</td> <td>Row</td> </tr> </table> </body> </html>

  18. Align <html> <body> <table width="400" border="1"> <tr> <th align="left">Money spent on....</th> <th align="right">January</th> <th align="right">February</th> </tr> <tr> <td align="left">Clothes</td> <td align="right">$241.10</td> <td align="right">$50.20</td> </tr> <tr> <td align="left">Make-Up</td> <td align="right">$30.00</td> <td align="right">$44.45</td> </tr> <tr> <td align="left">Food</td> <td align="right">$730.40</td> <td align="right">$650.00</td> </tr> <tr> <th align="left">Sum</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </tr> </table> </body> </html>

  19. Tugas • Profile Pribadi • Saya Nadya Ayu Satriani, Lahir di Palembang pada 7 Juli 1995, saya anak ke 3 dari 4 bersaudara • Rian lahir 4 April 1991 • Nina Blog Nina 8 Mei 1993 • Fatur 10 Okober 1997. • Sekolah • Tamat SD pada tahun 2006 • SMP 35 Palembang • SMA PGRI 2 Palembang. • Saya gemar internet, suka membuka • Google untuk mencari informasi penunjang belajar saya, • berkomunikasi dengan teman-teman lewat Facebook • Beberapa koleksi poto saya dapat dilihat dalam Album Poto dan kamau mau kontak ke aku bisa mengirim email disini Info lain Foto Album Blog Link Google.Com Yahoo.com Berita Detik Antara Kompas

More Related