-
Social media
- xxxxxxxxxx
- xxxxxx
- xxxxxxxxx
- xxxxxx
- xxxxxxxxx
Tables
✓ Do | + Don't |
---|---|
|
|
Table options
By default implement with "grid" and row-hover" selectors:
- 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
Demo
Use the buttons to apply or remove the selectors on the demo table:
Demo table tag
<table class="charttable grid row-hover">
Date on your cheque | Date cheques are mailed | Date funds are deposited to your bank |
---|---|---|
December 30 | December 16 | December 30 |
January 31 | January 26 | January 31 |
February 28 | February 23 | February 28 |
March 31 | March 27 | March 31 |
April 28 | April 25 | April 28 |
May 31 | May 26 | May 31 |
Table with header cells in rows
Make sure to use cope when having headers in rows (in the following example it's months). The appropriate scope attributes added to the row headings. Show me):
<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:
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 has a minimum width of 750px
<div class="mobiletable"> --your table code here-— </div>
Mid-width table | Date cheques are mailed | Date funds are deposited to your bank |
---|---|---|
December 30 | December 16 | December 30 |
January 31 | January 26 | January 31 |
February 28 | February 23 | February 28 |
March 31 | March 27 | March 31 |
April 28 | April 25 | April 28 |
May 31 | May 26 | May 31 |
Widest: table has a minimum width of 925px
<div class="mobiletable wide"> --your table code here-— </div>
Wide table | Date cheques are mailed | Date funds are deposited to your bank | Some column |
---|---|---|---|
December 30 | December 16 | December 30 | Alfreds Futterkiste |
January 31 | January 26 | January 31 | Centro comercial Moctezuma |
February 28 | February 23 | February 28 | Ernst Handel |
March 31 | March 27 | March 31 | Island Trading |
April 28 | April 25 | April 28 | Laughing Bacchus Winecellars |
May 31 | May 26 | May 31 | Magazzini Alimentari Riuniti |
Wider: table has a minimum width of 1280px
This (and the next option) will be available on desktop due to the nature of the content.
<div class="mobiletable widest"> --your table code here-— </div>
Widest table | Date cheques are mailed | Date funds are deposited to your bank | Some column | Another column | Last column |
---|---|---|---|---|---|
December 30 | December 16 | December 30 | Alfreds Futterkiste | Maria Anders | Germany |
January 31 | January 26 | January 31 | Centro comercial Moctezuma | Francisco Chang | Mexico |
February 28 | February 23 | February 28 | Ernst Handel | Roland Mendel | Austria |
March 31 | March 27 | March 31 | Island Trading | Helen Bennett | UK |
April 28 | April 25 | April 28 | Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada |
May 31 | May 26 | May 31 | Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy |
Unlimited: table width is it's content width:
<div class="mobiletable unlimited"> --your table code here-— </div>
No limit | Date cheques are mailed | Date funds are deposited to your bank | Some column | Another column | Last column | Tag | Description | Month | Savings |
---|---|---|---|---|---|---|---|---|---|
December 30 | December 16 | December 30 | Alfreds Futterkiste | Maria Anders | Germany | <table> | Defines a table | January | $100 |
January 31 | January 26 | January 31 | Centro comercial Moctezuma | Francisco Chang | Mexico | <th> | Defines a header cell in a table | February | $50 |
February 28 | February 23 | February 28 | Ernst Handel | Roland Mendel | Austria | <tr> | Defines a row in a table | March | $100 |
March 31 | March 27 | March 31 | Island Trading | Helen Bennett | UK | <td> | Defines a cell in a table | April | $100 |
April 28 | April 25 | April 28 | Laughing Bacchus Winecellars | Yoshi Tannamuri | Canada | <caption> | Defines a table caption | May | $50 |
May 31 | May 26 | May 31 | Magazzini Alimentari Riuniti | Giovanni Rovelli | Italy | <colgroup> | Specifies a group of one or more columns in | June | $100 |