LIST & TABEL HTML

 MEMBUAT LIST & TABEL

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 :

Berikut ini contoh tabel yang menggabungkan kolom :

 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> 

Contoh tabel:

Hasilnya:

DAFTAR PUSTAKA

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