5/19/2020 Introduction to HTML: Tables Cheatsheet | Codecademy

Cheatsheets / Introduction to HTML

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

<td> Table Data Element

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

<thead> Table Head Element

The table head element, <thead> , defines the
headings of table columns encapsulated in table <table>
rows. <thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
</tbody>
</table>

https://www.codecademy.com/learn/learn-html/modules/learn-html-tables/cheatsheet 1/4
5/19/2020 Introduction to HTML: Tables Cheatsheet | Codecademy

rowspan Attribute
Similar to colspan , the rowspan attribute on
a table header or table data element indicates how <table>
many rows that particular cell should span within the <tr>
table. The rowspan value is set to 1 by default <th>row 1:</th>
and will take any positive integer up to 65534. <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>

<tbody> Table Body Element

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

https://www.codecademy.com/learn/learn-html/modules/learn-html-tables/cheatsheet 2/4
5/19/2020 Introduction to HTML: Tables Cheatsheet | Codecademy

<th> Table Heading Element

The table heading element, <th> , is used to add
titles to rows and columns of a table and must be <table>
enclosed in a table row element, <tr> . <tr>
<th>column one</th>
<th>column two</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>

colspan Attribute
The colspan attribute on a table header <th>
or table data <td> element indicates how many
<table>
columns that particular cell should span within the <tr>
table. The colspan value is set to 1 by default
<th>row 1:</th>
and will take any positive integer between 1 and
<td>col 1</td>
1000. <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>

https://www.codecademy.com/learn/learn-html/modules/learn-html-tables/cheatsheet 3/4
5/19/2020 Introduction to HTML: Tables Cheatsheet | Codecademy

<tfoot> Table Footer Element

The table footer element, <tfoot> , uses table
rows to give footer content or to summarize content <table>
at the end of a table. <thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>summary of col 1</td>
<td>summary of col 2</td>
</tr>
</tfoot>
</table>

<table> Table Element

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

https://www.codecademy.com/learn/learn-html/modules/learn-html-tables/cheatsheet 4/4