Jumat, 06 November 2020

Belajar HTML #10: Cara Membuat Tabel di HTML

# 

Cara Membuat Tabel di HTML

Salah satu cara atau format menampilkan informasi dalam web adalah dengan tabel.

Tabel terdiri dari 4 unsur utama:

  1. Baris
  2. Kolom
  3. Sel
  4. Garis

Unsur Tabel

Lalu, bagaimana cara membuat tabel di HTML?

Kita bisa membuatnya dengan beberapa tag yang sudah disediakan di HTML.

Tag untuk Membuat Tabel di HTML

Ada beberapa tag yang harus diingat untuk membuat tabel di HTML:

  1. Tag <table> untuk membungkus tabelnya
  2. Tag <thead> untuk membungkus bagian kepala tabel
  3. Tag <tbody> untuk membungkus bagian body dari tabel
  4. Tag <tr> (tabel row) untuk membuat baris
  5. Tag <td> (table data) untuk membuat sel
  6. 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), boleh digunakan boleh tidak.

Mari kita lihat contohnya:

<!DOCTYPE html>
<html>
<head>
    <title>Belajar Membuat Tabel HTML</title>
</head>
<body>

    <table>
        <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:

Tabel tanpa garis

Kok tidak ada garisnya?

Iya, karena kita tidak menambahkan atribut border pada tabelnya.

Agar Tabelnya memiliki garis, silahkan tambahkan atribut border="1" di dalam tag <table>.

Sehingga akan menjadi seperti ini:

    <table boder="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>

Nilai "1" pada atribut border adalah ukuran garisnya. Semakin besar ukurannya, maka akan semakin besar pula ukuran garisnya.

Nilai "1" adalah ukuran garis yang palng kecil.

Hasilnya akan sepert ini:

Tabel dengan garis

Mengatur Jarak Sel dengan Cellpadding

Atribut cellpadding adalah atribut untuk mengatur jarak teks dengan garis di dalam sel.

Atribut ini dapat kita berikan kepada tag <table>.

Contoh:

    <table border="1" cellpadding="10">
        <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>

Nilai "10" pada atribut cellpadding adalah ukuran jarak antara teks sel dengan garis.

Maka hasilnya:

Tabel dengan cellpading

Menambahkan Warna pada Sel dan Baris

Untuk menambahkan warna pada sel dan baris, kita bisa menambahkan atribut bgcolor di dalam tag <td> (untuk sel) atau <tr> (untuk baris).

Contoh:

    <table border="1" cellpadding="10">
        <tr>
            <td bgcolor="yellow">Baris 1 kolom 1</td>
            <td>baris 1 kolom 2</td>
        </tr>
        <tr bgcolor="#00ff80">
            <td>Baris 2 kolom 1</td>
            <td>baris 2 kolom 2</td>
        </tr>
    </table>

Nilai atribut bgcolor bisa kita isi dengan kode warna dalam heksadesimal atau nama warna dalam bahasa inggris.

Maka hasilnya akan seperti ini:

Tabel dengan warna

Menggabungkan Sel Tabel

Atribut yang digunakan untuk menggabungkan sel tabel adalah rowspan dan colspan:

  • rowspan untuk menggbungkan baris;
  • colspan untuk mebggabungkan kolom.

Atribut ini bisa kita berikan kepada tag <td> atau <th>.

Penggabungan sel dengan rowspan dan colspan

Mari kita lihat contohnya:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Membuat Tabel HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th rowspan="2" bgcolor="yellow">Bulan</th>
            <th colspan="2" bgcolor="#00ff80">Hasil Panen</th>
        </tr>
        <tr>
            <th>Padi</th>
            <th>Kacang</th>
        </tr>
        <tr>
            <td>Januari</td>
            <td>500 Kg</td>
            <td>231 Kg</td>
        </tr>
        <tr>
            <td>Februari</td>
            <td>342 Kg</td>
            <td>423 Kg</td>
        </tr>
        <tr>
            <td>Maret</td>
            <td>432 Kg</td>
            <td>124 Kg</td>
        </tr>
        <tr>
            <td>April</td>
            <td>453 Kg</td>
            <td>523 Kg</td>
        </tr>
    </table>

</body>
</html>

Hasilnya:

Penggabungan sel dengan rowspan dan colspan

Menyisipkan Elemen yang Lain ke dalam Sel

Di salam sel <td> dan <th>, kita bisa menyisipkan elemen HTML yang lain, seperti gambar, link, video, list, dsb.

Contoh:

<!DOCTYPE html>
<html>
    <head>
        <title>Belajar Membuat Tabel HTML</title>
