Tutorial Cara Membuat 3 Macam List dan Tabel Pada HTML

17 September 2019 by Maressa Anastasya
Cara Membuat 3 Macam List dan Tabel Pada HTML

List merupakan elemen yang dipakai untuk memunculkan informasi dalam bentuk list dan umumnya dipakai untuk membuat menu. Sedangkan tabel adalah salah satu cara atau format untuk menampilkan informasi dalam web. Berikut akan kami berikan ulasan tentang cara membuat 3 macam list dan tabel pada HTML selengkapnya.

Cara Membuat List Pada HTML

Berikut ini akan kami jelaskan secara lengkap bagaimana cara membuat 3 macam list pada HTML secara satu per satu dengan jelas untuk panduan anda yang masih pemula.

Jenis list pada HTML sendiri terdiri dari 3 jenis yakni:

  • Ordered Lis: List yang berurutan.
  • Unordered Lis: List yang tidak berurutan.
  • Description List: List yang berisikan definisi.
  1. Cara Membuat Ordered List Pada HTML

Ordered List merupakan list yang berurutan dan list akan ditandai dengan angka atau huruf di bagian depannya untuk penanda jika list tersebut berurutan.

Ordered list dibuat dengan memakai tag dan tag ini mempunyai anak berupa tag untuk membuat item list yakni

  • [list item]. Berikut adalah contohnya:

 

 

Dan Berikut adalah hasilnya:

10 distro linux yang sering digunakan di Indonesia

  1. Ubuntu
  2. Mint
  3. BlankOn
  4. Fedora
  5. Debian
  6. CentOS
  7. OpenSUSE
  8. ElementaryOS
  9. BackTrack
  10. Kali Linux

Contoh list diatas diurutkan berdasarkan dengan angka dari 1 hingga 10. Namun jika anda ingin memakai huruf seperti a, b, c atau angka romawi seperti I, II, III, maka anda bisa memakai atribut type pada tag ol. Berikut adalah contohnya:

Nantinya, hasil yang bisa anda lihat adalah seperti ini:

  1. Cara Membuat Unordered List di HTML

Untuk unordered di HTML atau list yang tidak berurutan, biasanya akan memakai simbol simbol. Cara membuatnya adalah dengan memakai tag

    [unordered list] dan ini juga memiliki anak yang sama seperti .

Berikut adalah contohnya:

Nantinya, hasilnya akan seperti ini:

Daftar bahasa pemrograman

  • C
  • C++
  • Java
  • Python
  • PHP
  • Ruby
  • Perl

Secara simbol yang dipakai unordered list merupakan lingkaran kecil [disc]. Anda juga bisa menggantinya seperti ordered list dengan memakai atribut type. Berikut adalah contohnya:

Nantinya, hasilnya akan seperti ini:

Selain memakai beberapa type list di atas, anda juga bisa memakai gambar seperti contoh berikut ini:

Nantinya, hasilnya akan seperti ini:

Pada contoh diatas ini memakai inline CSS untuk mengganti simbol yang dipakai list menjadi gambar ikon.

  1. Cara Membuat Description List di HTML

List ini dipakai untuk menampilkan deskripsi atau penjelasan seperti contohnya adalah kamus. Tag untuk membuat description list adalah

[data list] dan dalam tag ini juga terdapat tag [data term] dan [data description]. Berikut adalah contohnya:

Nantinya, hasilnya akan seperti ini:

List di Dalam List [Nested List]

List juga bisa dibuat dalam sebuah list. Contohnya anda ingin menggabungkan ordered list dengan unordered list, maka caranya list yang ada di dalam ditulis di dalam tag li.

Berikut adalah contohnya:

Nantinya, hasilnya akan seperti ini:

Cara Membuat Tabel Pada HTML

Dalam sebuah dokumen, seringkali dipakai untuk menampilkan data pada pengguna dan ada banyak cara untuk menampilkan data dari mulai memakai daftar, grafik hingga tabel.

Seperti yang sudah dijelaskan di awal, tabel merupakan salah satu cara atau format yang digunakan untuk menampilkan informasi dalam web. Tabel sendiri terdiri dari 4 unsur utama, yakni:

  • Baris.
  • Kolom.
  • Sel.
  • Garis.

