Tables

Print cheatsheet

Table Element `<table>`

In HTML, the <table> element has content that is used to represent a two-dimensional table made of rows and columns.

<table>
  <!-- rows and columns will go here -->
</table>

Table Row Element `<tr>`

The table row element, <tr>, is used to add rows to a table before adding table data and table headings.

<table>
  <tr>
    ...
  </tr>
</table>

Table Data Element `<td>`

The table data element, <td>, can be nested inside a table row element, <tr>, to add a cell of data to a table.

<table>
  <tr>
    <td>cell one data</td>
    <td>cell two data</td>
  </tr>
</table>

`colspan` Attribute

The colspan attribute on a table header <th> or table data <td> element indicates how many columns that particular cell should span within the table. The colspan value is set to 1 by default and will take any positive integer between 1 and 1000.

<table>
  <tr>
    <th>row 1:</th>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
  </tr>
  <tr>
    <th>row 2:</th>
    <td colspan="2">col 1 (will span 2 columns)</td>
    <td>col 2</td>
    <td>col 3</td>
  </tr>
</table>

`rowspan` Attribute

Similar to colspan, the rowspan attribute on a table header or table data element indicates how many rows that particular cell should span within the table. The rowspan value is set to 1 by default and will take any positive integer up to 65534.

<table>
  <tr>
    <th>row 1:</th>
    <td>col 1</td>
    <td>col 2</td>
  </tr>
  <tr>
    <th rowspan="2">row 2 (this row will span 2 rows):</th>
    <td>col 1</td>
    <td>col 2</td>
  </tr>
  <tr>
    <td>col 1</td>
    <td>col 2</td>
  </tr>
   <tr>
    <th>row 3:</th>
    <td>col 1</td>
    <td>col 2</td>
  </tr>
</table>

Table Body Element `<tbody>`

The table body element, <tbody>, is a semantic element that will contain all table data other than table heading and table footer content. If used, <tbody> will contain all table row <tr> elements, and indicates that <tr> elements make up the body of the table. <table> cannot have both <tbody> and <tr> as direct children.

<table>
 <tbody>
   <tr>
     <td>row 1</td>
   </tr>
   <tr>
     <td>row 2</td>
   </tr>
   <tr>
     <td>row 3</td>
   </tr>
 </tbody>
</table>

Table Head Element `<thead>`

The table head element, <thead>, defines the headings of table columns encapsulated in table rows.

<table>
 <thead>
   <tr>
     <th>heading 1</th>
     <th>heading 2</th>
     <th>heading 3</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>col 1</td>
     <td>col 2</td>
     <td>col 3</td>
   </tr>
 </tbody>
</table>

Table Footer Element `<tfoot>`

The table footer element, <tfoot>, uses table rows to give footer content or to summarize content at the end of a table.

<table>
 <thead>
   <tr>
     <th>heading 1</th>
     <th>heading 2</th>
     <th>heading 3</th>
   </tr>
 </thead>
 <tbody>
   <tr>
     <td>col 1</td>
     <td>col 2</td>
     <td>col 3</td>
   </tr>
 </tbody>
 <tfoot>
   <tr>
     <td>summary of col 1</td>
     <td>summary of col 2</td>
     <td>summary of col 3</td>
   </tr>
 </tfoot>
</table>

Table Heading Element `<th>`

The table heading element, <th>, is used to add titles to rows and columns of a table and must be enclosed in a table row element, <tr>.

<table>
  <tr>
    <th>column one</th>
    <th>column two</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
  </tr>
</table>

Related Courses

Course

Introduction to HTML

Learn the basics of HTML5 and start building & editing web pages.

Tables

Table Element <table>

Table Row Element <tr>

Table Data Element <td>

colspan Attribute

rowspan Attribute

Table Body Element <tbody>

Table Head Element <thead>

Table Footer Element <tfoot>

Table Heading Element <th>