Scribd Logo
Unggah

Selamat datang di Scribd!

  • New BAB III

    Diunggah oleh

    Sania san
    2 tayangan22 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

    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 PDF, TXT atau baca online dari Scribd
    Tandai sebagai konten tidak pantas
    2 tayangan22 halaman

    New BAB III

    Diunggah oleh

    Sania san

    Hak Cipta:

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

    BAB III

    LIST DAN TABEL PADA HTML

    CAPAIAN PEMBELAJARAN
    1. Capaian Pembelajaran Umum :
    Mahasiswa dapat mengetahui dan memahami cara membuat penomoran dan membuat
    tabel pada dokumen HTML.
    2. Capaian Pembelajaran Khusus :
    1. Mahasiswa dapat menjelaskan cara membuat nomor urut.
    2. Mahasiswa dapat menjelaskan perbedaan membuat nomor urut menggunakan simbol,
    penomoran angka dan alphabet.
    3. Mahasiswa dapat menjelaskan dan penyebutkan cara membuat tabel.
    4. Mahasiswa dapat menjelaskan dan menyebutkan cara menggabungkan tabel.

    A. PENDAHULUAN/DESKRIPSI SINGKAT.
    Pada bab ini akan menjelaskan cara membuat penomoran pada dokumen HTML. List
    merupakan bentuk umum yang biasa digunakan untuk membuat suatu daftar. Adapun jenis-
    jenis list dalam HTML adalah List dengan nomor dan List tanpa nomor. List dengan nomor
    adalah model daftar yang setiap itemnya diberi nomor, selain list bernomor dan tanpa nomor,
    ada sebuah list yang bisa digunakan untuk membuat list yang memberikan uraian terhadap
    suatu item dalam daftar disebut list definisi.
    Pada bab ini juga menjelaskan cara membuat tabel, tabel digunakan untuk
    menyajikan data dalam bentuk kolom dan baris. Umumnya setiap kolom menunjukan data
    yang sejenis dan setiap baris yang terdiri atas kolom-kolom menunjukan kelompok data
    dalam satu kesatuan.

    B. POKOK-POKOK ISI.
    2.1 List dengan nomor (Ordered List).
    Nomor item secara default adalah menggunakan angka 1,2,3…dst, untuk keperluan
    penyajian tertentu dapat diubah nomor dalam list dengan model angka yang lain, dengan
    mengisi atribut type pada tag <ol>.
    Berikut adalah nilai-nilai yang dapat digunakan untuk mengubah penomoran dalam ordered
    list.
    Type Keterangan
    A Tampilan dengan menggunakan abjad huruf capital.
    a Tampilan dengan menggunakan abjad huruf kecil
    I Tampilan dengan menggunakan huruf romawi besar
    i Tampilan dengan menggunakan huruf romawi kecil
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title> tag ordered list </title>
    </head>
    <body>
    <h3>daftar tanaman hias :</h3>
    <ol>
    <li> Bunga Melati </li>
    <li> Bunga Mawar </li>
    <li> Bunga Sepatu </li>
    <li> Bunga Asoka </li>
    <li> Bunga Kertas </li>
    </ol>
    <h3> daftar nama buah-buahan :</h3>
    <ol type="a">
    <li> Pisang </li>
    <li> Mangga </li>
    <li> Jeruk </li>
    <li> Manggis </li>
    </ol>
    </body>
    </html>

    Gambar 3.1 Tampilan daftar list menggunakan nomor.


    3.2 List tanpa nomor (Unordered List).
    Unordered list sering disebut sebagai bulleted list, jenis bullet bisa diubah, berikut
    daftar jenis bullet yang bisa digunakan untuk mengubah bullet default pada bulleted list:
    Type Bentuk
    Circle o
    Disc •
    Square ▪

    Contoh:
    <!DOCTYPE html>
    <html>
    <head>
    <title> tag ul </title>
    </head>
    <body>
    <h3>daftar tanaman hias :</h3>
    <ul>
    <li> Bunga Melati </li>
    <li> Bunga Mawar </li>
    <li> Bunga Sepatu </li>
    <li> Bunga Asoka </li>
    <li> Bunga Kertas </li>
    </ul>
    <h3> daftar nama sayur-sayuran :</h3>
    <ul type="square">
    <li> Kangkung </li>
    <li> Bayam </li>
    <li> Sawi </li>
    <li> Wortel </li>
    </ul>
    <h3> daftar nama buah-buahan :</h3>
    <ul type="circle">
    <li> Pisang </li>
    <li> Mangga </li>
    <li> Jeruk </li>
    <li> Manggis </li>
    </ul>
    </body>
    </html>
    Gambar 3.2 Tampilan daftar list menggunakan simbol.

    3.3 Nested List ( Penomoran Berkalang)


    Daftar yang tak diberi nomor urut juga bisa bersifat berkalang artinya, suatu daftar
    item berada dalam daftar item yang lain.
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title> tag ul </title>
    </head>
    <body>
    <h2>daftar tanaman hias :</h2>
    <ul>
    <li>keluarga araceae </li>
    <ul>
    <li>alocasia </li>
    <ul>
    <li>amazonica </li>
    <li>black velvet </li>
    <li> green velvet </li>
    </ul>
    <li>caladium : </li>
    <ul>
    <li>red flash </li>
    <li>red fire</li>
    <li>jackie sutters </li>
    </ul>
    </ul>
    <li>keluarga lain-lain </li>
    </ul>
    </body>
    </html>

    Gambar 3.3 Tampilan daftar list yang berkalang.

    3.4 Membuat Tabel


    Tabel merupakan elemen yang digunakan untuk menyajikan data tabulasi dengan
    menggunakan baris dan kolom. Setiap baris akan mempunyai data kolom yang sama, dengan
    setiap kolom digunakan untuk menyajikan jenis data yang sama. Jumlah baris dalam satu
    tabel sedikitnya satu baris, dengan jumlah kolom sedikitnya satu kolom.

    3.5 Tag Tabel HTML


    Tag standar yang digunakan dalam membuat tabel pada HTML ada 3 yaitu :
    1. Tag <table>, digunakan sebagai penanda atau memulai pembuatan sebuah tabel.
    2. Tag <tr>, merupakan singkatan table row, digunakan untuk membuat baris pada tabel.
    3. Tag <td> merupakan singkatan dari table data, digunakan untuk mengisikan data
    kedalam tabel atau disebut juga dengan kolom.

    Tag tabel dalam HTML disusun dalam elemen blok, yang dinyatakan sebagai berikut :
    <table>
    <tr>
    <td>data baris 1 kolom 1</td>
    <td>data baris 1 kolom 2</td>
    ..
    <td>data baris 1 kolom n</td>
    </tr>
    ..
    <tr>
    <td>data baris n kolom 1</td>
    <td>data baris n kolom 2</td>
    ..
    <td>data baris n kolom n</td>
    </tr>
    </table>
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Latihan Membuat Tabel</title>
    </head>
    <body>
    <h1>Belajar Tag Tabel</h1>
    <table>
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    <tr>
    <td>data baris3, kolom1</td>
    <td>data baris3, kolom2</td>
    <td>data baris3, kolom3</td>
    </tr>
    </table>
    </body>
    </html>
    Gambar 3.4 Tampilan Tabel

    3.6 Atribut Pada Tabel


    Ada beberapa atribut yang bisa diberikan pada tabel yaitu :
    1. Border, digunakan untuk memberikan garis tepi pada tabel, tanpa atribut border, tabel
    akan di tampilkan tanpa garis tepi.
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Tabel dengan border</title>
    </head>
    <body>
    <h2>Tabel dengan Atribut Border</h2>
    <table border="1">
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    <tr>
    <td>data baris3, kolom1</td>
    <td>data baris3, kolom2</td>
    <td>data baris3, kolom3</td>
    </tr>
    </table>
    </body>
    </html>
    Gambar 3.4 Tampilan Tabel dengan Border

    2. Cellpadding dan cellspacing, cellpadding digunakan untuk menentukan jarak isi sel
    dengan bordernya. Sedangkan cellspacing digunakan untuk menentukan jarak antar sel.
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title> Cellpadding dan Cellspacing</title>
    </head>
    <body>
    <h2>Tabel dengan Atribut Cellpadding</h2>
    <table border="1" cellpadding="10">
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    <tr>
    <td>data baris3, kolom1</td>
    <td>data baris3, kolom2</td>
    <td>data baris3, kolom3</td>
    </tr>
    </table>
    <h2>Tabel dengan Atribut Cellspacing</h2>
    <table border="1" cellspacing="10">
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    <tr>
    <td>data baris3, kolom1</td>
    <td>data baris3, kolom2</td>
    <td>data baris3, kolom3</td>
    </tr>
    </table>
    </body>
    </html>

    Gambar 3.6 Tampilan Tabel dengan Cellpadding dan Cellspacing

    3. Width dan height, width digunakan untuk menentukan lebar tabel sedangkan height
    digunakan untuk menentukan tinggi tabel.
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Width dan Height</title>
    </head>
    <body>
    <h2>Tabel dengan Atribut Width</h2>
    <table border="1" width="70%" >
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    <tr>
    <td>data baris3, kolom1</td>
    <td>data baris3, kolom2</td>
    <td>data baris3, kolom3</td>
    </tr>
    </table>
    <h2>Tabel dengan Atribut Height</h2>
    <table border="1" height="150px">
    <tr>
    <tddata baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    <tr>
    <td>data baris3, kolom1</td>
    <td>data baris3, kolom2</td>
    <td>data baris3, kolom3</td>
    </tr>
    </table>
    </body>
    </html>
    Gambar 3.7 Tampilan Tabel dengan Width dan Height
    4. Rules, digunakan untuk membuat garis antara baris dan kolom dengan nilai atribut
    rows, cols, all dan none.
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Atribut Rules</title>
    </head>
    <body>
    <h2>Tabel dengan Atribut Rules</h2>
    <table rules="rows" >
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    </table><br>
    <table rules="cols" >
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    </table><br>
    <table rules="all" >
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    </table><br>
    <table rules="none" border="1" >
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    </table>
    </body>
    </html>

    Gambar 3.8 Tampilan Tabel dengan Rules


    3.7 Judul Kolom Tabel
    Umumnya sebuah tabel terdiri dari judul kolom dan isi kolom, untuk membuat judul
    pada kolom menggunakan tag <th> yang ditempatkan didalam tag <table>.
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Judul Kolom Tabel</title>
    </head>
    <body>
    <h2>Tabel dengan Judul Kolom</h2>
    <table border="1" width="70%" >
    <tr>
    <th>Judul 1</th>
    <th>Judul 2</th>
    <th>Judul 3</th>
    </tr>
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    <tr>
    <td>data baris3, kolom1</td>
    <td>data baris3, kolom2</td>
    <td>data baris3, kolom3</td>
    </tr>
    </table>
    </body>
    </html>
    Gambar 3.9 Tampilan Tabel dengan Judul Kolom

    3.8 Caption/ Judul Tabel


    Untuk membuat judul tabel pada HTML menggunakan tag <caption> yang dituliskan
    setelah tag <table>. pada tag <caption> bisa diberikan atribut top dan bottom.
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Judul Tabel</title>
    </head>
    <body>
    <h2>Tabel dengan Caption /Judul</h2>
    <table border="1" width="70%" >
    <caption>Judul tabel dengan tag caption</caption>
    <tr bgcolor="yellow">
    <th>Judul 1</th>
    <th>Judul 2</th>
    <th>Judul 3</th>
    </tr>
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    <tr>
    <td>data baris3, kolom1</td>
    <td>data baris3, kolom2</td>
    <td>data baris3, kolom3</td>
    </tr>
    </table><br><br>
    <table border="1" width="70%" >
    <caption align="bottom">Judul tabel dengan tag caption dibawah
    tabel</caption>
    <tr bgcolor="pink">
    <th>Judul 1</th>
    <th>Judul 2</th>
    <th>Judul 3</th>
    </tr>
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    <tr>
    <td>data baris3, kolom1</td>
    <td>data baris3, kolom2</td>
    <td>data baris3, kolom3</td>
    </tr>
    </table>
    </body>
    </html>
    Gambar 3.10 Tampilan Tabel dengan Judul Tabel

    3.9 Menggabungkan Sel Tabel


    Dalam sebuah tabel kita bisa menggabungkan baris ataupun menggabungkan
    kolomnya. Untuk menggabungkan baris menggunakan atribut rowspan.
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Menggabungkan Sel Tabel</title>
    </head>
    <body>
    <h2>Menggabungkan Baris pada Tabel</h2>
    <table border="1" width="50%">
    <caption align = "bottom">Daftar wilayah dan kota</caption>
    <tr>
    <th rowspan="3"> Sumatera Selatan </th>
    <td>palembang</td>
    </tr>
    <tr><td>prabumulih</td></tr>
    <tr><td>lubuk linggau</td></tr>
    <tr>
    <th rowspan="4"> Sumatera Barat</th>
    <td>bukit tinggi</td>
    </tr>
    <tr><td>solok</td></tr>
    <tr><td>padang panjang</td></tr>
    <tr><td>pariaman</td></tr>
    </table>
    </body>
    </html>
    Gambar 3.11 Tampilan Tabel dengan Penggabungan Baris

    Sedangkan untuk menggabungkan kolom menggunakan atribut colspan.


    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Menggabungkan Sel Tabel</title>
    </head>
    <body>
    <h2>Menggabungkan Kolom pada Tabel</h2>
    <table border ="1" width="50%">
    <caption> Daftar target penjualan</caption>
    <tr>
    <th colspan ="2"> Area Jawa Tengah</th>
    </tr>
    <tr><td>Semarang</td><td>15.000.000</td></tr>
    <tr><td> kudus</td><td>11.000.000</td></tr>
    <tr><td>Solo</td><td>14.000.000</td></tr>
    <tr>
    <th colspan ="2"> Area Jawa Timur</th>
    </tr>
    <tr><td>Surabaya</td><td>20.000.000</td></tr>
    <tr><td>Malang</td><td>12.000.000</td></tr>
    <tr><td>Kediri</td><td>11.000.000</td></tr>
    <tr><td>Madiun</td><td>13.000.000</td></tr>
    </table>
    </body>
    </html>
    Gambar 3.12 Tampilan Tabel dengan Penggabungan Kolom

    3.10 Struktur Tabel Kompleks


    Sebuah tabel dikatakan kompleks apabila terdiri dari header, body dan footer. Header
    merupakan bagian kepala tabel dibuat menggunakan tag <thead>. Body merupakan bagian
    pokok isi tabel dibuat menggunakan tag <tbody>. Sedangkan footer merupakan bagian
    bawah tabel dibuat menggunakan tag <tfoot>
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Tabel Kompleks</title>
    </head>
    <body>
    <h2>Tabel dengan Header, Body dan Footer</h2>
    <table border="1" width="70%" >
    <thead style="background: salmon;">
    <tr>
    <th>Judul 1</th>
    <th>Judul 2</th>
    <th>Judul 3</th>
    </tr>
    </thead>
    <tfoot style="background: lightpink;">
    <tr>
    <td>footer 1</td>
    <td>footer 2</td>
    <td>footer 3</td>
    </tr>
    </tfoot>
    <tbody style="background: lightblue;">
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    <tr>
    <td>data baris3, kolom1</td>
    <td>data baris3, kolom2</td>
    <td>data baris3, kolom3</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

    Gambar 3.13 Tampilan Tabel Kompleks

    3.11 Grup Kolom pada Tabel


    Grup kolom berfungsi untuk mengaitkan kolom, tanpa grup kolom kita harus
    mengakses satu persatu sel tabel. Untuk membuat grup kolom menggunakan tag <colgroup>
    dan <col>.
    Contoh :
    <!DOCTYPE html>
    <html>
    <head>
    <title>Grup Kolom</title>
    </head>
    <body>
    <h2>Grup Kolom pada Tabel</h2>
    <table border="3" width="90%">
    <colgroup>
    <col width="200px" style="background: lightgrey;"/>
    <col width="250px" style="background: lightgreen;"/>
    <col style="background: lightskyblue;"/>
    </colgroup>
    <thead style="font-family: arial;font-size: 20px;">
    <tr>
    <th>Judul 1</th>
    <th>Judul 2</th>
    <th>Judul 3</th>
    </tr>
    </thead>
    <tfoot style="font-family: arial;font-size: 10px;">
    <tr>
    <td>footer 1</td>
    <td>footer 2</td>
    <td>footer 3</td>
    </tr>
    </tfoot>
    <tbody>
    <tr>
    <td>data baris1, kolom1</td>
    <td>data baris1, kolom2</td>
    <td>data baris1, kolom3</td>
    </tr>
    <tr>
    <td>data baris2, kolom1</td>
    <td>data baris2, kolom2</td>
    <td>data baris2, kolom3</td>
    </tr>
    <tr>
    <td>data baris3, kolom1</td>
    <td>data baris3, kolom2</td>
    <td>data baris3, kolom3</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
    Gambar 3.14 Tampilan Grup Kolom

    C. SOAL LATIHAN/TUGAS.
    1. Buatlah daftar menu yang tampilannya sbb :
    2. Buatlah jadwal pelajaran dengan tampilan sbb :

    E. RUJUKAN.
    Betha Sidik Ir, HTML5 Dasar-Dasar Untuk Pengembangan Aplikasi Berbasis Web,
    2019, Penerbit Infomatika Bandung.

    Rohi Abdulloh, 7 In 1 Pemrograman Web Untuk Pemula, 2019, Elex Media


    Komputindo, Jakarta

    F. BACAAN YANG DISARANKAN.


    Candra Surya, Miftahul Jannah, Desain Web bagi Pemula, 2020, Penerbit Elex
    Media Komputindo.

    Anda mungkin juga menyukai