This site works best with JavaScript enabled for interactive features like accordions, reveals, and navigation enhancements.

Tables

A table is the orderly arrangement of a set of data, especially in columns.

Use tables to organize data in columns, rows, or both columns and rows.

Default Tables

Tables organize information into a visually structured format.

Table 1: Table heading...

Table 1: Table title text...
Heading 1 Heading 2 Heading 3
Cell 1 ...  
Cell A ...  
Cell X ...  

Table caption text...

BCIT © 2025
<figure class="table">
<h2>Table 1: Table heading...</h2>
<table>
<caption>Table 1: Table title text...</caption>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>...</td>
<td> </td>
</tr>
<tr>
<td>Cell A</td>
<td>...</td>
<td> </td>
</tr>
<tr>
<td>Cell X</td>
<td>...</td>
<td> </td>
</tr>
</tbody>
</table>
<figcaption>
<p>Table caption text...</p>
<footer>
<small class="license">BCIT © 2025</small>
</footer>
</figcaption>
</figure>

#table

Table 1: Table heading...

Table 1: Table title text...
Heading 1 Heading 2 Heading 3
Cell 1 ...  
Cell A ...  
Cell X ...  

Table caption text...

License: BCIT © 2025

/table

Use Word to create tables. Bolded text in the first row or column will be considered a row or column heading.

Any text below the table, between #table and /table, is considered caption text.

Try to ensure your table content has no formatting other than bold text to indicate a column or row heading.

Developer notes

Styles

You can modify the appearance of tables by adding the following HTML classes to the table tag:

  • compact: for text-heavy tables, add this to reduce the font-size and cell padding
  • striped: adds horizontal stripes to make wide tables easier to read
  • unstriped: prevents larger tables from automatically becoming striped
  • minimal: simplified appearance
  • borderless: removes inside borders between cells
  • unstyled: removes most of the CSS rules from a table to make it easier to style with custom CSS.

Alignment

Text alignment is centered by default. Paragraphs, lists, and headings are left aligned. You can manually adjust the text alignment with the following classes:

  • Horizontal: left, right, center, or centre
  • Vertical: top, bottom, middle

The above classes can be applied to the table, thead, tbody, tr, th, or td tags. All decendants will inherit that alignment, but you can overide it at any level by applying a different class.

For rows, you can add an alignment class (typically vertical) to the tr tag.

For columns, adding a horizontal alignment class to any cell in the first row will change the alignment for the entire column. This will only work on simple tables (Eg. no colspan or rowspan attributes).

Sizing

Adjusting the size of a table can be useful from time to time. For example, a blank form intended to be filled in with content. Here's how you can do it:

Table Width

Changing the size of the table itself can be done by adding one of the following classes to the figure tag:

  • small
  • smaller
  • smallest
  • large
  • larger
  • largest
Column Width

Controlling the widths of columns can be done by adding a class to the first cell in that column indicating the width as a percentage that it should occupy. For example: class="width33" would create a column 33% wide.

Row Height

Controlling the height of rows can be done similar to the widths, except you must provide a pixel amount. For example class="height200" would create a row that is 200px tall. These work in increments of 25 and any number in between will be rounded up to the nearest 25px