📖 Creating HTML Tables

Tables are a good way to organize tabular data on a page. Things like menus, budgets and schedules. just about anything that would look right in a spreadsheet will work in a table. Tables are made up of small boxes called cells. These cells are organized into like-sized columns and rows and have specific HTML code to produce them.

HTML tags

  • <table> </table> indicate the beginning and end of a table
  • <caption> </caption> displays the caption text above the table
  • <tr> </tr> designates the beginning and end of a row in a table
  • <th> </th> designates the beginning and end of a header cell (bold text, centered)
  • <td> </td> designates the beginning and end of a cell
Table example code

colspan & rowspan attributes
  • placed in a <td> or <th> tag
  • colspan="x" specifies that x cells in the table row are to be merged
  • rowspan="x" specifies that x cells in the table column are to be merged

NOTE: Use of colspan and rowspan are discouraged as they create difficulty with screen readers and reduce accessibility. You should avoid their use if possible.

Table span example

Table Notes

  • empty table cells should contain a non-breaking space (&nbsp;) or they will not display correctly
  • table cells may contain text or graphics or even a nested tables

Table Accessibility

  • abbr: used in <th> tag - abbreviated version of the header to be read aloud by a screen reader
  • scope: used in <th> tag - associates a table header with the row, column. rowgroup or colgroup in which it appears.
  • headers: used in <td> tag - ties it to the id attribute of a <td> element

These do not change the appearance of the table - useful for screen readers.

Accessible table example

Styling Tables

  • padding: value; - adds space between cell content and cell border in a table
  • border-collapse: collapse; - removes space (cell-spacing) between cells in a table
  • border-spacing: horizontal vertical; - allows you to specify the amount of space between cells in a table. The horizontal and vertical attributes are specified in units of measure such as px or em.
  • empty-cells: hide; - does not display the background or border of an empty table cell.

You can find information about table coding and more examples of table styling at W3 Schools.