Table

TwoColTableDynamic element with cell-level styling for presenting structured information in rows and columns.

Live Preview

Product	Price	Qty	Total
Manjish Glow Elixir Face Oil	$49.00	2	$98.00
Manjish Glow Elixir	$65.00	1	$65.00
Balaayah Black Gram Oil	$55.00	1	$55.00
Subtotal			$218.00

Code

1<table class="table">
2  <thead>
3    <tr>
4      <th>Product</th>
5      <th>Price</th>
6      <th>Quantity</th>
7    </tr>
8  </thead>
9  <tbody>
10    <tr>
11      <td>Manjish Glow Elixir Face Oil</td>
12      <td>$49.00</td>
13      <td>2</td>
14    </tr>
15    <tr>
16      <td>Manjish Glow Elixir</td>
17      <td>$65.00</td>
18      <td>1</td>
19    </tr>
20  </tbody>
21  <tfoot>
22    <tr>
23      <td colspan="2">Total</td>
24      <td>$163.00</td>
25    </tr>
26  </tfoot>
27</table>
28
29<!-- Striped variant -->
30<table class="table table--striped">
31  ...
32</table>
33
34<!-- Bordered variant -->
35<table class="table table--bordered">
36  ...
37</table>

Brand Properties

Table Properties

Property	Type	Brand Default	HoB Value	TAE Value
Columns	Management section	2 columns	2 columns	2 columns
Rows	Management section	3 rows	3 rows	3 rows
Text Alignment	4 options	left	left	left
Line Height	Slider	Auto	Auto	Auto
Letter Spacing	Slider	0 px	0 px	0 px
Text Case	2 options	none	none	none
Margins	Input (px)	0	0	0
Corner Radius	Input (px)	0	0	0
Background	Dropdown	Color	Color	Color
Opacity	Slider	100%	100%	100%
Shadow	Toggle	Off	Off	Off
Table border Style	Dropdown	solid	solid	solid
Table border Color	Color picker (hex)	#000000	#038012	#1A5129
Table border Width	Input (px)	1	1	1

Cell Properties (Row X, Col Y)

Property	Type	Brand Default	HoB Value	TAE Value
Font	Dropdown	Open Sans	Open Sans	Open Sans
Weight	Dropdown	normal	normal	normal
Size	Dropdown	14px	14px	14px
Text Alignment	4 options	left	left	left
Line Height	Slider	Auto	Auto	Auto
Letter Spacing	Slider	0 px	0 px	0 px
Text Case	2 options	none	none	none
Padding	Input (px)	8	8	8
Background	Dropdown	Color	Color	Color

Variants

Default Table

Feature	Basic	Pro
Storage	5 GB	100 GB
Users	1	Unlimited

Striped Table

Item	Amount
Item One	$10.00
Item Two	$20.00
Item Three	$30.00
Item Four	$40.00

Bordered Table

Name	Email	Role
John Doe	john@example.com	Admin
Jane Smith	jane@example.com	User

Comparison Table

Feature	House of Brands	Others
100% Natural	Yes	No
Ayurvedic Formulation	Yes	No
Cruelty Free	Yes	-

Responsive Tables

For tables that don't fit on mobile screens, wrap them in a scrollable container or use a responsive pattern that transforms the layout on smaller screens.

Horizontal Scroll

Column 1	Column 2	Column 3	Column 4	Column 5
Data A1	Data B1	Data C1	Data D1	Data E1

Scroll horizontally on mobile

Accessibility

Use <th> elements for header cells with scope attribute
Include a <caption> for table descriptions
Use <thead>, <tbody>, and <tfoot> for structure
Ensure sufficient color contrast for text and borders
Consider mobile users - provide horizontal scroll or responsive layout
Avoid using tables for layout purposes

Do's and Don'ts

Do

Use tables for actual tabular data
Include clear column headers
Align numbers to the right for easy comparison
Use zebra striping for long tables
Provide horizontal scroll on mobile

Don't

Use tables for page layout
Create tables with too many columns
Omit header cells for data tables
Use inconsistent alignment within columns
Merge cells excessively

Unmapped Brand Values

The following brand-specific values are not directly mapped to CRAFT Table properties but may influence table styling decisions:

Brand Token	HoB	TAE	Usage Notes
Primary Color	`#038012`	`#1A5129`	Can be used for table border color, header accents
Body Font	Open Sans	Open Sans	Matches CRAFT default font for cells
Text Color	`#038012`	`#101010`	Can be applied to cell text for brand consistency

Related Elements

List - For non-tabular sequential items
Table Components - Pre-built table layouts