HTML Table Elements

Table

Table's structure
Table's structure

<table>

  • <caption>
  • <colgroup>
    • <col>
  • <thead>
    • <tr>
      • <th>
  • <tbody>
    • <tr>
      • <th> or <td>
  • <tfoot>
    • <tr>
      • <th> or <td>
When all table elements are used, they need to be in this structure and order.
<table>
Table
The elements:
  • In general, a table is optionally consist of 3 sections: <thead>, body <body>, and <footer>.
  • Each section can have 1 or more rows <tr>.
  • Each row can have 1 or more data cells <td>.
  • When a data cell functions as a header, <th> is used. Examples are all <thead>'s data cells, and sometimes the first data cell of each <body>'s rows.
  • Column in the table can be organized through <colgroup> and <col> elements.
  • Table caption can be included in <caption> element.
Default styling:
  • Table comes very plain to make it very adaptable with any styling. Use CSS for styling> Here some examples.
  • border: 1px solid gray
  • border-collapse: collapse;
    • Values: collapse, separate (default)
    • To adjust spacing when borders are separated:
      • border-spacing: 5px 10px;
  • text-align: left;
    • Values: left, center, right, or justify
  • vertical-align: middle; on <td> and <th>
    • Values: baseline, sub, super, text-top, text-bottom, middle, top, bottom
Basic table
Name Type Color
Kitten Cat Orange
Doggy Dog Brown
HTML codes 
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Type</th>
            <th>Color</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Kitten</td>
            <td>Cat</td>
            <td>Orange</td>
        </tr>
        <tr>
            <td>Doggy</td>
            <td>Dog</td>
            <td>Brown</td>
        </tr>
    </tbody>
</table>
CSS codes 
table {
    border: 1px solid cadetblue;
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
}

th {
    font-weight: bold;
    color: cadetblue;
}

th, td {
    border: 1px solid cadetblue;
    text-align: center;
    padding: 4px 8px;
}
<caption>
Table caption
  • Optional, but when used, it must be the first chid of <table> element.
  • Doesn't adopt the table's background-color. Style <caption> directly.
  • For <table> that is the only descendant element of <figure>, use <figcaption> instead of <caption>.
Default display: Centered, on top of table
CSS styling:
  • caption-side
    • Default: caption-side: top;
    • Other value: bottom
  • text-align
    • Default: text-align: center;
    • Other values: right and left
  • Deprecated attribute align was used to specify this in the past.
<colgroup>
Table column group
Defines a group of column within a table
Important child element: <col>
  • With child <col> element
    • Grouping is arranged more thoroughly through the child <col> elements.
    • span attribute is not permitted. If it is written, it will be ignored.
    • For starting and ending tag requirement, check the documentation.
  • Without child <col> element
    • Important attribute: span
      • span attribute indicates the number of column this element is applied, from the start (left in ltr)
      • If it's not written, default span="1" is assumed.
      • Default styling: none
      • For styling, use class attribute and assign CSS styling.
    • Closing tag may be omitted. Check documentation.
<col>
Table column
Permitted parrent: <colgroup> only
  • But it can be implicitely defined. See documentation.
Important attribute: span
  • See note in <colgroup> above.
Table with caption, colgroup, and col elements, and th's attribute "scope"
Pets
Animal Harrison Olivia Nico Nika
Dogs 3 4 2 5
Cats 6 7 8 1
Total 9 11 10 6
HTML codes 
<table>
    <caption>Pets</caption>
    <colgroup>
        <col span="1" class="coltitle">
        <col span="2" class="colclass1">
        <col span="2" class="colclass2">
    </colgroup>
    <thead>
        <tr>
            <th scope="col">Animal</th>
            <th scope="col">Harrison</th>
            <th scope="col">Olivia</th>
            <th scope="col">Nico</th>
            <th scope="col">Nika</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Dogs</th>
            <td>3</td>
            <td>4</td>
            <td>2</td>
            <td>5</td>
        </tr>
        <tr>
            <th scope="row">Cats</th>
            <td>6</td>
            <td>7</td>
            <td>8</td>
            <td>1</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th scope="row">Total</th>
            <td>9</td>
            <td>11</td>
            <td>10</td>
            <td>6</td>
        </tr>
    </tfoot>
</table>
CSS codes 
table {
    border: 1px solid cadetblue;
    border-collapse: collapse;
    text-align: center;
    vertical-align: middle;
}

caption {
    caption-side: bottom;
    font-weight: bold;
    color: cadetblue;
    font-size: 1.1rem;
}

