Scribd Logo
Unggah

Selamat datang di Scribd!

  • 04 Tabel

    Diunggah oleh

    I Kadek Hendra Librata
    12 tayangan16 halaman

    Hak Cipta

    © © All Rights Reserved

    Format Tersedia

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

    04 Tabel

    Diunggah oleh

    I Kadek Hendra Librata

    Hak Cipta:

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

    MEMBUAT TABEL DI HTML

    Sebelum melanjutkan materi tentang tabel, tulislah kode HTML


    untuk menampilkan tampilan sebagai berikut.
    Tabel digunakan untuk menyajikan data dalam bentuk kolom dan
    baris. Umumnya setiap kolom menunjukkan data yang sejenis, dan setiap
    baris yang terdiri atas kolom-kolom menunjukkan kelompok data dalam
    satu kesatuan. Sebuah tabel mempunyai judul, tempat anda menjelaskan
    kolom/baris yang dilibatkan, baris untuk informasi dan sel untuk setiap
    itemnya. Ada beberapa tag yang harus diingat untuk membuat tabel di
    HTML:

    1. Tag <table> untuk membungkus tabelnya


    2. Tag <tr> (tabel row) untuk membuat baris
    3. Tag <td> (table data) untuk membuat sel
    4. Tag <th> (table head) untuk membuat judul pada header

    Tag yang paling penting untuk diingat adalah tag <table>, <tr>, dan
    <td>. Sementara tag yang lain adalah tambahan (opsional).

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Latihan Tabel</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <td>Baris 1 kolom 1</td>
                <td>baris 1 kolom 2</td>
            </tr>
            <tr>
                <td>Baris 2 kolom 1</td>
                <td>baris 2 kolom 2</td>
            </tr>
        </table>
    </body>
    </html>
    Hasilnya akan menjadi seperti ini.

    Coba ganti value 1 dari atribut border menjadi 5, apa yang terjadi?

    Buatlah kode html untuk menampilkan tampilan sebagai berikut!


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Latihan Tabel</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>Nama</th>
                <th>Alamat</th>
                <th>Nomor HP</th>
            </tr>
            <tr>
                <td>Suwati</td>
                <td>Jl. Raya Sanur</td>
                <td>087862240123</td>
            </tr>
            <tr>
                <td>Sutrisno</td>
                <td>Jl. Melati</td>
                <td>082144485123</td>
            </tr>
        </table>
    </body>
    </html>
    Mengatur Lebar dan Tinggi Tabel

    Secara default bawaan HTML, setiap tabel akan diatur lebarnya


    secara otomatis dari besar data yang ada didalam tabel tersebut, namun
    jika kita ingin ‘memaksakan’ web browser untuk menampilkan tabel dengan
    lebar tertentu, kita bisa menambahkan sebuah atribut width untuk
    mengatur lebar tabel.

    <!DOCTYPE html>
    <html>
       <head>
          <title>attribut width HTML</title>
       </head>
    <body>
    <h2>Atribut width pada Tabel HTML</h2>
    <table border="1">
        <tr>
            <th>Nama</th>
            <th>Alamat</th>
            <th>No. HP</th>
        </tr>
        <tr>
            <td>Dewik</td>
            <td>Jl. Raya Melati, Gg. Komodo No. 3 Denpasar Timur, Bali</td>
            <td>081953365219</td>
        </tr>
    </table>
    </body>
    </html>
    Hasilnya lebar tabel akan menyesuaikan saat browser disempitkan
    maupun dilebarkan.
    Selanjutnya, untuk membuat ukuran web browser pada tampilan
    tabel tetap, sesuai dengan nilai dari atribut width. Atribut width dapat diisi
    dalam satuan pixel (misalnya: 400px, 600px) ataupun persen.

    <body>
    <h2>Atribut width pada Tabel HTML</h2>
    <table border="1" width="600px">
        <tr>
            <th>Nama</th>
            <th>Alamat</th>
            <th>No. HP</th>
        </tr>
        <tr>
        <tr>
            <td>Dewik</td>
            <td>Jl. Raya Melati, Gg. Komodo No. 3 Denpasar Timur, Bali</td>
            <td>081953365219</td>
        </tr>
    </table>
    </body>
    Hasilnya lebar tabel akan tetap walaupun browser disempitkan
    maupun dilebarkan.
    Sama seperti atribut width, atribut height dapat digunakan di dalam
    tag table atau tag tr. Jika digunakan di dalam tag table, maka nilai dari
    width akan dibagi secara merata kedalam seluruh baris. Namun jika
    menginginkan merubah tinggi baris tabel secara individu, tag width harus
    diletakkan pada setiap tag tr.

    <body>
    <h2>Atribut height pada Tabel HTML</h2>
    <table border="1" height="200px">
        <tr>
            <th>Nama</th>
            <th>Alamat</th>
            <th>No. HP</th>
        </tr>
        <tr>
        <tr>
            <td>Dewik</td>
            <td>Jl. Raya Melati</td>
            <td>081953365219</td>
        </tr>
        <tr>
            <td>Nyoman</td>
            <td>Jl. Ambarwati</td>
            <td>081953365222</td>
        </tr>
    </table>
    </body>
    Pada contoh kode HTML diatas, atribut height=”200px” pada tag
    table, sehingga web browser membagi tinggi 200px itu kepada seluruh baris
    yang ada.

    Untuk pengaturan tinggi kolom yang lebih spesifik, kita dapat


    mengatur tinggi masing-masing baris dengan cara menempatkan atribut
    height pada setiap tag tr.

    <body>
    <h2>Atribut height pada Tabel HTML</h2>
    <table border="1">
        <tr height="150px">
            <th>Nama</th>
            <th>Alamat</th>
            <th>No. HP</th>
        </tr>
        <tr>
        <tr  height="100px">
            <td>Dewik</td>
            <td>Jl. Raya Melati</td>
            <td>081953365219</td>
        </tr>
        <tr height="50px">
            <td>Nyoman</td>
            <td>Jl. Ambarwati</td>
            <td>081953365222</td>
        </tr>
    </table>
    </body>
    Seperti yang terlihat, bahwa ketiga baris pada tabel diatas memiliki
    tinggi yang berbeda-beda, karena kita menambahkan atribut pada setiap
    baris.

    1. height=”150px” pada baris pertama


    2. height=”100px” pada baris kedua
    3. height=”50px” pada baris ketiga.
    Mengatur Jarak Sel dengan Cellpadding dan Cellspacing

    Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan


    garis di dalam sel. Atribut ini dapat kita berikan kepada tag <table>

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Latihan Tabel</title>
    </head>
    <body>
        <table border="1" cellpadding="5px">
            <tr>
                <th>Nama</th>
                <th>Alamat</th>
                <th>Nomor HP</th>
            </tr>
            <tr>
                <td>Suwati</td>
                <td>Jl. Raya Sanur</td>
                <td>087862240123</td>
            </tr>
        </table>
    </body>
    </html>

    Hasilnya jarak teks dalam sel dengan border sel adalah 5 pixel seperti
    gambar di bawah ini.
    Atribut cellspacing adalah atribut untuk mengatur jarak border teks
    dengan border tabel. Atribut ini dapat kita berikan kepada tag <table>

    <body>
        <table border="1" cellspacing="10px">
            <tr>
                <th>Nama</th>
                <th>Alamat</th>
                <th>Nomor HP</th>
            </tr>
            <tr>
                <td>Suwati</td>
                <td>Jl. Raya Sanur</td>
                <td>087862240123</td>
            </tr>
        </table>
    </body>

    Bisa dilihat setelah ditambahkan atribut cellspacing 10px, maka jarak


    antara border teks dengan border tabel menjadi 10px.
    Menggabungkan Sel Tabel

    Atribut yang digunakan untuk menggabungkan sel tabel adalah


    rowspan dan colspan: Atribut ini bisa kita berikan kepada tag <td> atau
    <th>.

    1. rowspan untuk menggabungkan baris;


    2. colspan untuk menggabungkan kolom.
    3. <!DOCTYPE html>
    4. <html>
    5.     <head>
    6.         <title>Menggabungkan Tabel HTML</title>
    7. </head>
    8. <body>
    9.     <table border="1">
    10.        <tr>
    11.            <th colspan="2">Tinggi dan Berat Badan</th>
    12.        </tr>
    13.        <tr>
    14.        <tr>
    15.            <td>175 Cm</td>
    16.            <td>80 Kg</td>
    17.        </tr>
    18.        <tr>
    19.            <td>182 Cm</td>
    20.            <td>123 Kg</td>
    21.        </tr>
    22.        <tr>
    23.            <td>174 Cm</td>
    24.            <td>74 Kg</td>
    25.        </tr>
    26.        <tr>
    27.            <td>165 Cm</td>
    28.            <td>63 Kg</td>
    29.        </tr>
    30.    </table>
    31.
    32.</body>
    33.</html>
    Pada tag <th> table head (membuat judul pada header) telah
    dilakukan dilakukan penggabungan kolom sehingga menghasilkan tampilan
    sebagai berikut.

    Selanjutnya buatlah kode HTML untuk menghasilkan tampilan


    sebagai berikut.
        <table border="1">
            <tr>
                <th>No.</th>
                <th>Nama</th>
                <th colspan="2">Tinggi dan Berat Badan</th>
            </tr>
            <tr>
                <td>01</td>
                <td>Sutiyem</td>
                <td>156 Cm</td>
                <td>80 Kg</td>
            </tr>
            <tr>
                <td>02</td>
                <td>Made</td>
                <td>176 Cm</td>
                <td>70 Kg</td>
            </tr>
            <tr>
                <td>03</td>
                <td>Jessica</td>
                <td>166 Cm</td>
                <td>85 Kg</td>
            </tr>
            <tr>
                <td>04</td>
                <td>Budi</td>
                <td>200 Cm</td>
                <td>120 Kg</td>
            </tr>
         </table>
    Selanjutnya kita akan mencoba menggabungkan baris atau row.
    Tulislah kode berikut

    <!DOCTYPE html>
    <html>
        <head>
            <title>Menggabungkan Tabel HTML</title>
    </head>
    <body>
        <table border="1">
            <tr>
                <th>Nama</th>
                <th>Merk HP</th>
                <th>Sistem Operasi</th>
            </tr>
            <tr>
                <td>Sutiyem</td>
                <td>Redmi Note 9</td>
                <td rowspan="2">Android</td>
            </tr>
            <tr>
                <td>Made</td>
                <td>Samsung S7 Edge</td>
            </tr>
            <tr>
                <td>Jessica</td>
                <td>iPhone 5s</td>
                <td rowspan="2">iOS</td>
            </tr>
            <tr>
                <td>Budi</td>
                <td>iPhone XS</td>
            </tr>
        </table>
    </body>
    </html>
    Kode di atas akan menghasilkan tampilan sebagai berikut. Baris 2
    Kolom 3 akan digabungkan dengan Baris 3 Kolom 3 dengan nama Android.
    Sedangkan Baris 4 Kolom 3 akan digabungkan dengan Baris 5 Kolom 3
    menjadi iOS.

    Anda mungkin juga menyukai