Table Format and Styles

Do	Don't
Use header cells and not bold text <th>	bold header cell text. This is styled by the <th> tag include any styling or attributes in table cells or rows

Table options

Default: is all options selected.

• white – ensures that all rows are white and thus removes the alternating row colour.
• grid – places grid-lines
• full – makes the table span full width
• row-hover – highlights the row colour on hover

white grid full row-hover

Table with header cells in rows

Make sure to use headers in rows (in the following example it's months) have the appropriate attribute added to the <th> tags, for example (show me where row headers with scope are used on this page):

<th scope="row">January</th> 

Payment month	Date on your cheque	Date cheques are mailed	Date funds are deposited to your bank
January	December 30	December 16	December 30
February	January 31	January 26	January 31
March	February 28	February 23	February 28

Table with rowspan

We can see that we will have to use some options to correct the appearance of the issue created by the rowspan; the alternating row colours mismatch. Therefore, there will be cases when we will not be using alternating row colours. This can be corrected with additional CSS selectors.

If implementing a table that contains rowspans, use the additional "grid" selector in the. Also recommend adding the "white" selector because the row colours would not match and may not look ideal. DO NOT use the row-hover selector if your table contains row spans.

Bad

	Column 1	Column 2	Column 3
Row 1	Lorem ipsum dolor sit	Lorem ipsum dolor sit	Lorem ipsum dolor sit
Row 3 Another Line	Lorem ipsum dolor sit	Lorem ipsum dolor sit	Lorem ipsum dolor sit
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row3	Fusce aliquet condimentum gravida.

Use the following in these scenarios (and see resulting table):

<table class="charttable white grid">
  

Good

	Column 1	Column 2	Column 3
Row 1	Lorem ipsum dolor sit	Lorem ipsum dolor sit	Lorem ipsum dolor sit
Row 3 Another Line	Lorem ipsum dolor sit	Lorem ipsum dolor sit	Lorem ipsum dolor sit
	Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Row3	Fusce aliquet condimentum gravida.

Tables on mobile devices

Most tables are too wide to render properly on smaller devices. Our quick solution is two wrap the table in a container that is 100% device width and horizonatlly scrollable, table will have minimum withs therein.

• Scrollbar will not be visible on touch devices.
• Widest will shoew scrollbar on desktop due to its width.
• Scroll message only appears it activates

If the table can compress comfortably within a width of 375px, no tratment is needed, otherwise:

Average: Table has a minimum width of 750px:

<div class="mobiletable">
  --your table code here-—
</div>

Wide: Table has a minimum width of 925px:

<div class="mobiletable wide">
  --your table code here-—
</div>

Widest: Table has a minimum width of 1280px:

<div class="mobiletable widest">
  --your table code here-—
</div>

Unlimited: Table width is it's content width:

<div class="mobiletable unlimited">
  --your table code here-—
</div>

Samples Compress browser to experience

Small table

Does not need any treatment if it compresses wwell into 375px

Narrow table	Date cheques are mailed
December 30	December 16
January 31	January 26
February 28	February 23
March 31	March 27
April 28	April 25
May 31	May 26

Mid-width table

Wide table

Wider table

This (and the next option) will be available on desktop due to the nature of the content.

No limit table

The table width is the width of its content. Use for very wide tables.