Tables using Semantic UI classes in WordPress

Table

Header	Header	Header
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell
Footer

<table class="ui celled table">
  <thead>
    <tr>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
    <tr>
      <td>Cell</td>
      <td>Cell</td>
      <td>Cell</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
        <th colspan="3">Footer</th>
    </tr>
  </tfoot>
</table>

Regular <table> tag gets .ui.celled.table classes applied by default, so they don't need to be manually specified.

Padded table

Evidence Rating	Effect	Efficacy	Consensus	Comments
A	Power Output		80% 18 studies	Creatine supplementation is the reference compound for increasing muscular creatine levels; there is variability in this increase, however, with some nonresponders.
A	Weight		100% 65 studies	Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess potency

<table class="ui celled padded table">
  <thead>
    <tr>
        <th class="single line">Evidence Rating</th>
        <th>Effect</th>
        <th>Efficacy</th>
        <th>Consensus</th>
        <th>Comments</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>[header large center aligned]A[/header]</td>
      <td class="single line">Power Output</td>
      <td class="center aligned single line">
        [icon yellow star]
        [icon yellow star]
      </td>
      <td class="right aligned">
        80%<br>
        <a href="#">18 studies</a>
      </td>
      <td>Creatine supplementation is the reference compound for increasing muscular creatine levels; there is variability in this increase, however, with some nonresponders.</td>
    </tr>
    <tr>
      <td>[header large center aligned]A[/header]</td>
      <td class="single line">Weight</td>
      <td class="center aligned single line">
        [icon yellow star]
        [icon yellow star]
        [icon yellow star]
      </td>
      <td class="right aligned">
        100%<br>
        <a href="#">65 studies</a>
      </td>
      <td>Creatine is the reference compound for power improvement, with numbers from one meta-analysis to assess potency</td>
    </tr>
  </tbody>
</table>

Basic collapsing table

Employee	Correct Guesses
Lena Human Resources	22
Matthew Fabric Design	15
Lindsay Entertainment	12
Mark Executive	11

<table class="ui very basic collapsing celled table">
  <thead>
    <tr>
        <th>Employee</th>
        <th>Correct Guesses</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        [header small image="/avatars/1s.png" image_size="mini rounded"]
          Lena
          [subheader normal]Human Resources[/subheader]
        [/header]
      </td>
      <td>22</td>
    </tr>
    <tr>
      <td>
        [header small image="/avatars/2s.png" image_size="mini rounded"]
          Matthew
          [subheader normal]Fabric Design[/subheader]
        [/header]
      </td>
      <td>15</td>
    </tr>
    <tr>
      <td>
        [header small image="/avatars/3s.png" image_size="mini rounded"]
          Lindsay
          [subheader normal]Entertainment[/subheader]
        [/header]
      </td>
      <td>12</td>
    </tr>
    <tr>
      <td>
        [header small image="/avatars/4s.png" image_size="mini rounded"]
          Mark
          [subheader normal]Executive[/subheader]
        [/header]
      </td>
      <td>11</td>
    </tr>
  </tbody>
</table>

Sortable table

Name	Status	Notes
Jamie	Approved	Requires call
Jill	Denied	None
John	No Action	None
3 People	2 Approved

<table class="ui sortable celled table">
  <thead>
    <tr>
      <th>Name</th>
      <th class="sorted ascending">Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jamie</td>
      <td class="positive">Approved</td>
      <td class="warning">Requires call</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td class="negative">Denied</td>
      <td>None</td>
    </tr>
    <tr>
      <td>John</td>
      <td>No Action</td>
      <td>None</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>3 People</th>
      <th>2 Approved</th>
      <th></th>
    </tr>
  </tfoot>
</table>

Using repeat shortcode

Name	Status	Notes
John	Approved	None
Jamie	Approved	Requires call
Jill	Denied	None
John	Approved	None
Jamie	Approved	Requires call
Jill	Denied	None
John	Approved	None
Jamie	Approved	Requires call
Jill	Denied	None

