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;
}
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 name
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;
}
height: 72px;
}
Example table
Sample 2-row table
| 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/ |