Table

Use tables to present large amounts of data, and data which has multiple properties attached to it.

Table of contents

• How to use Table
• Code examples
• Content recommendations

How to use Table

• Make sure Tables span the full width of the container they're in
• Make sure a table has a header describing the content of its respective columns
• Ordered columns by relevance from left to right. Images, if present, have a higher priority, and should be placed in the first column. Checkboxes naturally have the highest priority.

Code examples

<Table>
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell>Email</TableCell>
      <TableCell>Organization role</TableCell>
      <TableCell>Last activity</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Claus Mitchell</TableCell>
      <TableCell>claus.mitchell@contentful.com</TableCell>
      <TableCell>CEO</TableCell>
      <TableCell>August 29, 2018</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Johannes Ramos</TableCell>
      <TableCell>johannes.ramos@contentful.com</TableCell>
      <TableCell>CTO</TableCell>
      <TableCell>July 27, 2019</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Alex Kalinoski</TableCell>
      <TableCell>alex.kalinoski@contentful.com</TableCell>
      <TableCell>CDO</TableCell>
      <TableCell>June 13, 2019</TableCell>
    </TableRow>
  </TableBody>
</Table>
<Table>
  <TableHead>
    <TableRow>
      <TableCell>Name</TableCell>
      <TableCell>Email</TableCell>
      <TableCell>Organization role</TableCell>
      <TableCell>Last activity</TableCell>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableCell>Claus Mitchell</TableCell>
      <TableCell>claus.mitchell@contentful.com</TableCell>
      <TableCell>CEO</TableCell>
      <TableCell>August 29, 2018</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Johannes Ramos</TableCell>
      <TableCell>johannes.ramos@contentful.com</TableCell>
      <TableCell>CTO</TableCell>
      <TableCell>July 27, 2019</TableCell>
    </TableRow>
    <TableRow>
      <TableCell>Alex Kalinoski</TableCell>
      <TableCell>alex.kalinoski@contentful.com</TableCell>
      <TableCell>CDO</TableCell>
      <TableCell>June 13, 2019</TableCell>
    </TableRow>
  </TableBody>
</Table>
Hide source

Content recommendations

• Keep headers short
• Headers should be informative and descriptive
• Content in the table should be concise and scannable