List & Tabel Menggunakan Html

A. LIST

List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML penilisan list menggunakan tag <li>. 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 <ol>

Ø  unordered list berfungsi untuk menampilkan daftar list dalam bentuk bulatan atau kotak di awalnya. tag yang diguanakan untuk membuat unordered list yaitu  <ul>

Contoh Isi Html:

Hasil:

 B. TABEL

Tabel terdiri dari 4 unsur utama:

---Baris

 ---Kolom

---Sel

 ---Garis

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)

 

Menambah Warna 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).

 

Menggabungkan Sel Tabel

Ada kalanya kita membuat table dengan menggabungkan baris, ataupun kolom. Berikut ini contoh tabel yang menggabungkan baris :

Benua	Negara
ASIA	Arab Saudi
	India
	Indonesia
	Singapura

 Berikut ini contoh tabel yang menggabungkan kolom :

Benua	EROPA
Negara	Belanda	Italia	Inggris	Jerman

Mari kita belajar cara membuat tabel di HTML dengan CSS yang bagus, dengan menggunakan tag <table> dan dibantu beberapa tag di dalamnya seperti beberapa tag <tr> yang berfungsi untuk table row atau baris, <th> tag mendefinisikan sel header dalam tabel HTML, <td> tag mendefinisikan sel data dalam tabel.

Dengan table di HTML kita bisa menyajikan sebuah data layaknya di spreadsheet atau excel. Kita ambil salah satu contohnya membuat tabel jadwal pelajaran di html. Untuk langkah-langkah bisa kalian ikuti di bawah ini :

Membuat Tabel di HTML tag table

• kita buat dahulu file html, di sini saya menggunakan nama file index.html
• setelah di buat pastikan file disimpan dan bisa diakses oleh browser, jika sudah coba test dengan membukanya di browser biasa kalian pakai.
• selanjutnya jika berhasil dibuka oleh browser, isikan file file index.html dengan kode html di bawah ini:
• 
  
  
  
  
  
  
  
  
  
  

Hasilnya :

Penjelasan :

• hasilnya hanya akan membuat table satu baris saja dari kode HTML di atas.
• <table border="1"> di bagian tag table terdapat properti border fungsinya untuk memberi garis di setiap baris dan kolom, dan angka 1 mengartikan seberapa tebal garis di buat.
• <tr> dengan tag itu kita bisa membuat baris baru dan dikombinasikan dengan <th> atau <td>.
• <th> singkatan dari table head, posisinya selalu di dalam tag <tr> dan posisinya di awal sebagai kepal.

• Menggunakan atribut rowspan dan colspan tag table

  • colspan : Menentukan jumlah kolom yang harus dibentangkan di dalam sel.
  • rowspan : Mengatur jumlah baris yang harus dibentangkan di dalam sel.

  menggunakan atribut colspan

• 1. Atribut rowspan digunakan untuk menggabungkan baris pada tabel
  2. Atribut colspan digunakan untuk menggabungkan kolom pada tabel
     

     Pada kode di atas atribut rowspan memiliki nilai 2 artinya baris yang akan digabung berjumlah 2 baris. Sedangkan atribut colspan memiliki nilai 3 artinya kolom yang akan digabung berjumlah 3 kolom. Kode di atas juga terdapat tag th yang berfungsi sebagai kepala tabel. Saat ditampilkan data yang ada dalam tag th akan memiliki efek tebal atau bold dibandingkan dengan data yang ada di tag td.

     Hasil dari kode program diatas seperti berikut :

     

     Memberikan Warna dan Jarak Antar Sel pada HTML

     Pada contoh kode program sebelumnya, tabel yang dihasilkan terkesan saling berdekatan antar satu sel dengan sel yang lain. Untuk mengatasi hal itu HTML telah menyediakan atribut cellpadding yang bisa kamu gunakan untuk mengatur jarak antar sel. Atribut cellpadding ini bisa diterapkan langsung pada tag table seperti berikut :
     

     1 2 3

     <table border="1" cellpadding="8">      .... </table>

     
     Semakin tinggi nilai yang ada pada atribut cellpadding maka jarak antar sel akan semakin lebar begitupun sebaliknya. Kamu juga bisa memberikan warna latar belakang pada sel atau tabel dengan menggunakan atribut bgcolor kemudian diisi dengan warna. Misal kita akan beri warna latar belakang kuning pada nilai dan abu-abu pada nama. Maka kamu hanya perlu menambahkan atribut bgcolor pada tag th seperti berikut ini :
     

     1 2	<th bgcolor="grey" rowspan="2">Nama</th> <th bgcolor="yellow" colspan="3">Nilai</th>

     
     Setelah ditambahkan atribut cellpadding pada tag table dan atribut bgcolor pada tag th maka tabel tadi akan tampil seperti pada gambar di bawah ini :

