Client Name

Table

The <table> tag is used to denote tabular data.

lacinia nec aliquam
Turpis magna mattisConsequat gravida inNeque vulputate magnaSit aliquam loremEt sed urna
Iaculis velit nequeTurpis massa pellentesqueIn nec ametIaculis consectetur eratLorem nam ac
Sed massa convallisGravida nam etA et euismodPellentesque adipiscing duiVestibulum a eros
Sed dignissim nislFusce nisl egestasConsectetur nec eratEgestas lacinia acDui dignissim eget
Ac felis magnaElementum convallis acTurpis ac miDui et venenatisFeugiat et erat
Ac cras iaculisNeque neque lacusVelit elit iaculisTortor aliquam etIaculis pellentesque duis 
<table>
  <caption>...</caption>
  <thead>
    <tr><th>...</th><th>...</th></tr>
  </thead>
  <tbody>
    <tr><td>...</td><td>...</td></tr>
    <tr><td>...</td><td>...</td></tr>
  </tbody>
</table>

Table - Bordered

Add the table--bordered class to the table element.

lacinia nec aliquam
Turpis magna mattisConsequat gravida inNeque vulputate magnaSit aliquam loremEt sed urna
Iaculis velit nequeTurpis massa pellentesqueIn nec ametIaculis consectetur eratLorem nam ac
Sed massa convallisGravida nam etA et euismodPellentesque adipiscing duiVestibulum a eros
Sed dignissim nislFusce nisl egestasConsectetur nec eratEgestas lacinia acDui dignissim eget
Ac felis magnaElementum convallis acTurpis ac miDui et venenatisFeugiat et erat
Ac cras iaculisNeque neque lacusVelit elit iaculisTortor aliquam etIaculis pellentesque duis 
<table class="table--bordered">...</table>

Table - Borderless

Add the table--borderless class to the table element.

lacinia nec aliquam
Turpis magna mattisConsequat gravida inNeque vulputate magnaSit aliquam loremEt sed urna
Iaculis velit nequeTurpis massa pellentesqueIn nec ametIaculis consectetur eratLorem nam ac
Sed massa convallisGravida nam etA et euismodPellentesque adipiscing duiVestibulum a eros
Sed dignissim nislFusce nisl egestasConsectetur nec eratEgestas lacinia acDui dignissim eget
Ac felis magnaElementum convallis acTurpis ac miDui et venenatisFeugiat et erat
Ac cras iaculisNeque neque lacusVelit elit iaculisTortor aliquam etIaculis pellentesque duis 
<table class="table--borderless">...</table>

Table - Striped

Add the table--striped class to the table element.

lacinia nec aliquam
Turpis magna mattisConsequat gravida inNeque vulputate magnaSit aliquam loremEt sed urna
Iaculis velit nequeTurpis massa pellentesqueIn nec ametIaculis consectetur eratLorem nam ac
Sed massa convallisGravida nam etA et euismodPellentesque adipiscing duiVestibulum a eros
Sed dignissim nislFusce nisl egestasConsectetur nec eratEgestas lacinia acDui dignissim eget
Ac felis magnaElementum convallis acTurpis ac miDui et venenatisFeugiat et erat
Ac cras iaculisNeque neque lacusVelit elit iaculisTortor aliquam etIaculis pellentesque duis 
<table class="table--striped">...</table>

Table - Condensed

Add the table--condensed class to the table element.

lacinia nec aliquam
Turpis magna mattisConsequat gravida inNeque vulputate magnaSit aliquam loremEt sed urna
Iaculis velit nequeTurpis massa pellentesqueIn nec ametIaculis consectetur eratLorem nam ac
Sed massa convallisGravida nam etA et euismodPellentesque adipiscing duiVestibulum a eros
Sed dignissim nislFusce nisl egestasConsectetur nec eratEgestas lacinia acDui dignissim eget
Ac felis magnaElementum convallis acTurpis ac miDui et venenatisFeugiat et erat
Ac cras iaculisNeque neque lacusVelit elit iaculisTortor aliquam etIaculis pellentesque duis 
<table class="table--condensed">...</table>

Table - Combined

Any of the above classes can be combined on a single table for a combined effect.

lacinia nec aliquam
Turpis magna mattisConsequat gravida inNeque vulputate magnaSit aliquam loremEt sed urna
Iaculis velit nequeTurpis massa pellentesqueIn nec ametIaculis consectetur eratLorem nam ac
Sed massa convallisGravida nam etA et euismodPellentesque adipiscing duiVestibulum a eros
Sed dignissim nislFusce nisl egestasConsectetur nec eratEgestas lacinia acDui dignissim eget
Ac felis magnaElementum convallis acTurpis ac miDui et venenatisFeugiat et erat
Ac cras iaculisNeque neque lacusVelit elit iaculisTortor aliquam etIaculis pellentesque duis 
<table class="table--striped table--condensed table--bordered">...</table>