Formatting: Table


About

Formatting Table is an HTML format and configuration that can be added to Table elements - (Demo).



Specification




Configuration



Description

skin
Skin is used as the background for the Header (element th). Choose one of the available skins from Skin List.

shadow
Shadow.

Value Preview
no View
yes View

align
Cell alignment.

Value Description
left Align left
center Align center
right Align right
justify Justify

header-align
Header alignment.

Value Description
left Align left
center Align center
right Align right
justify Justify

caption-side
Caption position.

Value Description
top Top
bottom Bottom

formatting
By default, the system will process all TABLE elements that placed in supports at data specifications. By giving the value no to this configuration, TABLE element will not be processed with formatting (it will use the browser's default style).



Usage

  1. This formatting will process all TABLE elements. 

          
<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

    Note: In the HTML above, no configurations are added. All configurations will take Default Values.


  2. Add the desired configuration by adding the attribute
    data-configuration-name='Value' to the TABLE element.

    Example: 
          
<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
Have Question?