Table

Tables are used to present information in a series of rows and columns. When information is too dense or complex to be displayed in a list, using a table can make the information more digestible and navigable for the user. Tables can provide the user a lot of control over how information is presented.

The following Table components exist:

Table (table)
TableBody (tbody)
TableData (td)
TableHead (thead)
TableHeader (th)
TableRow (tr)

Examples

	Jim Wilson	Gary Flynn
Offer Price	$340,000	$337,000
Option Period	02/01 - 02/08	02/03 - 02/10
Closing Date	03/20/2018	03/17/2018
Pre-Approved
Pre-Qualified
Summary	Highest net to seller, biggest risk.	Strong overall contract.
Pros	Highest price; standard contingencies; strong financing.	Standard contingencies; quick appraisal.
Cons	Has home to sell.	None

<Table>
  <TableHead>
    <TableRow>
      <TableHeader />
      <TableHeader>Jim Wilson</TableHeader>
      <TableHeader>Gary Flynn</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableHeader>Offer Price</TableHeader>
      <TableData className="text-blue">
        <Strong>$340,000</Strong>
      </TableData>
      <TableData className="text-blue">
        <Strong>$337,000</Strong>
      </TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Option Period</TableHeader>
      <TableData>02/01 - 02/08</TableData>
      <TableData>02/03 - 02/10</TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Closing Date</TableHeader>
      <TableData>03/20/2018</TableData>
      <TableData>03/17/2018</TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Pre-Approved</TableHeader>
      <TableData>
        <Icon className="text-blue" icon="checkmark" size="small" />
      </TableData>
      <TableData>
        <Icon className="text-blue" icon="checkmark" size="small" />
      </TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Pre-Qualified</TableHeader>
      <TableData>
        <Icon className="text-blue" icon="checkmark" size="small" />
      </TableData>
      <TableData />
    </TableRow>
    <TableRow>
      <TableHeader>Summary</TableHeader>
      <TableData>Highest net to seller, biggest risk.</TableData>
      <TableData>Strong overall contract.</TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Pros</TableHeader>
      <TableData>
        Highest price; standard contingencies; strong financing.
      </TableData>
      <TableData>Standard contingencies; quick appraisal.</TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Cons</TableHeader>
      <TableData>Has home to sell.</TableData>
      <TableData>None</TableData>
    </TableRow>
  </TableBody>
</Table><Table>
  <TableHead>
    <TableRow>
      <TableHeader />
      <TableHeader>Jim Wilson</TableHeader>
      <TableHeader>Gary Flynn</TableHeader>
    </TableRow>
  </TableHead>
  <TableBody>
    <TableRow>
      <TableHeader>Offer Price</TableHeader>
      <TableData className="text-blue">
        <Strong>$340,000</Strong>
      </TableData>
      <TableData className="text-blue">
        <Strong>$337,000</Strong>
      </TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Option Period</TableHeader>
      <TableData>02/01 - 02/08</TableData>
      <TableData>02/03 - 02/10</TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Closing Date</TableHeader>
      <TableData>03/20/2018</TableData>
      <TableData>03/17/2018</TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Pre-Approved</TableHeader>
      <TableData>
        <Icon className="text-blue" icon="checkmark" size="small" />
      </TableData>
      <TableData>
        <Icon className="text-blue" icon="checkmark" size="small" />
      </TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Pre-Qualified</TableHeader>
      <TableData>
        <Icon className="text-blue" icon="checkmark" size="small" />
      </TableData>
      <TableData />
    </TableRow>
    <TableRow>
      <TableHeader>Summary</TableHeader>
      <TableData>Highest net to seller, biggest risk.</TableData>
      <TableData>Strong overall contract.</TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Pros</TableHeader>
      <TableData>
        Highest price; standard contingencies; strong financing.
      </TableData>
      <TableData>Standard contingencies; quick appraisal.</TableData>
    </TableRow>
    <TableRow>
      <TableHeader>Cons</TableHeader>
      <TableData>Has home to sell.</TableData>
      <TableData>None</TableData>
    </TableRow>
  </TableBody>
</Table>

Table

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Examples

Examples