Scribd Logo
Unggah

Selamat datang di Scribd!

  • Materi 7 Tabel

    Diunggah oleh

    KEVIN ARSY
    9 tayangan13 halaman
    Dokumen tersebut membahas tentang elemen dasar penggunaan tabel di HTML5 mulai dari tag-tag dasar seperti <table>, <tr>, <td>, <th>, hingga penggunaan CSS untuk mengatur tampilan tabel seperti border, padding, align, rowspan, dan colspan. Dokumen tersebut juga menjelaskan penggunaan id pada tag table untuk membedakan tampilan tabel.

    Deskripsi Asli:

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    PPTX, PDF, TXT atau baca online dari Scribd

    Apakah menurut Anda dokumen ini bermanfaat?

    Apakah konten ini tidak pantas?

    Laporkan Dokumen Ini
    Dokumen tersebut membahas tentang elemen dasar penggunaan tabel di HTML5 mulai dari tag-tag dasar seperti <table>, <tr>, <td>, <th>, hingga penggunaan CSS untuk mengatur tampilan tabel seperti border, padding, align, rowspan, dan colspan. Dokumen tersebut juga menjelaskan penggunaan id pada tag table untuk membedakan tampilan tabel.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    9 tayangan13 halaman

    Materi 7 Tabel

    Diunggah oleh

    KEVIN ARSY
    Dokumen tersebut membahas tentang elemen dasar penggunaan tabel di HTML5 mulai dari tag-tag dasar seperti <table>, <tr>, <td>, <th>, hingga penggunaan CSS untuk mengatur tampilan tabel seperti border, padding, align, rowspan, dan colspan. Dokumen tersebut juga menjelaskan penggunaan id pada tag table untuk membedakan tampilan tabel.

    Hak Cipta:

    © All Rights Reserved
    Unduh sebagai PPTX, PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    dari 13

    TABEL

    1
    Element dasar Tabel
     Tag Table dengan <table>..</table>

     Table Row dengan tag <tr>…</tr>


     Yaitu baris pada suatu tabel.

     Table Data dengan tag <td>…</td>


     Yaitu tempat untuk memasukkan informasi dalam
    suatu tabel

    2
    Element dasar Tabel (lnjt)

     Table Header dengan tag <th>..</th>


     Adalah judul tabel yang biasanya terletak di bagian paling
    atas atau paling kiri tabel.

     Caption dengan tag <caption>…</caption>


     <caption align=bottom>…</caption>
     Adalah judul tabel yang terletak di bagian luar suatu tabel,
    biasanya dibagian atas atau bagian bawah tabel.

    3
    Tampilan Tabel di html5

     Untuk selanjutnya, tabel akan diikuti dengan


    CSS* untuk memberikan variasi tampilan.
     CSS ini akan dibuat di dalam tag head,
    dengan menggunakan tag <style>
     Penggunaan CSS lebih kepada property dari
    kebutuhan tampilan konten tabel.

    *CSS (Cascadding Style Sheet) akan dibahas pada materi


    tersendiri, setelah materi html5
    4
    Style dalam tag tabel

     Style bisa di terapkan secara langsung pada tag


    tabel.

    <table style=“width : 100%”>


    .
    .
    </table>

     Style diatas untuk mengatur lebar tabel di tampilan


    monitor
    5
    Property tabel-border
    <head>
    <style>
    table, th, td
    {
    border: 1px solid black;
    }
    </style>
    </head>

     Border diberikan ke tampilan tabel, th, dan td.


     Karena border secara otomatis memberikan 2 garis, jika ingin dibuat
    dengan 1 garis, tambahkan border-collapse:collapse; sebelum kurung
    tutup kurawal.
    6
    Align pada tabel

     Untuk mengatur objek dalam tabel


     Untuk mengatur perataan horizontal data dalam
    tabel (kiri, tengah, dan kanan)
     Contoh dibawah ini untuk tampilan
    keseluruhan dari th dan td.
    <style>
    th, td { text-align=center;}
    </style>

    7
    Align pada tabel

     Contoh dibawah ini untuk tampilan yang di


    perlukan saja.
     Caranya di berikan langsung ke tag yang
    dibutuhkan.

    <td style = “text-align:right”>…</td>

    Perhatikan dua contoh coding diatas, yang pertama ditulis


    didalam tag style, sedangkan yang kedua ditulis langsung pada
    tag yang dibutuhkan. Perhatikan penulisannya.

    8
    Padding pada tabel

     Cellpadding
     Untuk menentukan jumlah spasi yang terdapat diantara
    border sel dengan isi dalam sel.
     Pada html5 cukup menggunakan padding.

    <style>
    th, td { padding=15px;}
    </style>

     Dengan konsep yang sama, padding ini bisa diterapkan


    secara langsung sesuai kebutuhan dalam ruang tabel.
    9
    Spacing pada tabel

     Untuk membuat jarak border pada objek dalam


    tabel.
     Pada html5 cukup menggunakan border-spacing.

    <style>
    table { border-spacing : 15px; }
    </style>

    10
    Rowspan dan colspan pada tabel

     Rowspan
     Untuk menggabungkan sel-sel dalam baris.
    <th rowspan =“”2”>

     Colspan
     Untuk menggabungkan sel-sel dalam kolom.
    <td colspan=“3”>

    11
    id pada tabel

     id digunakan jika kebutuhan tabel lebih dari satu.


     Caranya cukup dengan memberikan identifikasi pada tag
    style di dalam tag head, misal :

    <style>
    #tabel_01 {
    width: 100%;
    background-color: #d2d3d4;
    }
    </style>
    12
    id pada tabel
     Setelah membuat identifikasi pada tag style, berikutnya membuat pemanggil pada
    tag table.
     Coding table ini di dalam satu file. Sehingga nanti akan ada dua table dengan
    tampilan yang berbeda sesuai kebutuhan.

    <table style=“width:100%”>
    .
    .
    .
    </table>

    <table id=“tabel_01”>
    .
    .
    .
    </table>

    13

    Anda mungkin juga menyukai