<table class="ui celled table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
  [repeat data="
    John|Approved|None,
    Jamie|Approved|Requires call,
    Jill|Denied|None,
    John|Approved|None,
    Jamie|Approved|Requires call,
    Jill|Denied|None,
    John|Approved|None,
    Jamie|Approved|Requires call,
    Jill|Denied|None,
  "]
    <tr>
      <td>%0%</td>
      <td>%1%</td>
      <td>%2%</td>
    </tr>
  [/repeat]
  </tbody>
</table>

Striped table

Git Repository
node_modules	Initial commit	10 hours ago
test	Initial commit	10 hours ago
build	Initial commit	10 hours ago
package.json	Initial commit	10 hours ago
Gruntfile.js	Initial commit	10 hours ago

<table class="ui celled striped table">
  <thead>
    <tr>
      <th colspan="3">Git Repository</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="collapsing">[icon folder] node_modules</td>
      <td>Initial commit</td>
      <td class="right aligned collapsing">10 hours ago</td>
    </tr>
    <tr>
      <td>[icon folder] test</td>
      <td>Initial commit</td>
      <td class="right aligned">10 hours ago</td>
    </tr>
    <tr>
      <td>[icon folder] build</td>
      <td>Initial commit</td>
      <td class="right aligned">10 hours ago</td>
    </tr>
    <tr>
      <td>[icon file outline] package.json</td>
      <td>Initial commit</td>
      <td class="right aligned">10 hours ago</td>
    </tr>
    <tr>
      <td>[icon file outline] Gruntfile.js</td>
      <td>Initial commit</td>
      <td class="right aligned">10 hours ago</td>
    </tr>
  </tbody>
</table>

Definition table

	Arguments	Description
reset rating	None	Resets rating to default value
set rating	rating (integer)	Sets the current star rating to specified value

<table class="ui definition table">
  <thead>
    <tr>
      <th></th>
      <th>Arguments</th>
      <th>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>reset rating</td>
      <td>None</td>
      <td>Resets rating to default value</td>
    </tr>
    <tr>
      <td>set rating</td>
      <td>rating (integer)</td>
      <td>Sets the current star rating to specified value</td>
    </tr>
  </tbody>
</table>

Structured table

Name	Type	Files	Languages
Name	Type	Files	Ruby	JavaScript	Python
Alpha Team	Project 1	2
Beta Team	Project 1	52
	Project 2	12
	Project 3	21

<table class="ui celled structured table">
  <thead>
    <tr>
      <th rowspan="2">Name</th>
      <th rowspan="2">Type</th>
      <th rowspan="2">Files</th>
      <th colspan="3">Languages</th>
    </tr>
    <tr>
      <th>Ruby</th>
      <th>JavaScript</th>
      <th>Python</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alpha Team</td>
      <td>Project 1</td>
      <td class="right aligned">2</td>
      <td class="center aligned">[icon large green checkmark]</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td rowspan="3">Beta Team</td>
      <td>Project 1</td>
      <td class="right aligned">52</td>
      <td class="center aligned">[icon large green checkmark]</td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>Project 2</td>
      <td class="right aligned">12</td>
      <td></td>
      <td class="center aligned">[icon large green checkmark]</td>
      <td></td>
    </tr>
    <tr>
      <td>Project 3</td>
      <td class="right aligned">21</td>
      <td class="center aligned">[icon large green checkmark]</td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

Cell states

Name	Status	Notes
No Name Specified	Approved	None
Jimmy	Cannot pull data	None
Jamie	Approved	Classified
Jill	Approved	None

<table class="ui celled table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="warning">No Name Specified</td>
      <td>Approved</td>
      <td class="disabled">None</td>
    </tr>
    <tr class="error">
      <td>Jimmy</td>
      <td>Cannot pull data</td>
      <td>None</td>
    </tr>
    <tr>
      <td class="active">Jamie</td>
      <td>Approved</td>
      <td class="error">[icon attention] Classified</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td class="positive">[icon checkmark] Approved</td>
      <td class="disabled">None</td>
    </tr>
  </tbody>
</table>

Cells or rows can contain classes: .positive, .negative, .warning, .error, .active, .disabled

Selectable rows

Name	Status	Notes
John	No Action	None
Jamie	Approved	Requires call
Jill	Denied	None
John	No Action	None
Jamie	Approved	Requires call
Jill	Denied	None

<table class="ui selectable celled table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>No Action</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Denied</td>
      <td>None</td>
    </tr>
    <tr class="warning">
      <td>John</td>
      <td>No Action</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td class="positive">Approved</td>
      <td class="warning">Requires call</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td class="negative">Denied</td>
      <td>None</td>
    </tr>
  </tbody>
</table>

Inverted selectable

Name	Status	Notes
John	Approved	None
Jamie	Approved	Requires call
Jill	Denied	None

<table class="ui selectable inverted table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th class="right aligned">Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td class="right aligned">None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td class="right aligned">Requires call</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Denied</td>
      <td class="right aligned">None</td>
    </tr>
  </tbody>
</table>

Vertical alignment

Name	Status	Notes
John	Approved	Notes 1 2
Jamie	Approved	Notes 1 2

<table class="ui striped table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr class="top aligned">
      <td>John</td>
      <td>Approved</td>
      <td class="top aligned">
        Notes<br>
        1<br>
        2<br>
      </td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td class="bottom aligned">Approved</td>
      <td>
        Notes<br>
        1<br>
        2<br>
      </td>
    </tr>
  </tbody>
</table>

Basic table

Name	Status	Notes
John	Approved	None
Jamie	Approved	Requires call
Jill	Denied	None

<table class="ui basic table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Denied</td>
      <td>None</td>
    </tr>
  </tbody>
</table>

Very basic table

Name	Status	Notes
John	Approved	None
Jamie	Approved	Requires call
Jill	Denied	None

<table class="ui very basic table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Denied</td>
      <td>None</td>
    </tr>
  </tbody>
</table>

Collapsing cell

node_modules	Initial commit	10 hours ago
test	Initial commit	10 hours ago
build	Initial commit	10 hours ago

<table class="ui table">
  <tbody>
    <tr>
      <td class="collapsing">[icon folder] node_modules</td>
      <td>Initial commit</td>
      <td>10 hours ago</td>
    </tr>
    <tr>
      <td>[icon folder] test</td>
      <td>Initial commit</td>
      <td>10 hours ago</td>
    </tr>
    <tr>
      <td>[icon folder] build</td>
      <td>Initial commit</td>
      <td>10 hours ago</td>
    </tr>
  </tbody>
</table>

Collapsing cell uses only as much space as required.

Column width

Name	Status
John	Approved
Jamie	Approved
Jill	Denied
3 People	2 Approved

<table class="ui table">
  <thead>
    <tr>
      <th class="ten wide">Name</th>
      <th class="six wide">Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Approved</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Denied</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>3 People</th>
      <th>2 Approved</th>
    </tr>
  </tfoot>
</table>

Column width can be specified same as grids.

Collapsing

Name	Status	Notes
John	Approved	None
Jamie	Approved	Requires call
Jill	Denied	None
3 People	2 Approved

<table class="ui collapsing table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Denied</td>
      <td>None</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>3 People</th>
      <th>2 Approved</th>
      <th></th>
    </tr>
  </tfoot>
</table>

Collapsing table will take only as much space as it's rows.

Colored table

Food	Calories	Protein
Apples	200	0g
Orange	310	0g

<table class="ui red table">
  <thead>
    <tr>
      <th>Food</th>
      <th>Calories</th>
      <th>Protein</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>200</td>
      <td>0g</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>310</td>
      <td>0g</td>
    </tr>
  </tbody>
</table>

Inverted colored table

Food	Calories	Protein
Apples	200	0g
Orange	310	0g

<table class="ui inverted blue table">
  <thead>
    <tr>
      <th>Food</th>
      <th>Calories</th>
      <th>Protein</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Apples</td>
      <td>200</td>
      <td>0g</td>
    </tr>
    <tr>
      <td>Orange</td>
      <td>310</td>
      <td>0g</td>
    </tr>
  </tbody>
</table>

Compact table

Name	Status	Another Status	Notes
John	Approved	Approved	None
Jamie	Approved	Approved	Requires call
John	Approved	Approved	None
Jamie	Approved	Approved	Requires call
John	Approved	Approved	None
Jamie	Approved	Approved	Requires call
John	Approved	Approved	None
Jamie	Approved	Approved	Requires call

<table class="ui very compact table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Another Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td>Approved</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td>Approved</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td>Approved</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td>Approved</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
  </tbody>
</table>

Small table

Name	Status	Notes
John	Approved	None
Jamie	Approved	Requires call
Jill	Denied	None
3 People	2 Approved

<table class="ui small table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Denied</td>
      <td>None</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>3 People</th>
      <th>2 Approved</th>
      <th></th>
    </tr>
  </tfoot>
</table>

Large table

Name	Status	Notes
John	Approved	None
Jamie	Approved	Requires call
Jill	Denied	None
3 People	2 Approved

<table class="ui large table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Status</th>
      <th>Notes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>Approved</td>
      <td>None</td>
    </tr>
    <tr>
      <td>Jamie</td>
      <td>Approved</td>
      <td>Requires call</td>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Denied</td>
      <td>None</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>3 People</th>
      <th>2 Approved</th>
      <th></th>
    </tr>
  </tfoot>
</table>