Materi Web Desain : Mengenal HTML List dan HTML Table - Materi sebelumnya tentang HTML Style dan Format text, dilanjutkan dengan materi HTML List dan HTML Table. Apa itu HTML List dan HTML Table ? mari ikuti pembahasannya.

HTML List digunakan untuk membuat daftar seperti yang biasa ditemukan dalam Ms Word Bulet and Numbering. HTML List dibagi menjadi 2 yakni Unordered List dan Ordered List.

Unordered List merupakan list tanpa pengurutan atau list yang menggunakan bullet. Sedangkan Ordered List merupakan list dengan pengurutan atau list yang menggunakan angka maupun huruf.

Contoh :

 <ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Tag diatas akan menampilkan daftar Minuman namun tidak diurutkan dengan angka atau huruf namun dengan bullet.

Selain menggunakan list yang berbentuk bulat, tentunya HTML Style Unordered List mempunyai style lain.

 <ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

list-style-type:disc
list-style-type:circle
list-style-type:square
list-style-type:none

Ordered List merupakan tipe list berurut, yakni menggunakan angka maupun huruf.

Contoh :

 <ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Pengaturan huruf atau angka dapat dilakukan dengan type.

Berikut list type nya

type="1"
type="A"
type="a"    
type="I"
type="i"

Contoh :

 <ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML Table digunakan untuk membuat tabel. Tabel terdiri dari kolom dan baris.

Contoh :

 <table style="width:100%">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
</table>

Penjelasan :

<table> mendefinisikan tag table
<tr> atau table row, baris
<td> atau table data, isi dari row
<th> atau table heading, isi kepala table

Melakukan merger pada Kolom

Contoh :
 <table style="width:100%">
  <tr>
    <th>Name</th>
    <th colspan="2">Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
</table>

Melakukan Merger pada Baris
 <table style="width:100%">
  <tr>
    <th>Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>