How to format tables in Drupal content
This kba is part of the series: How to format Drupal content
How do I format tables in Drupal content?
Tables should be structured like this:
<table> <tbody> <tr> <th valign="top">Heading One</th> <th valign="top">Heading Two</th> <th valign="top">Heading Three</th> </tr> <tr> <td valign="top">Data One-One</td> <td valign="top">Data One-Two</td> <td valign="top">Data One-Three</td> </tr> <tr> <td valign="top">Data Two-One</td> <td valign="top">Data Two-Two</td> <td valign="top">Data Two-Three</td> </tr> </tbody> </table>
Which results in:
| Heading One | Heading Two | Heading Three |
|---|---|---|
| Data One-One | Data One-Two | Data One-Three |
| Data Two-One | Data Two-Two | Data Two-Three |
If they are structured in this manner, you can easily get nicely formatted borders, shading, font, and spacing by adding the body-table class to the table tag like so:
<table class="body-table">
Which results in:
| Heading One | Heading Two | Heading Three |
|---|---|---|
| Data One-One | Data One-Two | Data One-Three |
| Data Two-One | Data Two-Two | Data Two-Three |
Here's another form of table that is structured the same way. To get the shading on the first column, add a table-label class to the first td of each row.
<table class="body-table"> <tbody> <tr> <th valign="top" class="table-label"> </th> <th valign="top">Heading One</th> <th valign="top">Heading Two</th> <th valign="top">Heading Three</th> </tr> <tr> <td valign="top" class="table-label">Label One</td> <td valign="top">Data One-One</td> <td valign="top">Data One-Two</td> <td valign="top">Data One-Three</td> </tr> <tr> <td valign="top" class="table-label">Label Two</td> <td valign="top">Data Two-One</td> <td valign="top">Data Two-Two</td> <td valign="top">Data Two-Three</td> </tr> </tbody> </table>
Which results in this example:
| Heading One | Heading Two | Heading Three | |
|---|---|---|---|
| Label One | Data One-One | Data One-Two | Data One-Three |
| Label Two | Data Two-One | Data Two-Two | Data Two-Three |
For things like:
| Developer | Standard | Enterprise | |
|---|---|---|---|
| Annual Subscription | $5,000 | $15,000 | $35,000 |
| Support Availability | 9am-5pm (MST) Mon-Fri | 6am-6pm (MST) Mon-Fri | 24 x 7 |
| High Priority Response Time | N/A | 1 hour | 1 hour |
| Medium Priority Response Time | N/A | 4 hours | 4 hours |
| Low Priority Response Time | Next Business Day | Next Business Day | Next Business Day |
| Included Annual Support | 10 hours | 30 hours | 100 hours |
| Additional Support Rate | $100 per hour | $100 per hour | $100 per hour |
| Accelerated Development Rate | $100 per hour | $100 per hour | $100 per hour |
| Named Support Contact | 1 | 3 | 6 |
| Development Priority Votes | 1 | 3 | 6 |
| Web Support Access | Yes | Yes | Yes |
| Phone Support Access | No | Yes | Yes |