Anda bisa membuat tabel di HTML dengan beberapa tag yang sudah disediakan di HTML seperti beberapa cara berikut ini.

Tag untuk Membuat Tabel di HTML

Ada beberapa tag yang harus diingat ketika anda ingin membuat tabel di HTML, yakni:

Tag terpenting dan harus anda ingat adalah tag table, td dan juga td. Sedangkan tag lainnya merupakan tambahan atau opsional yang bisa digunakan atau tidak. Berikut adalah contohnya:

Nantinya hasilnya akan seperti ini:

Hasil tabel menjadi tanpa garis sebab tidak ditambahkan dengan atribut border di tabelnya. Supaya tabel mempunyai garis, maka bisa ditambahkan dengan atribut border=”1” dalam tag . Nantinya, hasilnya akan seperti ini:

Nilai “1” pada atribut border merupakan ukuran garis dan semakin besar ukuran, maka ukuran garisnya juga akan semakin besar. Nilai “1” merupakan ukuran garis yang paling kecil dan hasilnya nanti akan seperti ini:

Mengatur Jarak Sel Memakai Cellpadding

Atribut cellpadding merupakan atribut untuk mengatur jarak teks dengan garis yang ada di dalam sel. Atribut ini bisa anda berikan pada tag dan contohnya bisa dilihat berikut ini:

Nilai “10” di atribut cellpadding merupakan ukuran jarak antara teks sel dan garis dan hasilnya akan seperti ini:

Menambahkan Warna Pada Sel dan Baris

Untuk menambahkan warna di sel dan baris, anda bisa menambahkan atribut bgcolor di dalam tag td untuk sel atau tr untuk baris.
untuk sel atau untuk baris.

Berikut ini adalah contohnya:

Nilai atrbut bgcolor ini bisa anda isi dengan kode warna dalam heksadesimal atau nama warna dengan bahasa Inggris dan hasilnya akan seperti ini:

Menggabungkan Sel Tabel

Atribut yang dipakai untuk menggabungkan sel tabel adalah rowspan dan juga colspan:

  • Rowspan untuk menggabungkan baris.
  • Colspan untuk menggabungkan kolom.

Atribut ini bisa anda berikan untuk tag td atau th.

Berikut adalah contohnya:

Nantinya, hasilnya akan seperti ini:

Menyisipkan Elemen Lain ke Dalam Sel

Dalam seldan, anda bisa menyisipkan elemen HTML lainnya seperti link, gambar, video, list dan lain sebagainya seperti contoh berikut ini:

Nantinya, hasilnya akan seperti gambar berikut ini:

Demikian ulasan dari kami kali ini tentang beberapa cara membuat 3 macam list dan tabel pada HTML. Bagian tersulit ketika membuat tabel HTML adalah ketika menggabungkan sel sehinga anda harus lebih teliti tentang berapa ukuran sel yang akan digabungkan dengan rowspan dan juga colspan. Semoga ulasan kali ini bisa sangat membantu dan sebaiknya lakukanlah latihan sesering mungkin dari beberapa contoh diatas dan lihat tabel tabel yang ada di sekitar anda kemudian cobalah untuk membuat tabel tersebut dalam HTML.

Komentar

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.
Bidang yang harus diisi ditandai *

WhatsApp
IDprogrammer
IDprogrammer
Office

Kota Malang
- Jl. Laksda Adisucipto G.22 (Graha Cipta Residence Blok B.5)

Blitar
- Jl. Jendral Sudirman, Kecamatan Ponggok / Ruko Pojok No 8, Kab Blitar

About Us
IDprogrammer merupakan perusahaan IT yang fokus melayani jasa pembuatan Website dan Aplikasi Profesional
Office

Kota Malang
- Jl. Laksda Adisucipto G.22 (Graha Cipta Residence Blok B.5)

Blitar
- Jl. Jendral Sudirman, Kecamatan Ponggok / Ruko Pojok No 8, Kabupaten Blitar

About Us
IDprogrammer merupakan perusahaan IT yang fokus melayani jasa pembuatan Website dan Aplikasi Profesional
© Copyright 2019 IDprogrammer. All rights reserved.