EverWeb Widgets

Table Description

The table can have up to four columns and 48 rows. The first and third columns - for ID and Description - are optional.
Both the ID and Price columns have a setting for adjusting their width and the other two occupy the rest of the row space.
The price column has an option to add the currency symbol. These are expressed as CSS Hex values since the currency symbol is added as a CSS pseudo element so that it appears in very row without having to type it.
The options are for dollar, euro and pound. Other currency symbols will need to be enter per row using the appropriate HTML. Click the link below to find them.
There are options for showing the table caption and for footer text below the table.
Styles
The table has three controls for setting a border width - overall border, row border and column border. All three share the same color.
Since a conventional table with cell borders looks a little tacky, the table can also be zebra striped for clarity by assigning different font and background colors to the odd rows.
The table can have an overall box shadow and the container background can be styled for color and opacity. There is a control for adjusting the vertical spacing from the items above and below.
Links
Text in table cells can be configured as hyperlinks using HTML. Follow the link below to find out how. The widget has controls for setting the link color, hover color and text decoration.

Layout Example

The example above shows a different style. The ID column has been left out and the price column width set to 1/3 of the maximum width.

© EverWeb Widgets -