Menerapkan kode CSS untuk Desain Tabel

Sebelumnya sudah kita bahas bagaimana membuat garis dan memberikan warna serta jarak pada tabel dengan menggunakan atribut yang ada di HTML. Untuk saat ini setelah kehadiran CSS penggunaan atribut tersebut dalam mendesain tabel sudah tidak disarankan lagi. Kamu disarankan menggunakan kode CSS dalam membuat garis dan memberikan warna serta jarak pada tabel.

Memasukan kode CSS pada halaman web bisa dengan membuat berkas CSS terpisah atau disimpan dalam elemen head pada HTML. Usahakan jangan disimpan pada elemen HTML yang lain karena bisa membuat kode program terlihat tidak rapi. Selain itu juga dengan menyimpan kode CSS pada file terpisah atau di dalam elemen head akan membuat kode CSS tersebut dapat digunakan secara berulang-ulang.

Kode CSS dapat ditulis dengan mendefinisikan terlebih dahulu tag HTML apa yang akan kamu ubah atau beri efek CSS. Lebih jelasnya silakan kamu perhatikan contoh kode program berikut.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Mengenal Tabel HTML</title>     <style>         table {             border-collapse: collapse;         }         table, th, td {             border: 1px solid black;         }         th, td {             padding: 10px;         }         th {             background-color: #4CAF50;             color: white;         }     </style> </head> <body>     <table>         <tr>             <th rowspan="2">Nama</th>             <th colspan="3">Nilai</th>         </tr>         <tr>             <th>Kimia</th>             <th>Fisika</th>             <th>Biologi</th>         </tr>         <tr>             <td>Robby</td>             <td>76</td>             <td>80</td>             <td>81</td>         </tr>         <tr>             <td>Rendi</td>             <td>84</td>             <td>70</td>             <td>75</td>         </tr>         <tr>             <td>Alfian</td>             <td>96</td>             <td>70</td>             <td>71</td>         </tr>     </table> </body> </html>

Contoh kode program di atas telah memiliki kode CSS. Kode CSS diletakan di dalam elemen style yang disimpan di dalam elemen head. Elemen style ini berfungsi untuk menandakan bahwa kode yang ada di dalamnya merupakan kode CSS yang digunakan untuk mendesain halaman web.

Lalu properti CSS yang ada pada kode program di atas berfungsi untuk apa aja? Mari kita ulas sekilas mengenai properti CSS yang digunakan pada kode program di atas.

1. Properti border-collapse: collapse; digunakan untuk menciutkan garis tabel menjadi satu garis
2. Properti border: 1px solid black; digunakan untuk memberikan garis beserta ketebalan garis dan warna dari garis tersebut
3. Properti padding: 10px; digunakan untuk mengontrol jarak konten yang ada pada tabel
4. Properti background-color: #4CAF50; digunakan untuk memberikan warna latar belakang biru
5. Properti color: white; digunakan untuk memberikan warna putih pada teks

Hasil dari kode program tersebut maka tabel yang ditampilkan akan seperti berikut : 

Sering-seringlah berlatih dan terus kembangkan kemampuanmu

DAFTAR PUSTAKA

https://freesiswa.blogspot.com/p/041b-pembuatan-list-dan-tabel-pada-html.html

 https://pemburukode.com/langkah-langkah-cara-membuat-tabel-di-html/

https://www.dicoding.com/blog/cara-membuat-table-di-html/