Styled Table

Tabular data with style

Sometimes, a nicely formatted table is perfect for making a point and making a lot of data available at a glance. If that sounds like something you need, Pax definitely has you covered.

Table with Default Skin

Column 1 Column 2 Column 3 Column 4
Item #1 Description Subtotal: $1.00
Item #2 Description Discount: $2.00
Item #3 Description Shipping: $3.00
Item #4 Description Tax: $4.00
All Items Description Your Total: $10.00
*Your table footer…

Black Table Example

Column 1 Column 2 Column 3 Column 4
Item #1 Description Subtotal: $1.00
Item #2 Description Discount: $2.00
Item #3 Description Shipping: $3.00
Item #4 Description Tax: $4.00
All Items Description Your Total: $10.00
*Your table footer…

Orange Table Example

Column 1 Column 2 Column 3 Column 4
Item #1 Description Subtotal: $1.00
Item #2 Description Discount: $2.00
Item #3 Description Shipping: $3.00
Item #4 Description Tax: $4.00
All Items Description Your Total: $10.00
*Your table footer…

The Code

[table color="#212121"]
<table class="custom-table">
<thead>
<tr>
<th scope="col">Column 1</th>
<th scope="col">Column 2</th>
<th scope="col">Column 3</th>
<th scope="col">Column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item #1</td>
<td>Description</td>
<td>Subtotal:</td>
<td>$1.00</td>
</tr>
<tr>
<td>Item #2</td>
<td>Description</td>
<td>Discount:</td>
<td>$2.00</td>
</tr>
<tr>
<td>Item #3</td>
<td>Description</td>
<td>Shipping:</td>
<td>$3.00</td>
</tr>
<tr>
<td>Item #4</td>
<td>Description</td>
<td>Tax:</td>
<td>$4.00</td>
</tr>
<tr>
<td><strong>All Items</strong></td>
<td><strong>Description</strong></td>
<td><strong>Your Total:</strong></td>
<td><strong>$10.00</strong></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">*Your table footer…</td>
</tr>
</tfoot>
</table>
[/table]

The Options

  • color – the background color of the table header
Copyright © 2017 1Mobility