Styleguide

Table

Example

Tables Are Cool Wow
col 3 is right-aligned $1600 only $600
col 2 is centered $12 up from $99
zebra stripes are neat $1 get $1 off
zebra stripes are sweet $1 loose $1

Code

<table>
  <thead>
    <tr>
      <th>Tables</th>
      <th>Are</th>
      <th>Cool</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col 3 is</td>
      <td>right-aligned</td>
      <td>$1600</td>
    </tr>
    <tr>
      <td>col 2 is</td>
      <td>centered</td>
      <td>$12</td>
    </tr>
    <tr>
      <td>zebra stripes</td>
      <td>are neat</td>
      <td>$1</td>
    </tr>
  </tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

CSS

th {
  background-color: #00274C;
  border-radius: 3px;
  color: #FFCB05;
}
1
2
3
4
5

Usage

Tables represent tabular data. The usage of tables ought to be restricted to data that should be organized into rows and columns.

Reference

← Topic Image Tiles →