</head>
<body>
    <table border="1">
        <tr>
            <th colspan="3" bgcolor="yellow">Produk Unggulan</th>
        </tr>
        <tr>
            <td rowspan="4">
                <img src="https://www.petanikode.com/img/bibit.png" width="200" />
            </td>
        </tr>
        <tr>
            <td>Nama</td>
            <td>Benih Kode</td>
        </tr>
        <tr>
            <td>Harga</td>
            <td>Rp 192.000</td>
        </tr>
        <tr>
            <td>Fitur</td>
            <td>
                <ul>
                    <li>Dilengkapi Dokumentasi</li>
                    <li>Ukuran: 31MB</li>
                    <li>Masa Tanam: 6 Bulan</li>
                    <li>Lisensi: MIT</li>
                </ul>
            </td>
        </tr>
    </table>

</body>
</html>

Hasilnya:

Elemen HTML di dalam sel tabel

Apa Selanjutnya?

Menurut saya, bagian tersulit saat membuat tabel di HTML adalah saat menggabungkan sel. Karena kita harus teliti, berapa ukuran sel yang akan digabungkan dengan rowspan dan colspan.

Saran saya:

Sering-sering latihan dengan contoh kasus tertentu. Coba lihat tabel-tabel yang ada di skeliling kita, lalu coba buat tabel tersebut dalam HTML.

Berikutnya, silahakn pelajari:

sumber : https://www.petanikode.com/

Belajar HTML #10: Cara Membuat Tabel di HTML

November 06, 2020

Belajar HTML #09: Cara Membuat List di HTML

# 

Cara Membuat List di HTML

Jika kamu diminta menuliskan daftar barang yang harus dibeli pada dengan HTML..

..apa yang akan kamu lakukan?

Mungkin kamu bisa membuatnya seperti ini:

<h1>Daftar Barang untuk diblie:</h1>
<p>- Flashdisk 64GB</p>
<p>- Kabel Data USB 3.0</p>
<p>- Kertas A4</p>

Hasilnya memang akan terlihat seperti sebuah list.

List dengan paragraf

Tapi, ini bukanlah cara membuat list yang benar di HTML.

Elemen List di HTML

HTML sudah menyediakan elemen untuk membuat list. Ada tiga macam jenis list yang bisa dibuat di HTML:

  1. Ordered List adalah list yang terurut;
  2. Unordered List adalah list yang tak terurut;
  3. dan Descriptiona List adalah list yang berisi definisi.

Mari kita bahas satu-per-satu…

1. Ordered List di HTML

Ordered list dibuat dengan tag <ol>. Lalu di dalamnya diisi dengan item-item yang akan dimasukkan ke dalam list. Item dibuat dengan tag <li> (list item).

Ordered list

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Membuat Ordered List</title>
</head>

<body>
    <h1>Buah Favoritku:</h1>
    <ol>
        <li>Jeruk</li>
        <li>Durian</li>
        <li>Pisang</li>
        <li>Pepaya</li>
        <li>Mangga</li>
    </ol>
</body>
</html>

Hasilnya:

Contoh ordered list

List diatas diurutkan berdasarkan angka dari 1, 2, 3, sampai 5.

Lalu bagaimana kalau kita ingin menggunakan huruf seperti a, b, c atau angka romawi seperti I, II, III?

Gampang..

Untuk membuat yang seperti itu, kita bisa menggunakan atribut type pada tag ol dan berikut ini nilai yang bisa diberikan:

  • a untuk alfabet a, b, c, dan seterusnya;
  • A untuk alfabet A, B, C, dan seterusnya;
  • i untuk angka romwari i, ii, iii, dan seterusnya;
  • I untuk angka romwari I, II, III, dan seterusnya.

Contoh:

<!DOCTYPE html>
<html>

<head>
    <title>Ordered List dengan Atribut Type</title>
</head>

<body>
    <h3>List dengan type alfabet</h3>
    <ol type='a'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
    <h3>List dengan type alfabet kapital (huruf besar)</h3>
    <ol type='A'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
    <h3>List dengan type romawi</h3>
    <ol type='i'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
    <h3>List dengan type romawi kapital</h3>
    <ol type='I'>
        <li>Tutorial List di HTML</li>
        <li>Tutorial Link di HTML</li>
        <li>Tutorial Tabel di HTML</li>
    </ol>
</body>

</html>

Hasilnya:

Contoh ordered list dengna type

2.Unordered List di HTML

Unordered list adalah list yang tak terurut yang menggunakan simbol-simbol pada item-nya. Unordered list dibuat dengan tag <ul> dan untuk item-nya dibuat juga dengan tag <li>.

Tag ul di HTML

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Membuat Unordered List</title>
</head>

