Table
A data table with optional interactivity. Tabs: Content, Table Options, Styling, Animations, Advanced.
A <table> should hold tabular data — rows and columns that relate to each other — never page layout (use CSS grid or flexbox to arrange a page). For accessibility, each column needs a header cell marked scope="col" (and row headers scope="row") so a screen reader can announce which header a value belongs to, plus a <caption> naming the table. UnysonPlus outputs a real <table>, so these semantics carry straight through to the page. MDN: HTML tables
Live demo​
▶ See the Table live on the demos site — an interactive example you can click through.
Table Options​
| Option | Choices |
|---|---|
| Table Preset | A named style preset (or none) |
| Frame (Border Preset) | A border-frame preset (or none) |
| Alternating Row Colors | On/Off |
| Row Hover Highlight | On/Off |
| Bordered | On/Off |
| Compact | On/Off |
| Sticky Header | On/Off |
| Caption / Caption Position | Text; Below or Above the table |
| Sorting | On/Off |
| Search / Filter | On/Off |
| Pagination | On/Off |
| Rows Per Page / Rows-Per-Page Selector | Page size + selector |
| Info Line | "Showing x–y of z" |
Capture a couple of presets and the interactive features: table-preset-1,
table-bordered, table-with-search, table-paginated.
Styling​
Text Color, Background Color, and Margin & Padding.
Content​
Content​
