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:
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>
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.
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
- Use tables thoughtfully and only for tabular data (think ‘spreadsheet’)
- Include a table header
- Add the table-responsive class to the widget class field
- Use tables for design and layout
- Forget to add the table header
- Forget to add the table-responsive class
Responsive tables (Bootstrap)