tables.md

title	Tables
name	Tables
category	Tables

Tables are integral. Tables are good. Tables need love too.

Rules for Tables

1. 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).
2. To get default styling, all classes should get class="table". We style the class and not the DOM attribute to keep the specificity low.
3. 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>

Types of Tables

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)

TODO list

• .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 in table-data, but it should/could be extracted to be more generic so it can be used without the style overhead of data-table.

Examples

<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?