Tables

Tables are useful for presenting complex information, such as numerical data, comparisons or schedules in a way that is easy to read and understand.

See and interact with the Tables component block demo on this page.

Component demo

Table with first row as header

Created with 4 rows and 3 columns, first row as headings.

Header 1Header 2Header 3
Row 1, Column 1Row 1, Column 2Row 1, Column 3
Row 2, Column 1Row 2, Column 2Row 2, Column 3
Row 3, Column 1Row 3, Column 2Row 3, Column 3

Striped table with first row as the header

Created with 6 rows and 2 columns, first row as header with striped selected. 

Header 1Header 2
Row 2, Column 1Row 2, Column 2
Row 3, Column 1Row 3, Column 2
Row 4, Column 1Row 4, Column 2
Row 5, Column 1Row 5, Column 2
Row 6, Column 1Row 6, Column 2

Striped table with no header

Created with 6 rows and 2 columns, with no header with striped selected. 

Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2
Row 3, Column 1Row 3, Column 2
Row 4, Column 1Row 3, Column 2
Row 5, Column 1Row 3, Column 2
Row 6, Column 1Row 3, Column 2

 

Table with border

Created with 4 rows, first row as headers and 2 columns, with a border. Bordered tables should only be used if there's lots of complicated information. 

Header 1Header 2
Row 1, Column 2Row 1, Column 3
Row 2, Column 2Row 2, Column 3
Row 3, Column 2Row 3, Column 3

Table with border and striped

Created with 4 rows, first row as headers and 2 columns, with a border and striped. Bordered tables should only be used if there's lots of complicated information. 

Header 1Header 2
Row 1, Column 2Row 1, Column 3
Row 2, Column 2Row 2, Column 3
Row 3, Column 2Row 3, Column 3

 

Wide tables in the three quarters / quarter - large gutter container

Wide tables display best in full width containers and don't display well in smaller containers.

The Full width box and the Stacked box have been unticked in these tables.

You need to look at the mobile view of tables to see significant differences between wide and stacked containers. 

When the data entered is short words or numbers it may be able to wrap within the cells.

Caption at the top of the table
Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8Header 9Header 10
Row 2, Column 1Row 2, Column 2Row 2, Column 3Row 2, Column 4Row 2, Column 5Row 2, Column 6Row 2, Column 7Row 2, Column 8Row 2, Column 9Row 2, Column 10
Row 3, Column 1Row 3, Column 2Row 3, Column 3Row 3, Column 4Row 3, Column 5Row 3, Column 6Row 3, Column 7Row 3, Column 8Row 3, Column 9Row 3, Column 10

 

When the data is longer, such as column1heading, it can't wrap and will extend across the page, causing display issues. 

column1heading column2heading column3headingcolumn4heading column5heading column6headingcolumn7headingcolumn8headingcolumn9headingcolumn10heading
column1valuecolumn2valuecolumn3valuecolumn4valuecolumn5valuecolumn6valuecolumn7valuecolumn8valuecolumn9valuecolumn10value
column1valuecolumn2valuecolumn3valuecolumn4valuecolumn5valuecolumn6valuecolumn7valuecolumn8valuecolumn9valuecolumn10value

Wide tables in a full width container

Full width containers are only available on landing pages – not standard pages and are recommended for wide tables.

The Full width box has been ticked and the Stacked box has been unticked in both these tables.

Caption added
Header 1Header 2Header 3Header 4Header 5Header 6Header 7Header 8Header 9Header 10
Row 2, Column 1Row 2, Column 2Row 2, Column 3Row 2, Column 4Row 2, Column 5Row 2, Column 6Row 2, Column 7Row 2, Column 8Row 2, Column 9Row 2, Column 10
Row 3, Column 1Row 3, Column 2Row 3, Column 3Row 3, Column 4Row 3, Column 5Row 3, Column 6Row 3, Column 7Row 3, Column 8Row 3, Column 9Row 3, Column 10

 

column1heading column2heading column3headingcolumn4heading column5heading column6headingcolumn7headingcolumn8headingcolumn9headingcolumn10heading
column1valuecolumn2valuecolumn3valuecolumn4valuecolumn5valuecolumn6valuecolumn7valuecolumn8valuecolumn9valuecolumn10value
column1valuecolumn2valuecolumn3valuecolumn4valuecolumn5valuecolumn6valuecolumn7valuecolumn8valuecolumn9valuecolumn10value

Guidance

See the Help Hub guide for detailed instructions on how and when to use this component.

Top of page