th {
    font-weight: bold;
    color: cadetblue;
}

tbody th  {
    font-weight: normal;
}

th, td {
    border: 1px solid cadetblue;
    text-align: center;
    padding: 4px 8px;
}

.coltitle {
    background-color: rgb(248, 227, 230);
}

.colclass1 {
    background-color: rgb(243, 240, 209);
}

.colclass2 {
    background-color: rgb(204, 231, 235);
}
<thead>
Table head
Defining heading part of the table with 1 or more rows.
There can be only 1 <thead> per table.
<tbody>
Table body
Defining body part of the table with 1 or more rows.
<tfoot>
Table foot
Defining footer or summary part of the table with 1 or more rows.
<tr>
Table row
Defines rows in a table.
  • Permitted parents: <thead>, <tbody>, <tfoot>
  • Can be direct chid of <table> if there's no <tbody> element. Otherwise must be under the <thead>, <tbody>, or <tfoot>. Structure and order still need to be followed.
  • Permitted children: <th> and <td> combination
<th>
Table header cell
Defines all cells sitting in <tr> that are headers in nature:
  • All cells in <thead><tr>
  • Occasionally, first column cells in <tbody><tr> and <tfoot><tr>
Important attributes
  • scope
    • Defines the cells the header relates to.
    • Values:
      • row: The header relates to all cells of the row it belongs to
      • col: The header relates to all cells of the column it belongs to.
      • rowgroup: The header belongs to a rowgroup and relates to all of its cells. The cells can be placed right or left of the header depending on the dir attribute value of the <table>
      • colgroup: The header belongs to a colgroup and relates to all of its cells.
      • If scope attribute is not specified or the value is not one of the above, browsers automaticallt select the set of cells to which the header cell applies.
    • Check out table titled "Pet" above for an example.
  • headers
    • Contains a list of space-separated strings corresponding to the id attribute of the <th> elements that apply to this element.
  • abbr
    • Contains a short abbreviated descrition of the cell's content. Some user-agents such as speech readers may present this description before the content itself.
  • colspan and rowspan
    • Explained in details below.
<td>
Table data cell
Defines all cells sitting in <tr> that are data in nature:
  • Most cells in <tbody><tr> and <tfoot><tr>
Important attributes
  • headers
    • Contains a list of space-separated strings corresponding to the id attribute of the <th> elements that apply to this element.
  • colspan and rowspan
    • Explained in details below.
<th> and <td>'s column and row spanning
Arranged by colspan and rowspan attributes
  • Spanning horizontally with column span:
    <th colspan="2">
    <td colspan="2">
  • Spanning vertically with row span:
    <th rowspan="2">
    <td rowspan="2">
Attribute's value
  • Non-negative integer
  • Defines number of cells in a span.
  • Default is 1
  • For colspan:
    • Integer higher than 1000 is considered incorrect. Default value 1 is used.
  • For rowspan:
    • If value is 0, the cell extends until the end of the table section that the cell belongs too.
    • Value higher than 65534 will be clipped down to 65534.
Table with colspan and rowspan example
Box List
Pet's name Box ID Dimension (cm) Color
width length height
Bronto 3 8 8 8 Blue
4 4 4 4 Yellow
Lousie 5 Ball with radius = 5 cm Silver
Kitten 1 5 5 5 Red
HTML codes 
<table>
<caption>Box List</caption>
<thead>
<tr>
    <th rowspan="2">Pet's name</th>
    <th rowspan="2">Box ID</th>
    <th colspan="3">Dimension (cm)</th>
    <th rowspan="2">Color</th>
</tr>
<tr>
    <th>width</th>
    <th>length</th>
    <th>height</th>
</tr>
</thead>
<tbody>
<tr>
    <td rowspan="2">Bronto</td>
    <td>3</td>
    <td>8</td>
    <td>8</td>
    <td>8</td>
    <td>Blue</td>
</tr>
<tr>
    <td>Louise</td>
    <td>5</td>
    <td colspan="3">Ball with radius = 5 cm</td>
    <td>Silver</td>
</tr>
<tr>
    <td>Kitten</td>
    <td>1</td>
    <td>5</td>
    <td>5</td>
    <td>5</td>
    <td>Red</td>
</tr>
</tbody>
</table>
CSS codes 
caption {
font-weight: bold;
font-size: 1.1rem;
color: cadetblue;
}

table {
border: 1px solid cadetblue;
border-collapse: collapse;
text-align: center;
vertical-align: middle;
}

