Data Columns | Hover Underline | Auto Layout
ItemIDSizeColorQuantity
[1]TS001WSmallWhite329
[2]TS001BSmallBlack279
[3]TS002WMediumWhite231
[4]TS002BMediumBlack179
[5]TS003WLargeWhite205
Data Columns | Border | Vertical Separator | Align Center
ItemIDSizeColorQuantity
[1]TS001WSmallWhite329
[2]TS001BSmallBlack279
[3]TS002WMediumWhite231
[4]TS002BMediumBlack179
[5]TS003WLargeWhite205
Data Columns | Hover Color | Contrasting Header | Google Font
ItemIDSizeColorQuantity
[1]TS001WSmallWhite329
[2]TS001BSmallBlack279
[3]TS002WMediumWhite231
[4]TS002BMediumBlack179
[5]TS003WLargeWhite205

Responsive Data Columns

A table layout is used to display data in columns by removing the cell borders.
The item can be made responsive by checking the "Full Width" box in the Metrics inspector and setting a maximum width.
The table layout can be "auto" or "fixed" and the optional table caption can be aligned left, center or right. Although the table caption element is contained within the <table></table> tags, it sits outside of the table's boundary.
Example [1]
This shows the bare bones version with just a contrasting color for the head. The optional underline on hover has been added which makes it easier for vistors using computers to follow each row of data .
Example [2]
This version adds a border, a vertical separator and aligns both the head and the cell text center.
Example [3]
The final example uses a Google hosted font, has contrasting header and row hover color and background, a vertical separator and a box shadow.

© EverWeb Widgets -

EverWeb Widgets