Data Tables

Data tables organize structured data in a two-dimensional structure of a row’s properties associated with columnar properties or interactions.

Header Cell Header Cell Header Cell
Data Cell Data Cell Data Cell
<table class="comet-data-table">
    <tr>
        <th>Header Cell</th>
        <th>Header Cell</th>
        <th>Header Cell</th>
    </tr>
    <tr>
        <td>
            <a href="#">Data Cell</a>
        </td>
        <td>Data Cell</td>
        <td>Data Cell</td>
    </tr>
</table>
                
<table class="comet-data-table">
	<tr>
		<th>Header Cell</th>
		<th>Header Cell</th>
		<th>Header Cell</th>
	</tr>
	<tr>
		<td><a href="#">Data Cell</a></td>
		<td>Data Cell</td>
		<td>Data Cell</td>
	</tr>
</table>
                
Macro params reference

Guidelines

Use when a data structure includes two or more columns of data. For a single data column, use a List Group instead.

Structure

  • Display a row’s primary row (often, as a link) as the left-most data column
  • Display interactive columns (such as a checkbox for row selection) on the far left.
  • All data tables contain a heading row for a label above each named data column, although columns of interactions do not require a label.
  • Table headings <th> can be applied to table columns or rows.
  • Adding a <caption> element with a brief description can assist screenreader users understand the purpose of a table. The <caption> tag should go directly after the <table> tag. This is not required if there is descriptive text directly before or after the table.

Style