contoh membuat list dan tabel di html

 membuat list dan tabel di html

Ringkasan penting!!!

Menurut dictionary.com salah satu pengertian dari list adalah serangkaian nama atau benda lain yang ditulis atau dicetak bersama-sama dalam suatu kelompok atau urutan yang bermakna sehingga membentuk suatu.

Di html, fungsi dari list adalah menampilkan data secara berurutan ke bawah, dengan menggunakan tag . dalam membuat list pada html ini, terdapat dua jenis tampilan list yang bisa di gunakan, yaitu ordered list dan unordered list.

• ordered list berfungsi untuk menampilkan daftar list dalam bentuk huruf atau angka. tag yang digunakan dalam ordered list ini yaitu 

• unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di awalnya. tag yang diguanakan untuk membuat unordered list yaitu

A. Tag List

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 Description List adalah list yang berisi definisi.

sumber : https://lmsspada.kemdikbud.go.id/

Untuk membuat suatu daftar yang berurutan dalam dokumen HTML, digunakan tag <ol> (ordered list), yang berpasangan dengan tag </ol>. Tag <ol> digunakan untuk memulai suatu daftar berurutan tertentu, sedangkan </ol> berfungsi untuk menandakan bahwa daftar tersebut sudah berakhir.

Masing-masing item di dalam daftar harus dibuat menggunakan tag <li> (list item, yang kemudian perlu ditutup dengan tag </li>.

Adapun atribut untuk tag <ol> adalah “type” yang menunjukan jenis penomorannnya. Secara standart, tipenya adalah menggunakan penomoran 1, 2, 3, 4 dst.

untuk penjelasan l;ebih lengkapnya, anda bisa mencari referensi di website atau blog lain. disini saya akan memberikan contoh code html beserta hasilnya dalam bentuk gambar

berikut ini adalah contoh kode html untuk membuat beberapa list :

berikut ini adalah contoh hasil jadi dari kode html tersebut :

B. Tag Tabel

Ringkasan Penting!!!

Tabel terdiri dari 4 unsur utama:

• Baris
• Kolom
• Sel
• Garis

Tabel sebetulnya terdiri dari baris, kolom, dan sel. biasanya tabel sendiri digunakan untuk
mengelompokan data yang menjelaskan suatu informasi, baik itu data maupun fakta.

• Baris adalah susunan bentuk horizontal dari kanan ke kiri
• Kolom yaitu susunan bentuk vertikal dari atas ke bawah
• Sel yaitu gabungan antara baris dan kolom

 Supaya lebih jelas silahkan pahami gambar di bawah ini.

Sumber : https://www.saidalfaruq.net/

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

• Tag <table> untuk membungkus tabelnya
• Tag <thead> untuk membungkus bagian kepala tabel
• Tag <tbody> untuk membungkus bagian body dari tabel
• Tag <tr> (tabel row) untuk membuat baris
• Tag <td> (table data) untuk membuat sel
• 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.

 Atribut Elemen Tabel

• Width =panjang(lebar table, pixel atau persen)
• Height =panjang(tinggi table, pixel atau persen)
• Border =pixel(tebal garis tepi)
• Cellspacing =pixel(spasi antar sel)
• Cellpadding =pixel(spasi di dalam sel)
• Align =[left|center|right](perataan table)
• Bgcolor =warna(warna latar belakang table)

Atribut Table Row

• Align =[left|center|right](perataan sebaris sel secara horizontal)
• Valign =[top|middle|bottom](perataaan sebaris sel secara vertical)
• Bgcolor =warna(warna latar belakang baris)

Atribut Tabel Data

• Align =[left|center|right](perataan horizontal)
• Width =[top|middle|bottom](perataan vertical)
• Height =pixel(tinggi sel, pixel atau persen)
• Bgcolor =warna(warna latar belakang sel)

Menggabungkan Sel Tabel

 Untuk membuat table seperti di atas, maka Tabel Atribut Data yang digunakan adalah sebagai berikut

• Rowspan =angka(baris yang di span oleh sel)
• Colspan =angka(kolom yang di span oleh sel)

Jadi untuk menggabungkan 4 baris seperti table di atas adalah :

<td rowspan=4> …….</td>

Sedangkan untuk menggabungkan 4 kolom seperti table di atas adalah :

<th colspan=4> …….</th>

berikut ini adalah contoh kode html untuk pembuatan tabel jadwal pelajaran :

berikut ini adalah contoh hasil dari kode html di atas :

itu saja informasi dari saya, dan itu hanyalah referensi kecil bagi anda..

terimakasih

Daftar Pustaka

• https://badoystudio.com/cara-membuat-tabel-di-html/
• https://freesiswa.blogspot.com/p/041b-pembuatan-list-dan-tabel-pada-html.html