02-11-2023 17:40 Fundamentals of HTML: Learn HTML: Tables Cheatsheet | Codecademy

Cheatsheets / Fundamentals of HTML

Learn HTML: Tables

<tr> Table Row Element

The table row element, <tr> , is used to add rows to a <table>

table before adding table data and table headings.
<tr>
...
</tr>
</table>

<td> Table Data Element

The table data element, <td> , can be nested inside a <table>

table row element, <tr> , to add a cell of data to a
<tr>
table.
<td>cell one data</td>
<td>cell two data</td>
</tr>
</table>

<thead> Table Head Element

The table head element, <thead> , defines the headings <table>

of table columns encapsulated in 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/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-html/modules/wdcp-22-learn-html… 1/4
02-11-2023 17:40 Fundamentals of HTML: Learn HTML: Tables Cheatsheet | Codecademy

rowspan Attribute

Similar to colspan , the rowspan attribute on a table <table>

header or table data element indicates how many rows
<tr>
that particular cell should span within the table. The
rowspan value is set to 1 by default and will take any
<th>row 1:</th>
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 <table>

element that will contain all table data other than table
<tbody>
heading and table footer content. If used, <tbody> will
contain all table row <tr> elements, and indicates that <tr>
<tr> elements make up the body of the table. <td>row 1</td>
<table> cannot have both <tbody> and <tr> as </tr>
direct children.
<tr>
<td>row 2</td>
</tr>
<tr>
<td>row 3</td>
</tr>
</tbody>
</table>
https://www.codecademy.com/learn/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-html/modules/wdcp-22-learn-html… 2/4
02-11-2023 17:40 Fundamentals of HTML: Learn HTML: Tables Cheatsheet | Codecademy

<th> Table Heading Element

The table heading element, <th> , is used to add titles <table>

to rows and columns of a table and must be enclosed in
<tr>
a table row element, <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 <table>

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

https://www.codecademy.com/learn/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-html/modules/wdcp-22-learn-html… 3/4
02-11-2023 17:40 Fundamentals of HTML: Learn HTML: Tables Cheatsheet | Codecademy

<tfoot> Table Footer Element

The table footer element, <tfoot> , uses table rows to <table>

give footer content or to summarize content at the end
<thead>
of a table.
<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 <table>

to represent a two-dimensional table made of rows and
<!-- rows and columns will go here -->
columns.
</table>

Print Share

https://www.codecademy.com/learn/paths/fscj-22-web-development-foundations/tracks/fscj-22-fundamentals-of-html/modules/wdcp-22-learn-html… 4/4