Vistaprint
styleKeystable

Table

Tables organize data into columns and rows to make information easier to scan.

Playground

My table caption

QtyPriceDetails
1$X.XXNo cats
Share
Share
jsx
<table class="table-skin-simple">
  <caption class="text-left">
    <h3>Table caption</h3>
    <!-- use the h* tag that fits your data structure -->
  </caption>
  <thead>
    <tr>
      <th>Qty</th>
      <th>Price</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>$X.XX</td>
      <td>No cats</td>
    </tr>
  </tbody>
</table>

Table caption

For accessibility, each table needs a caption, which should be the first child of the table. Typically, this caption holds the heading that labels the table. Use the Typography component to set the heading tag, text size, and text alignment as needed.

If your table somehow does not have a visible heading that goes with it, you will need to add a caption for accessibility support, and then make it visually hidden.

jsx
<TableCaption>
  <Typography component="h2" textSize={4}>
    My table caption
  </Typography>
</TableCaption>
<table class="table-skin-simple">
  <caption class="text-left">
    <!-- without this class, the caption will be centered be default -->
    <!-- use an h* tag and text size as appropriate for your data and design -->
    <h3 class="text-size-4">Table caption</h3>
  </caption>
</table>

Header cells

Per the HTML spec, the <td> tag is for regular cells, and <th> for header cells. This includes row headers (rather than column headers); for these, you should still use <th> along with a property of scope="row".

As a convenience in React, TableCell will intelligently render a <th> vs a <td> depending on whether it's rendered inside of a TableHead vs a TableBody. It can take the scope prop.

Cell alignment

Cells may have a default alignment (left, center, or right), depending on which Table skin you're using. You can override this alignment for a given cell.

My table caption

Default headerHeader aligned leftDefault header
Default valueDefault valueDefault value
Cell aligned leftCell aligned rightCell aligned center
Share
Share
jsx

Cells with two lines

Cells can contain two lines, if they need secondary information. The "second line" sub-component will place that second line below the first, shrinking the font as it does so.

My table caption

QtyRegular Unit costLarge Unit cost
1$X.XX $X.XX$X.XX $X.XX
2$X.XX $X.XX$X.XX $X.XX
3$X.XX $X.XX$X.XX $X.XX
Share
Share
jsx
...
<th>
  Small
  <span class="table-text-second-line">Unit cost</span>
</th>
...

Horizontal Scrolling

If you want the table to be able to scroll horizontally when there's not enough room, you can wrap the whole thing in a "table scroll container".

jsx
<TableScrollContainer>
  <Table>// etc</Table>
</TableScrollContainer>
<div class="table-scroll-container">
  <table class="table-skin-simple">
    <!-- etc -->
  </table>
</div>

Skin

"Comparison" skin

This table is use to compare different product variations, and provide details about them.

Style
Tri-fold
Ideal for larger menus and displaying additional information like images.
Long
Ideal for smaller menus, food trucks, and restaurants with a more limited selection.
SizeA standard 8.5" x 11" sheet folded three times, offering six separate panels.A flat sheet of 3.6" x 8.5" paper. Double-sided, full-color printing available.
Paper stockStandard glossy, Premium glossyStandard glossy, Premium matte, Premium recycled
jsx
<Table skin="comparison">
  <TableHead>
    <TableRow>
      <TableCell component="th" scope="row">
        //etc
      </TableCell>
    </TableRow>
  </TableHead>
</Table>
<table class="table-skin-comparison">
  <thead>
    <tr>
      <th scope="row">
        <!-- etc -->
      </th>
    </tr>
  </thead>
</table>

"Dividers" skin

The "dividers" skin puts horizontal dividers between the rows.

My table caption

QtyPriceDetails
1$X.XXNo rats
2$X.XXNo bats
3$X.XXNo hats
Share
Share
jsx

Components

Table

PropTypeDefaultDescription
skin"simple" | "comparison" | "dividers"simple

The skin to apply to the table

All other props are forwarded to the element specified in thecomponentprop(default: <table/>)

TableHead

TableHead has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <thead/>)

TableBody

TableBody has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <tbody/>)

TableRow

TableRow has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <tr/>)

TableCell

PropTypeDefaultDescription
textAlign"left" | "center" | "right" | "standard""standard"

The alignment of the text

All other props are forwarded to the element specified in thecomponentprop(default: <div/>)

TableScrollContainer

TableScrollContainer has no props of its own

All props are forwarded to the element specified in thecomponentprop(default: <div/>)

Guidelines

Designer Guidelines

  • Tables do not display well on phones. Limit the number of columns.

Developer Guidelines

  • A table should only be used for tabular display of data, such as a pricing table. It should not be used to lay out page content into rows and columns; use the layout grid for that.

Accessibility Guidelines

  • A table should only be used for tabular display of data, such as a pricing table. It should not be used for page layout!

  • The table's title (e.g. a heading tag) should be inside a TableCaption that sits as the first child of the table. Use whatever heading tag is appropriate for the page structure.

  • If a table header (<th> tag) is a row header rather than a column header, be sure to include scope="row". If your table has both row and column headers, the column headers will need scope="col".

SEO Considerations

  • Each major table should intregrate structured data, to let Google understand what the table is about. Use this JSON Script as a model. (Contact the Organic Search team with any questions.)

markup
<script type="application/ld+json">
  {
    "@context": "http://schema.org",
    "@type": "Table",
    "about": "List of Square Business Card Prices by quantity"
  }
</script>