Scribd Logo
Unggah

Selamat datang di Scribd!

  • Materi 3 - Format Tabel Pada HTML

    Diunggah oleh

    mrizkypw
    18 tayangan12 halaman

    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

    Hak Cipta:

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

    Materi 3 - Format Tabel Pada HTML

    Diunggah oleh

    mrizkypw

    Hak Cipta:

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

    Materi 3

    Format Tabel
    Pemrograman Web dan

    pada HTML Perangkat Bergerak


    (PWPB Kelas XI)
    Tag-tag html yang digunakan untuk membuat
    Tujuan 01
    tabel

    Pembelajaran 02 Prosedur pembuatan tabel dalam html

    03 Penerapan format tabel dalam web

    04 Prosedur pembuatan tabel dalam tabel

    Merancang program tampilan tabel dalam html


    05

    Membuat program halaman web yang


    06
    menampilkan tabel

    Menguji program tampilan tabel dalam web


    07
    server
    Perbedaan daftar menu yang menggunakan tabel
    dengan yang tidak
    Manfaat Tabel

    Dapat memberikan informasi secara


    A
    ringkas

    Mempermudah pembaca dalam


    B
    memahami bacaan
    Struktur Dasar
    Tabel HTML
    Prosedur Pembuatan Tabel
    HTML
    • Tag <table> adalah pembuka daripada
    pembuatan tabel
    • Di dalam tabel ada baris yang dimulai
    dengan <tr> (table row)
    • Jika ada satu <tr> maka akan ada satu baris,
    begitupun cellanjutnya
    • Di dalam baris ada cell-cell yang sering
    disebut kolom
    • cell atau kolom ini dibuka atau dimulai
    dengan <td> (table data)
    • Data-data yang berada dalam tag
    <td>...</td> akan berada dalam satu kolom
    Macam-macam
    Atribut Tabel
    bgcolor Warna background

    Width, height Lebar dan tinggi tabel (dalam % atau pixel)

    cellspacing Jarak antar cell

    cellpadding Jarak teks ke cell

    border Lebar garis batas, 0 = tanpa garis batas


    Contoh Gambaran
    Atribut Tabel

    Ket: Garis merah merupakan yang ditunjuk


    Macam-macam
    Atribut <th> dan <td>
    Align (left, right, center) Pengaturan posisi horizontal isi cell, rata
    kanan/kiri/tengah
    valign (top, bottom, middle) Pengaturan posisi vertical terhadap isi cell, di atas,
    bawah atau tengah

    colspan=n Ekstensi (span) n kolom ke kanan

    rospan=n Ekstensi (span) n baris ke bawah

    nowrap Mematikan word wrapping


    Di dalam elemen tabel, contoh:
    Cara Penulisan
    <table style=“border:1px”>
    Atribut Tabel
    Di dalam elemen <style>, contoh:

    <head>
    <title>…</title>
    <style>
    table {
    border: 1px;
    }
    </style>
    </head>
    Terima kasih
    Ada pertanyaan?
    Tugas!
    • Buat daftar menu sederhana dengan menggunakan tabel! Isi tabel
    bebas! Minimal 5 baris 2 kolom!
    contoh: Nasi telur Rp 5.000,00
    Nasi Ayam Rp 7.000,00

    • Screenshot kodingannya (input) dan tampilannya (output)!

    • Format tabel bebas! Yang terpenting terdapat minimal 1 atribut


    pada salah satu tag!
    contoh: <table style=“border:1px”>

    • Tugas upload di google classroom, mohon perhatikan deadline!

    Anda mungkin juga menyukai