TUGAS 4 LIST DAN TABEL

 

                 Pembuatan List dan Tabel pada HTML

 A.      KOMPETENSI DASAR

3.5   Menerapkan cara Pembuatan List dan Tabel dalam sajian multimedia 

interaktif berbasis halaman web dan media interaktif

4.5.  Menggabungkan Pembuatan List dan Tabel dalam sajian multimedia interaktif 

berbasis halaman web dan media interaktif

B.      PENDAHULUAN

List atau yang kita kenal dengan daftar berurutan merupakan fungsi dalam HTML 

yang digunakan untuk menampilkan data secara berurutan ke bawah. Dalam HTML 

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

Tabel merupakan struktur yang digunakan untuk menampilkan informasi dalam bentuk baris

 dan kolom.

Ø  <table> merupakan tag pembuka dalam membuat sebuah table pada html, tanpa

    <table> ini, penggunaan <tr> dan <td> tidak bisa difungsikan dengan baik.

Ø  <tr> atau dikenal dengan table row merupakan tag yang digunakan untuk membuat

    baris dalam table HTML

Ø  <td> atau dikenal dengan table data merupakan tag yang digunakan untuk 

    membuat kolom dalam baris dan untuk menampilkan data dalam table

Ø  <th> untuk membuat table head atau bagian kepala pada table.

Contoh :

C.      TAG LIST

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.

Selain tipe default, tipe lain yang dapat digunakan untuk keperluan penomoran dalam 

suatu list adalah :

CONTOH:

D.      TAG 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.

CONTOH:

HASIL:

Untuk mendifinisikan table heading atau judul tiap kolom menggunakan tag <th> ….. </th>

 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)

DAFTAR PUSTAKA 

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