Formatting: Table

Tentang

Formatting Table adalah format HTML dan konfigurasi yang bisa ditambahkan pada elemen Tabel - (Demo).



Spesifikasi




Konfigurasi



Keterangan

skin
Skin digunakan sebagai background Header (elemen th). Pilih salah satu skin yang tersedia pada Daftar Skin.

shadow
Banyang.

Nilai Pratinjau
no Lihat
yes Lihat

align
Rataan cell.

Nilai Keterangan
left Rata kiri
center Rata tengah
right Rata kanan
justify Rata kiri-kanan

header-align
Rataan Header.

Nilai Keterangan
left Rata kiri
center Rata tengah
right Rata kanan
justify Rata kiri-kanan

caption-side
Positi caption.

Nilai Keterangan
top Atas
bottom Bawah

formatting
Secara default, sistem akan memproses semua elemen TABLE pada penggunaan yang didukung sesuai data spesifikasi. Dengan memberikan nilai no pada konfigurasi ini, elemen TABLE yang bersangkutan tidak akan diproses dengan formatting (akan menggunakan style default browser).



Penggunaan

  1. Formatting ini akan memproses semua elemen TABLE.

            
    <table>
      <tbody>
        <tr>
    	  <th>Header 1</th>
    	  <th>Header 2</th>
    	</tr>
        <tr>
    	  <td>Cell 1.1</td>
    	  <td>Cell 1.2</td>
    	</tr>
    	<tr>
    	  <td>Cell 2.1</td>
    	  <td>Cell 2.2</td>
    	</tr>
      </tbody>
    </table>
    		
            

    Header 1 Header 2
    Cell 1.1 Cell 1.2
    Cell 2.1 Cell 2.2

    Keterangan: Pada HTML diatas, tidak ada satupun konfigurasi yang ditambahkan. Semua konfigurasi akan mengambil Nilai Default.


  2. Tambahkan konfigurasi yang dikehendaki dengan cara menambahkan atribut
    data-nama-konfigurasi='Nilai' pada elemen TABLE.

    Contoh:
            
    <table data-skin='blue' data-align='center' data-caption-side='bottom'>
      <caption>Caption</caption>
      <tbody>
        <tr>
    	  <th>Header 1</th>
    	  <th>Header 2</th>
    	</tr>
        <tr>
    	  <td>Cell 1.1</td>
    	  <td>Cell 1.2</td>
    	</tr>
    	<tr>
    	  <td>Cell 2.1</td>
    	  <td>Cell 2.2</td>
    	</tr>
      </tbody>
    </table>
    		
            

    Caption
    Header 1 Header 2
    Cell 1.1 Cell 1.2
    Cell 2.1 Cell 2.2
Komentar