title | name | category |
---|---|---|
Tables |
Tables |
Tables |
Tables are integral. Tables are good. Tables need love too.
- Never use tables for anything other than tabular data. If you need something to look like a table, use
display: table;
(and it's related display attributes). - To get default styling, all classes should get
class="table"
. We style the class and not the DOM attribute to keep the specificity low. - While it is true that
<thead>
,<tbody>
, and<tfoot>
are optional, they give you an extra set of hooks to get at your content for styling purposes. As such, Particles assumes you will be entering a<thead>
and<tbody>
.
<table class="table">
<thead class="table-head">
<tr class="table-row">
<th>...</th>
...
</tr>
</thead>
<tfoot class="table-foot">
<tr class="table-row">
<th>...</th>
...
</tr>
</tfoot>
<tbody class="table-body">
<tr class="table-row">
<td>...</td>
...
</tr>
</tbody>
</table>
The sample markup listed above is a representation of how each of the following tables should be structured.
<table class="table"...</table>
- this is the default table styling - no frills, no extra love.<table class="table table-data">...</table>
(data tables)<table class="table table-forum">...</table>
(for the forum style layout on /support)
.table-striped
-- zebras! This will use the:nth-child()
selector as well as.odd
/.even
classes (for those projects that still need to support IE8). New projects are encouraged to use the:nth-child()
approach..table-compact
-- a more compact version of the table. this is largely comeplete intable-data
, but it should/could be extracted to be more generic so it can be used without the style overhead ofdata-table
.
<table class="table table-data">
...
</table>
<table class="table table-forum">
...
</table>
Looks good Eric. What other thing besides tabular data would we use a table for?