What is Table ?

The HTML <table>element allows web authors to display tabular data (such as text, images, links, other tables, etc.) in a two dimensional table with rows and columns of cells.

<table>
  <tr>
     <th>Heading 1/Column 1</th>
    <th>Heading 2/Column 2</th>
  </tr>
  <tr>
     <td>Row 1 Data Column 1</td>
     <td>Row 1 Data Column 2</td>
  </tr>
  <tr>
     <td>Row 2 Data Column 1</td>
     <td>Row 2 Data Column 2</td>
  </tr>
</table>

This will render a <table>consisting of three total rows (<tr>): one row of header cells (<th>) and two rows of content cells (<td>). <th>elements are tabular headers and <td>elements are tabular data. You can put whatever you want inside a <td>or <th>.

Section 8.2: Spanning columns or rows

Table cells can span multiple columns or rows using the colspan and rowspan attributes. These attributes can be applied to <th>and <td>elements.

<table>
<tr>
<td>row 1 col 1</td>
<td>row 1 col 2</td>
<td>row 1 col 3</td>
</tr>
<tr>
<td colspan="3">This second row spans all three columns</td>
</tr>
<tr>
<td rowspan="2">This cell spans two rows</td>
<td>row 3 col 2</td>
<td>row 3 col 3</td>
</tr>
<tr>
<td>row 4 col 2</td>
<td>row 4 col 3</td>
</tr>

Will result in

Note that you should not design a table where both rows and columns overlap as this is invalid HTML and the result is handled differently by different web browsers.

rowspan = A non-negative integer that specifies the number of rows spanned by a cell. The default value of this attribute is one (1). A value of zero (0) means that the cell will extend from the current row until the last row of the table (<thead>, <tbody>, or <tfoot>).

colspan = A non-negative integer that specifies the number of columns spanned by the current cell. The default value of this attribute is one (1). A value of zero (0) means that the cell will extend from the current to the last column of the column group <colgroup>in which the cell is defined.

Section 8.3: Column Groups

The optional <colgroup>tag allows you to group columns together. <colgroup>elements must be child elements of a <table>and must come after any <caption>elements and before any table content (e.g., <tr>, <thead>, <tbody>, etc.).

<table>
<colgroup>
<col id="MySpecialColumn" />
<col />
</colgroup>
<colgroup>
<col class="CoolColumn" />
<col class="NeatColumn" span="2" />
</colgroup>
...
</table>

The following CSS styles can be applied to <colgroup>and <col>elements:

  • border
  • background
  • width
  • visibility
  • display (as in display: none)

display: none; will actually remove the columns from the display, causing the table to render as if those cells don’t exist

For more information, see HTML5 Tabular data.

Section 8.4: Table with thead, tbody, tfoot, and caption

HTML also provides the tables with the <thead>, <tbody>, <tfoot>, and <caption>elements. These additional elements are useful for adding semantic value to your tables and for providing a place for separate CSS styling.

When printing out a table that doesn’t fit onto one (paper) page, most browsers repeat the contents of <thead>on every page.

There’s a specific order that must be adhered to, and we should be aware that not every element falls into place as one would expect. The following example demonstrates how our 4 elements should be placed.

table>
<caption>Table Title</caption> <!--| caption is the first child of table |-->
<thead> <!--======================| thead is after caption |-->
  <tr>
     <th>Header content 1</th>
     <th>Header content 2</th>
  </tr>
</thead>

<tbody> <!--======================| tbody is after thead |-->
<tr>
   <td>Body content 1</td>
   <td>Body content 2</td>
</tr>
</tbody>

<tfoot><!--| tfoot can be placed before or after tbody, but not in a group of tbody. |-->
<!--| Regardless where tfoot is in markup, it is rendered at the bottom. |-->
<tr>
  <td>Footer content 1</td>
  <td>Footer content 2</td>
</tr>
</tfoot>

</table>

There’s a specific order that must be adhered to, and we should be aware that not every element falls into place as one would expect. The following example demonstrates how our 4 elements should be placed.

The following example’s results are demonstrated twice–the first table lacks any styles, the second table has a few CSS properties applied: background-color, color, and border*. The styles are provided as a visual guide and is not an essential aspect of the topic at hand.

Element Styles Applies
<caption> Yellow text on black background.
<thead> Bold text on purple background.
<tbody>Text on blue background.
<tfoot> Text on green background.
<th> Orange borders.
<td>Red borders.

Section 8.5: Heading scope

th elements are very commonly used to indicate headings for table rows and columns, like so:

<table>
   <thead>
      <tr>
         <td></td>
           <th>Column Heading 1</th>
           <th>Column Heading 2</th>
       </tr>
     </thead>
<tbody>
   <tr>
     <th>Row Heading 1</th>
      <td></td>
      <td></td>
   </tr>
   <tr>
      <th>Row Heading 2</th>
      <td></td>
      <td></td>
   </tr>
 </tbody>
</table>

This can be improved for accessibility by the use of the scope attribute. The above example would be amended as follows:

<table>
  <thead>
    <tr>
        <td></td>
           <th scope="col">Column Heading 1</th>
           <th scope="col">Column Heading 2</th>
     </tr>
  </thead>
<tbody>
    <tr>
         <th scope="row">Row Heading 1</th>
          <td></td>
          <td></td>
    </tr>
    <tr>
         <th scope="row">Row Heading 1</th>
       <td></td>
       <td></td>
   </tr>
 </tbody>
</table>

scope is known as an enumerated attribute, meaning that it can have a value from a specific set of possible values. This set includes:

  • col 
  • row
  • colgroup 
  • rowgroup