EverWeb Widgets

Feature Comparison Table
FeatureBasic $49Plus $99Pro $149
Software
Updates
Support
Hosting 2GB
Hosting 10GB

* All features & prices subject to change *

Description

Each row in the comparison table has a feature name and up to 5 columns for categories. The table can have up to 48 rows. The caption and footer text are optional.
The table shown here has a contrasting header and a border has been applied to both the table and the rows. The columns can also have a border if required. Each border shares the same color but they are adjustable individually for border width.
Columns are added by checking boxes in the widget settings. Rows are added using the EverWeb Widget API Assets List.
The row has a field for entering the feature name and drop down selector menus for selecting "yes" or "no".
Yes creates a checkmark (✔) and no is signified by a heavy multiplication sign (✖).
Both of these symbols are created using CSS so there are no images or icon stylesheets to download.
As can be seen in the example, the symbols can be styled for color.

Table Rows

To add rows using the Assets list in the widgets settings follow these steps …

  • Click the Add button and select the entry
  • Enter the feature name in the box provide
  • Use the drop downs to select yes or no for each column
  • Add more rows as necessary

Responsive Options

The table is centered in a full width wrapper which has a setting for maximum width and to space the item vertically from those above and below.
The wrapper can be styled for background color and opacity if it is being used to scroll over a sticky (fixed) item.
When the browser width is decreased, the table gets to a point where the columns cannot be reduce in width any further. The point at which this happens will depend on the amount of row content. The minimum with control can be used to stop the table being squashed. At this point, the table will start to disappear off the screen to the right. The table is given on overflow-x so that mobile phone users can scroll it horizontally.

© EverWeb Widgets -