<body>
    <h1>Bahasa Pemrograman untuk dipelajari:</h1>
    <ul>
        <li>Javascript</li>
        <li>PHP</li>
        <li>Java</li>
        <li>Python</li>
        <li>Kotlin</li>
    </ul>
</body>
</html>

Hasilnya:

Contoh unordered list

Secara default simbol yang digunakan oleh unordered list adalah lingkaran kecil (disc). Kita juga bisa menggantinya dengan atribut type.

Berikut ini nilai yang bisa diberikan untuk atribut type:

  • square untuk simbol persegi;
  • disc (default) untuk simbol lingkaran disc;
  • none tidak memakai simbol;
  • circle untuk simbol lingkaran;

Contoh:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Membuat Unordered List</title>
</head>

<body>
    <h1>Bahasa Pemrograman untuk dipelajari:</h1>
    <ul type="square">
        <li>Javascript</li>
        <li>PHP</li>
        <li>Java</li>
        <li>Python</li>
        <li>Kotlin</li>
    </ul>
    <h1>Framework untuk dipelajari:</h1>
    <ul type="circle">
        <li>Vuejs</li>
        <li>Svelte</li>
        <li>Reactjs</li>
    </ul>
    <h1>Tools untuk dipelajari:</h1>
    <ul type="none">
        <li>Gulp</li>
        <li>NPM</li>
        <li>Js Lint</li>
    </ul>
    <h1>Pelajari juga:</h1>
    <ul type="disc">
        <li>JSON</li>
        <li>XML</li>
        <li>Markdown</li>
    </ul>
</body>
</html>

Hasilnya:

Contoh type untuk ul

Selain menggunakan type, kita juga bisa menggunakan gambar.

Ini dilakukan dengan style CSS.

Contohnya:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Membuat Unordered List</title>
</head>

<body>
    <h1>Bahasa Pemrograman untuk dipelajari:</h1>
    <ul style="list-style-image: url(https://assets.ubuntu.com/sites/ubuntu/latest/u/img/favicon.ico)">
        <li>Javascript</li>
        <li>PHP</li>
        <li>Java</li>
        <li>Python</li>
        <li>Kotlin</li>
    </ul>
</body>
</html>

Hasilnya:

UL dengan icon

3. Description List di HTML

Description List adalah list yang berisi deksripsi atau penjelasan dari sesuatu.

Ada tiga tag yang digunakan untuk membuat description list:

  • <dl> (description list) tag untuk memulai description list;
  • <dt> (description term) tag untuk membuat kata yang akan dideskripsikan;
  • <dd> (description description) tag untuk membuat penjelasan dari kata.

Format penulisannya seperti ini:

Description list di HTML

Contoh:

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Membuat Description List</title>
</head>

<body>
    <h1>Daftar istilah:</h1>
    <dl>
        <dt>Kopi</dt>
        <dd>Sebuah minuman berwarna hitam. Menurut pendapat lain kopi adalah air yang dimasak sampai gosong.</dd>
        <dt>Kopi Black Magic</dt>
        <dd>Kopi hitam atau kopi tradisional yang dibuat dengan mantra-mantra.</dd>
        <dt>White Coffee</dt>
        <dd>Kopi berwarna putih, kandungan kafeinnya sedikit.</dd>
        <dt>Kopi++</dt>
        <dd>Kopi ini mampu meningkatkan imajinasi 99 kali lipat.</dd>
    </dl>
</body>

</html>

Hasilnya:

Contoh description list

List di dalam List (Nested List)

List juga dapat dibuat di dalam list, misalkan kita ingin menggabungkan ordered list dengan unordered list.

Caranya, list yang di dalam ditulis di dalam tag <li>.

Contoh:

<!DOCTYPE html>
<html lang='en'>

<head>
    <title>List di dalam List</title>
</head>

<body>
    <h1>Distro Linux dan Keluarganya</h1>
    <ol>
        <li>Debian
            <ul>
                <li>Ubuntu</li>
                <li>Mint</li>
                <li>elementaryOS</li>
            </ul>
        </li>
        <li>RedHat
            <ul>
                <li>Fedora</li>
            </ul>
        </li>
        <li>Slackware</li>
    </ol>
</body>

</html>

Hasilnya:

Contoh list nested

Apa Selanjutnya?

Materi tentang list sampai di sini ya..

Intinya:

Kamu harus tahu cara membuat list, baik itu ordered list, unordered list, dan juga description list.

Jika masih bingung, silahkan tanyakan di komentar.

Selanjutnya silahkan pelajari:

sumber : https://www.petanikode.com/

Belajar HTML #09: Cara Membuat List di HTML

November 06, 2020
Langganan: Postingan (Atom)

 
KELAS RPL © 2020 - Syaiful Bachri - SMN 17 Jakarta - Designed by Templateism.com | Distributed By Blogger Templates