Tables

Tables are the elements most loaded with information. Our aim is to make that information as readable as possible, with important metrics understandable at a glance. We use a combination of spacing, contrast and typography to visually group the elements.

1-Row Columns

base grid
 
 
 
 
 
 
 
column left
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
column center
XXXXX + 30
XXX + 34
XXXX 8
XXXXX + 34
XXXX 8
XXXXX 4
XXX + 25
links left
Link
Link
Link
Link
Link
Link
Link


Table cells are left-aligned, except those with a double metrics (text and bagde, for example) are aligned at the center. Their heading is centered as well.

 

tr {
  border-bottom:1px solid #f4f7fa; /* main bg color */
}
 
th,
td {
  padding: 0 16px;
  height: 40px;
}

Elements

+ 30
+ 34
8
+ 34
8
4
+ 25
+ 2
14
+ 4
+ 16
4



 
Example table

Sample table nameAdd a column

Page Priority All issues  
https://www.yoursite.com/
8
https://www.yoursite.com/product/
14
https://www.yoursite.com/product/pricing/
21
https://www.yoursite.com/product/features/
34
https://www.yoursite.com/blog/
2
https://www.yoursite.com/blog/guest-article
87
https://www.yoursite.com/blog/guest-article2
14
Results 1 – 9

2-Row Columns

base grid
 
 
 
 
 
 
 
column left
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
XXXXX
links left
XXXXX
Link
XXXXX
Link
XXXXX
Link
XXXXX
Link
XXXXX
Link
XXXXX
Link
XXXXX
Link


td {
  height: 72px;
}

Example table

Sample 2-row tableAdd a column

Main site heading
https://www.yoursite.com/
More descriptive site heading
https://www.yoursite.com/more-descriptive/
Even more descriptive site heading
https://www.yoursite.com/more-descriptive/even-more/
Site heading – just a brief one
https://www.yoursite.com/brief/
Another heading that’s quite long
https://www.yoursite.com/more-descriptive/even-more/worth-it-though/
Usual site heading
https://www.yoursite.com/usual/
Results 1 – 9