HTML tables

An HTML table is a structured set of tabular data (rows and columns) displayed on a web page. Similar to spreadsheets, tables allow you to display values that indicate a connection between different types of data.

Sample HTML table:

It’s important to note that tables should be used sparingly and for tabular data only. We recommend using structured content (headings, lists, etc.) to display information whenever possible. This better guarantees accessibility and readability. If you really need to use a table, it’s important to understand some of the nuances to make them accessible and adaptable.

ProudCity and HTML tables

The visual editor in the ProudCity CMS ‘Text’ widget lets you easily create tables:

Table HTML

We encourage you to have a basic understanding of HTML tables if you are using them on your website as there are accessibility and responsive issues to take note of and address.

If you are working with tables, it’s important to understand a little about simple table HTML:

• <table> (main table wrapper)
• <tr> (table row)
• <th> (table head)
• <td> (table column)

Sample table HTML:

<table class="table" style="border-collapse: collapse; width: 100%;">

<tbody>

<tr>

<th style="width: 33.3333%;">Company</th>

<th style="width: 33.3333%;">Contact</th>

<th style="width: 33.3333%;">Website</th>

</tr>

<tr>

<td style="width: 33.3333%;">ProudCity</td>

<td style="width: 33.3333%;">Kevin</td>

<td style="width: 33.3333%;">proudcity.com</td>

</tr>

<tr>

<td style="width: 33.3333%;">Department of Civic Things</td>

<td style="width: 33.3333%;">Rebecca</td>

<td style="width: 33.3333%;">deptofcivicthings.com</td>

</tr>

</tbody>

</table>

Accessible tables

There are a number of ways to make tables more accessible, but the key HTML code you want to include is the table head <th> tag. You will need to add this using the text editor in the ‘Text’ widget.

Responsive tables

Tables are not automatically responsive, so you will need to add the ‘table-responsive’ class in the widget CSS field of the ‘Text’ widget. This will make them adaptable to different devices (phone, tablet, computer).

Do’s and don’ts

Do

• Use tables thoughtfully and only for tabular data (think ‘spreadsheet’)
• Include a table header
• Add the table-responsive class to the widget class field

Don’t

• Use tables for design and layout
• Forget to add the table header
• Forget to add the table-responsive class

Resources

• HTML table basics (Mozilla)
• Tables (Bootstrap)

Responsive tables (Bootstrap)