HTML tables

Posted on February 24, 2022

HTML table icon

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:

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:

Screenshot of visual editor with red arrow pointing to table tool.

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%;">



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

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

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



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

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

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



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

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

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




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.

Screenshot of table HTML code in the text editor.

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).

Screenshot of class attribute

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)

Close window