Tables

A 3px rule on top, a 2px rule under the header, hairlines between rows, and numbers that line up.

Stable Class names and props are not expected to change before 1.0.

In this chapter 14 pages

Synthetic example. Test accuracy, mean of five seeds.
Model	Cora	Citeseer	Params
Model A	0.815	0.703	23,063
Model B	0.830	0.725	92,373
Model C	0.842	0.731	48,110

HTML

<div class="ply-table-wrap">
  <table class="ply-table">
    <caption>Synthetic example. Test accuracy, mean of five seeds.</caption>
    <thead><tr><th>Model</th><th class="ply-num">Cora</th><th class="ply-num">Citeseer</th><th class="ply-num">Params</th></tr></thead>
    <tbody>
      <tr><td>Model A</td><td class="ply-num">0.815</td><td class="ply-num">0.703</td><td class="ply-num">23,063</td></tr>
      <tr><td>Model B</td><td class="ply-num">0.830</td><td class="ply-num">0.725</td><td class="ply-num">92,373</td></tr>
      <tr><td>Model C</td><td class="ply-num"><strong>0.842</strong></td><td class="ply-num"><strong>0.731</strong></td><td class="ply-num">48,110</td></tr>
    </tbody>
  </table>
</div>

Right-align numeric columns with .ply-num; figures are tabular so decimals line up.
Mark the best result in bold, not in color.
Put the caption under the table. It says what the numbers are and where they come from.
Wrap tables in .ply-table-wrap so wide ones scroll sideways on phones instead of breaking the page.
Add .ply-table--striped for long tables people scan across.