Yuk Belajar!
List & Table
Membuat List HTML
  • Terdapat dua tag untuk membuat list pada HTML yaitu, <ol> (Ordered List), digunakan untuk
  • membuat urutan angka dan <ul> (Unordered List), digunakan untuk membuat urutan simbol,
  • simbol dapat berupa bulat/kotak.
    • Membuat Ordered List

    <!DOCTYPE html>

    <html>

    <head>

    <title>penggunaan list HTML </title>

    </head>

    <body>

    <h1>Daftar Matakuliah</h1>

    <ol>

    &><li>Matematika</li>

    &><li>Fisika</li>

    <li>Kalkulus</li>

    <li>Pemrograman</li>

    <li>Sistem Basis Data</li>

    </ol>

    </body>

    </html>

  • Anda juga dapat menambahkan beberapa format penomoran pada <ol> contoh nya type="I"
  • pada <ol> sehingga menjadi <ol type="I"> untuk membuat huruf Romawi ,berikut adalah format
  • lain untuk jenis
      seperti berikut :
  • Type="I"
  • Type="i"
  • Type="A"
  • Type="a"
  • Type="1"
  • Maka akan ditampilkan hasil seperti ini!
  • Anda juga dapat menambahkan beberapa format penomoran pada
      contoh nya type="I"
    1. Anda juga dapat menambahkan beberapa format penomoran pada
        contoh nya type="I"
      1. Anda juga dapat menambahkan beberapa format penomoran pada
          contoh nya type="I"
    • Membuat Unordered List

    <!DOCTYPE html>

    <html>

    <head>

    <title>penggunaan list HTML </title>

    </head>

    <body>

    <h1>Daftar Matakuliah</h1>

    <ul>

    <li>Matematika</li>

    <li>Fisika</li>

    <li>Kalkulus</li>

    <li>Pemrograman</li>

    <li>Sistem Basis Data</li>

    </ul>

    </body>

    </html>

  • Secara default jika kita tidak menggunakan type maka list yang terbentuk berupa disc atau
  • lingkaran untuk mengubah bentu lingkaran anda dapat menambahkan type pada atribute <ul> :
    1. <ul style="list-style-type:square">
    2. <ul style="list-style-type:disc;">
    3. <ul style="list-style-type:none;">
    Cara Membuat Table HTML
  • Secara umum sebuah table pada terdiri dari beberapa beberapa bagian yaitu :
    1. Baris/Rows, Merupakan sebuah data yang ditampilkan secara Horizontal atau Mendatar
    2. Kolom/Colums, Merupakan sebuah data yang ditampilkan secara Vertical atau turun naik
    3. Cell, adalah sebuah kotak yang berada antara Baris dan Kolom
    4. Garis/Border,Merupakan garis untuk membatasi antar Cell atau memberikan garis pada table
    5. <table>, sebuah tag yang digunakan untuk membuat table
    6. <thead>, sebuah tag yang digunakan untuk membuat judul/title pada kolom didalam tag ini terdiri dari <th>
    7. <tbody>,sebuah tag yang digunakan untuk membuat kolom dan baris didalam nya terdiri dari <tr> dan <td>
    8. <th>(table head), digunakan untuk memberikan nama kolom, digunakan untuk membuat judul. tag ini dauber didalam <thead >
    9. <tr> (table row), digunakan untuk membuat baris tag ini berada didalam <tbody>
    10. <td> (table data),diigunakan untuk membuat kolom tag ini berada didalam <tbody>

    <!DOCTYPE html>

    <html>

    <head>

    <title>Cara Membuat Tabel HTML</title>

    </head>

    <body>

    <table>

    <thead>

    <th>

    Judul kolom 1

    </th>

    <th>

    Judul kolom 2

    </th>

    </thead>

    <tbody>

    <tr>

    <td>Contoh Baris ke-1 kolom ke-1</td>

    <td>Contoh Baris ke-1 kolom ke-2</td>

    </tr>

    <tr>

    <td>Contoh Baris ke-2 kolom ke-1</td>

    <td>Contoh Baris ke-2 kolom ke-2</td>

    </tr>

    </tbody>

    </table>

    </body>

    </html>

  • Pada table kita juga mengenal border dan cell padding, fungsi border adalah untuk memberikan
  • baris pada table kita dapat memberikan property pada table yaitu dengan **border, **contoh
  • penggunaan border sebagai berikut : <table border="1"> pada tag table. property cellpadding
  • digunakan untuk memberikan jarak antara teks yang berada didalam cell dengan garis, contoh
  • penggunaan cellpadding sebagai berikut : <table border="1" cellpadding="12">
    • Berikut adalah coding pembuatan table setelah diberikan border dan cellpadding :

    <!DOCTYPE html>

    <html>

    <head>

    <title>Cara Membuat Tabel HTML</title>

    </head>

    <body>

    <table border="1" cellpadding="12">

    <thead>

    <th>

    Judul kolom 1

    </th>

    <th>

    Judul kolom 2

    </th>

    </thead>

    <tbody>

    <tr>

    <td>Contoh Baris ke-1 kolom ke-1</td>

    <td>Contoh Baris ke-1 kolom ke-2</td>

    </tr>

    <tr>

    <td>Contoh Baris ke-2 kolom ke-1</td>

    <td>Contoh Baris ke-2 kolom ke-2</td>

    </tr>

    </tbody>

    </table>

    </body>

    </html>

  • Kita juga dapat memberikan warna background pada suatu baris atau kolom dengan property
  • bgcolor, berikut adalah cara untuk memberikan warna backgorund : <th bgcolor="#28B463">
  • pada <th> (thead). hasilnya sebagai berikut :
    • Menggabungkan Cell Baris dan Kolom
  • Terkadang kita perlu menggabungkan beberapa cell pada tabel untuk keperluan tertentu, pada
  • table html ada dua jenis property yang dapat kita gunakan untuk melakukan nya property
  • tersebut adalah :
  • colspan, digunakan untuk menggabungkan cell kolom
  • rowspan, digunakan untuk menggabungkan baris.
  • Untuk menggunakan colspan atau rowspan kita perlu menentukan terlebih dahulu jumlah baris
  • atau kolom mana yang akan digabungkan, setelag itu berikan atribut colspan="2" atau
  • rowspan="3" angka pada atribut tersebut menunjukan jumlah baris atau kolom yang akan
  • digabungkan. contoh penggunaan :

    • <!DOCTYPE html>

    <html>

    <head>

    <title>Belajar Membuat Tabel HTML</title>

    </head>

    <body>

    <table border="1">

    <tr>

    <th rowspan="2" bgcolor="#FF5733">Tahun</th>

    <th colspan="2" bgcolor="#F720D0">Jumlah Pendaftar</th>

    </tr>

    <tr>

    <th>IF</th>

    <th>SI</th>

    </tr>

    <tr>

    <td>2015</td>

    <td>200</td>

    <td>331</td>

    </tr>

    <tr>

    <td>2016</td>

    <td>352</td>

    <td>403</td>

    </tr>

    <tr>

    <td>2017</td>

    <td>400</td>

    <td>500</td>

    </tr>

    <tr>

    <td>2018</td>

    <td>550</td>

    <td>623</td>

    </tr>

    <tr>

    <td>2019</td>

    <td>753</td>

    <td>823</td>

    </tr>

    <tr>

    <td>2020</td>

    <td>453</td>

    <td>523</td>

    </tr>

    </table>

    </body>

    </html>

  • Maka hasilnya akan seperti ini:
  • Ayo pelajari lebih banyak lagi!

    • Iframe ←

    Materi Sebelumnya
    Materi Selanjutnya

    →CSS