Tables

For the most part, no special class names are needed to make tables display. Simply use proper HTML table markup.

A sample table
Column header	Sortable column header	Column header	Column header
Row header	table cell	table cell	table cell
Row header	table cell	table cell	table cell
Row header	table cell	table cell	table cell
Row header	table cell	table cell	table cell
Row header	table cell	table cell	table cell
Footer row	table cell	table cell	table cell

html : A table

<table>
  <caption>A sample table</caption>
  <thead>
    <tr>
      <th scope="col">Column header</th>
      <th scope="col" role="button" tabindex="0">
        <div className="flex">
          <Icon className="mr-2" name="arrow_down" className="w-5 h-5" />
          Sortable column header
        </div>
      </th>
      <th scope="col">Column header</th>
      <th scope="col">Column header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row header</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    ...
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Footer row</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tfoot>
</table>

Widths & layout

TailwindCSS has existing utility classes that can be used to manipulate the display of a table.

Expanded column	Right aligned	Column header
Row header	123.45	table cell
Row header	1234.56	table cell

html : A table with customized layout

<table>
  <thead>
    <tr>
      <th scope="col" className="w-2/3">Expanded column</th>
      <th scope="col" className="text-right w-1/6">Right aligned</th>
      <th scope="col" className="w-1/6">Column header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row header</th>
      <td className="text-right">123.45</td>
      <td>table cell</td>
    </tr>
    ...
  </tbody>
</table>

Headers & Footers

All tables should have one and only one thead element. The children of this should be th cells, which must contain values. In the case where you might need a blank cell in the header (such as the top-left cell in a 2-dimensional table), use an empty td.

Tables may also optionally contain one and only one tfoot element.

Bodies

All other table rows should be contained in one or more tbody elements. While it is acceptible to leave it out, its a good idea to include it.

Scoping

All th elements are implicitly scoped to their column, but it is a better idea to use the scope attribute explicitly, to define whether a heading is scoped to a column, row, column-group.

You can do some nifty grouping with the scope,colspan and rowspan attributes, as well as the little-known colgroup and col elements.

Column header	Column group header		Column header
Row header	table cell	table cell	table cell
Row group header	table cell	table cell	table cell
Row group header	table cell	table cell	table cell

html : A table with fancy scoping

<table>
  <colgroup>
    <col/>
    <col span="2" className="bg-emphatic-100"/>
    <col/>
  </colgroup>
  <thead>
    <tr>
      <th scope="col">Column header</th>
      <th scope="col" colspan="2">Column group header</th>
      <th scope="col">Column header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Row header</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <th scope="rowgroup" rowspan="2">Row group header</th>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
    <tr>
      <td>table cell</td>
      <td>table cell</td>
      <td>table cell</td>
    </tr>
  </tbody>
</table>

Accessibility concerns

HTML tables have very specific markup rules. While many browser will make efforts to correct your poorly constructed tables, you'll get more predictable results if you build them right in the first place.