A standardized design for tables powered by a simple tabular data structure, with several styling options. This is the default style, which includes a styled index column.
Row 0 | Row 0 column 1 | Row 0 column 2 |
Row 1 | Row 1 column 1 | Row 1 column 2 |
You can add a header with a color, remove the index styling, and turn the top and bottom borders off, which usually looks more elegant unless the borders are especially helpful for dividing content, e.g. in an article.
Header | ||
Row 0 | Row 0 column 1 | Row 0 column 2 |
Row 1 | Row 1 column 1 | Row 1 column 2 |
Some Table
properties use arrays to configure grid system columns, others to configure table
columns and rows, and some to configure both. Here's a brief explanation of how each property pertains to column definition:
columns
: how many grid columns the Table
spans across four screen breakpointsstart
: grid column from which each Table
column begins; nested arrays can be used to vary start
across breakpointswidth
: number of grid columns each Table
column occupies; nested arrays can be used to vary width
across breakpointsdata
: a representation of the tabular data where each array corresponds to a row with elements each corresponding to a td
in that row