th, td {
border: 1px solid cadetblue;
text-align: center;
padding: 4px 8px;
}
Multiple <tbody>
There can be more than 1 <tbody> per table
Structure idea:
  • Use <head> element to title each column as usual
  • Use the first row <tr> of each <tbody> for the each body's title.
    • Use <th> instead of <td> for the cell.
    • Merge all cells in the row to create a title band: <th colspan="2">
Table with multiple bodies
Name Type Color
Olivia's pets
Kitten Cat Orange
Doggy Dog Brown
Harry's pets
Dino Bronto Green
Thomas Dog Brown
HTML codes 
<table>
<thead>
<tr>
    <th>Name</th>
    <th>Type</th>
    <th>Color</th>
</tr>
</thead>
<tbody>
<tr>
    <th colspan="3">Olivia's pets</th>
</tr>
<tr>
    <td>Kitten</td>
    <td>Cat</td>
    <td>Orange</td>
</tr>
<tr>
    <td>Doggy</td>
    <td>Dog</td>
    <td>Brown</td>
</tr>
</tbody>
<tbody>
<tr>
    <th colspan="3">Harry's pets</th>
</tr>
<tr>
    <td>Dino</td>
    <td>Bronto</td>
    <td>Green</td>
</tr>
<tr>
    <td>Thomas</td>
    <td>Dog</td>
    <td>Brown</td>
</tr>
</tbody>
</table>
CSS codes 
tbody th {
font-weight: normal;
background-color: rgb(255, 244, 235);
}
CSS pseudo-class :nth-of-type() and :nth-child()
With these pseudo-classes, it's easy to specifically style certain rows or columns of a table
Siblings of the same type
:nth-of-type(arg)
Matches elements based on their position among siblings of the same type (tag name).
Variations:
  • An+B
    • :nth-of-type(2)
    • :nth-of-type(3n)
    • :nth-of-type(2n+1)
  • An+B from the end of the list
    • :nth-last-of-type(2n+1)
  • Odd or even
    • :nth-of-type(odd)
    • :nth-of-type(even)
  • First or last
    • :first-of-type
    • :last-of-type
  • The only one, if there's only 1 of the type.
    • :only-of-type
Children of all types
:nth-child(arg)
Alternatively, use :nth-of-child() to the parent element, if rule should be applied to all type of children elements.
Variations:
  • All variations of :nth-of-type() applies. Just replace -of-type with -child
Examples
  • To style bottom border of only 2nd row of header:
    • thead > tr:nth-of-type(2) {border-bottom: 4px double cadetblue;}
  • To create easy-to-read table with alternating color of each row:
    • tbody > tr:nth-of-type(odd) {background-color: lightyellow;}
    • tbody > tr:nth-of-type(even) {background-color: whitesmoke;}
    • Only need to use one of above, they can alternate with existing background-color
  • In a complex header like in the pet's boxes example above, to style the subheader cell differently:
    • thead > tr:last-of-type > th:nth-of-type(1) {color: palevioletred;}
    • thead > tr:last-of-type > th:nth-of-type(2) {color: salmon;}
    • thead > tr:last-of-type > th:nth-of-type(3) {color: olive;}
  • Text-align left specific column in the body
    • tbody > tr > td:nth-of-type(2) {text-align: left;}
Table styled with nth pseudo-classes
Box List
Box ID Pet's name Dimension (cm) Color
width length height
1 Bronto 8 8 8 Blue
2 Dino 4 4 4 Yellow
3 Lousie Ball with radius = 5 cm Silver
4 Kitten 5 5 5 Red
5 Sirius 25 64 81 Rainbow
6 Mario 10 10 10 Gold
7 Unicat 3 7 20 Pink
Featured CSS codes
  • thead > tr:nth-of-type(2) {border-bottom: 4px double cadetblue;}
  • tbody > tr:nth-of-type(odd) {background-color: lightyellow;}
  • thead > tr:last-of-type > th:nth-of-type(1) {color: palevioletred;}
  • thead > tr:last-of-type > th:nth-of-type(2) {color: salmon;}
  • thead > tr:last-of-type > th:nth-of-type(3) {color: olive;}
  • tbody > tr > td:nth-of-type(2) {text-align: left;}
Table sorting
Use following JavaScript methods to sort an HTMLCollection of <tr> elements:
  • Array.prototype.slice()
  • Array.prototype.sort()
  • Node.removeChild()
  • Node.appendChild()
There's so much more on table...
Read up start from documentation on table element

Resources