Scribd Logo
Upload

Welcome to Scribd!

  • Web - 4

    Uploaded by

    RANDZ YT
    4 views13 pages

    Original Title

    web- 4

    Copyright

    © © All Rights Reserved

    Available Formats

    PPT, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    4 views13 pages

    Web - 4

    Uploaded by

    RANDZ YT

    Copyright:

    © All Rights Reserved
    Download as PPT, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as ppt, pdf, or txt
    of 13

    Tag TABEL

    Fungsi:
    Menampilkan informasi secara terstruktur, ringkas
    dan mudah dibaca
    Mengatur tampilan homepage agar lebih menarik
    Tag yang diperlukan: <table>
    Atribut-atribut:
    Membuat Tabel Sederhana
    Tag yang diperlukan:
    - Membuat baris: <tr> (table row)
    - Membuat kolom: <td> (table data)

    Contoh:
    <table border="1">
    <tr><td>Baris 1 Sel 1</td><td>Baris 1 Sel 2</td></tr>
    <tr><td>Baris 2 Sel 1</td><td>Baris 2 Sel 2</td></tr>
    </table>
    Menambahkan Judul Tabel
    Judul tabel: <caption>
    Judul baris/kolom: <th> (table header)
    Contoh:
    <table border="1">
    <caption align="top"> <b> DAFTAR MAHASISWA </b> </caption>
    <tr><th>No</th><th>NPM</th><th>Nama</th></tr>
    <tr><td>1</td><td>06.100.001</td><td>Amin A. Angkasa</td></tr>
    <tr><td>2</td><td>06.100.002</td><td>Beni B. Bernardi</td></tr>
    </table>
    Mengatur Lebar & Tinggi Tabel
    Atribut: width dan height
    Nilai:
     ukuran % (max 100%)
     ukuran pixel

    Contoh:
    <table border="1" width=“50%”>
    <caption align="top">
    <b> DAFTAR MAHASISWA </b> </caption>
    <tr><th>No</th>
    <th>NPM</th>
    <th>Nama</th></tr>
    <tr><td width=“20”>1.</td>
    <td width=“80” height=“50“>06.100.001</td>
    <td width=“180” height=“50”>Amin A. Angkasa</td></tr>
    <tr><td width=“20”>2.</td>
    <td width=“80” height=“70”>06.100.002</td>
    <td width=“180” height=“70”>Beni B. Bernardi</td></tr>
    </table>

    Perataan dalam
    horisontal: atribut align -> utk <caption>, <tr>, <td> dan <th>
    tabel
     vertikal: atribut valign -> utk <tr>, <td> dan <th>

    Contoh:
    <table border="1" align="center">
    <caption align="top">
    <b> DAFTAR MAHASISWA </b> </caption>
    <tr><th>No</th><th>NPM</th><th>Nama</th></tr>
    <tr><td align="center" width="20">1.</td>
    <td align="center" valign="middle"
    width="80" height="50">06.100.001</td>
    <td align="right" valign="top"
    width="180" height="50">Amin A. Angkasa</td></tr>
    <tr><td width="20">2.</td>
    <td align="left" valign="top"
    width="80" height="70">06.100.002</td>
    <td align="left" valign="bottom"
    width="180" height="70">Beni B. Bernardi</td></tr>
    </table>
     Atribut: bgcolor
    Membuat warna pada tabel
    Contoh:
    <body bgcolor="purple">
    <font size="3" face="arial" color="yellow">
    <table border="2" bgcolor="white" align="center">
    <caption align="bottom">
    <b> Tabel Daftar Mahasiswa </b> </caption>
    <tr bgcolor="yellow">
    <th>No</th><th>NPM</th><th>Nama</th></tr>
    <tr bgcolor="cyan"><td align="center"
    width="20">1.</td>
    <td align="left" valign="middle“
    width="80" height="40">06.100.001</td>
    <td align="left" valign="middle“
    width="180" height="40">Amin A. Angkasa</td></tr>
    <tr><td bgcolor="blue" width="20">2.</td>
    <td bgcolor="red" align="left" valign="middle"
    width="80" height="40">06.100.002</td>
    <td bgcolor="green" align="left" valign="middle"
    width="180" height="40">Beni B. Bernardi</td></tr>
    </table>
    </body>
    Script HTML:
    Penggabungan baris/kolom
    <table border="1" bgcolor="white" align="center“ cellpadding="10" cellspacing="12">
    <caption align="top">
    <b> Tabel Daftar Nilai Mahasiswa </b> </caption>
    <tr bgcolor="gray"><th rowspan="2">No</th>
    <th rowspan="2">NPM</th> <th rowspan="2">Nama</th> <th colspan="2">Nilai</th>
    </tr>
    <tr bgcolor="gray"><th>UTS</th> <th>UAS</th> </tr>
    <tr><td align="center" width="20">1.</td>
    <td align="left" valign="middle" width="80" height="40">06.100.001</td>
    <td align="left" valign="middle" width="180" height="40">Amin A. Angkasa</td>
    <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
    </tr>
    <tr><td width="20">2.</td>
    <td align="left" valign="middle" width="80" height="40">06.100.002</td>
    <td align="left" valign="middle" width="180" height="40">Beni B. Bernardi</td>
    <td align="center" valign="middle">70</td> <td align="center" valign="middle">80</td>
    </tr>
    </table>
    Hasil Penggabungan baris/kolom
    Menggabungkan bbrp kolom menjadi 1: atribut colspan
    Menggabungkan bbrp baris menjadi 1: atribut rowspan
    Refrensi
    Tag-Tag HTML lainya
    HTML Text Formatting tags
    HTML “Computer Output” Tags
    HTML Citations, Quotations, and
    Definition Tag

    You might also like