Learn HTML: Tables

In this course, you will learn all the syntax you need to create tables in your HTML documents.

Start

Key Concepts

Review core concepts you need to learn to master this subject

The table element

Table row element

Table data elements

The colspan attribute

The rowspan attribute

The table body element

The table head element

The table footer element

The table element

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

The HTML <table> element is used to represent a two-dimensional table made from rows and columns. The <table> element will contain all table data cells within said rows and columns.

Table row element

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

Table row elements, <tr>, are used to add rows to a table before adding table data and table headings.

Table data elements

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

A table data element (<td>) can be nested inside a table row element (<tr>) to add a cell of data to a table.

The colspan attribute

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

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.

The rowspan attribute

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

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.

The table body element

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

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.

The table head element

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

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

The table footer element

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

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

Table heading element

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

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>).

Tables

Lesson 1 of 1

1
There are many websites on the Internet that display information like stock prices, sports scores, invoice data, and more. This data is naturally tabular in nature, meaning that a table is often th...
2
Before displaying data, you must first create the table that will contain the data by using the [...] element. [...] The [...] element will contain all of the tabular data you plan on displ...
3
In many programs that use tables, the table is already predefined for you, meaning that it contains the rows, columns, and cells that will hold data . In HTML, all of these components must be crea...
4
Rows aren't sufficient to add data to a table. Each cell element must also be defined. In HTML, you can add data using the table data element: [...] . [...] In the example above, two data po...
5
Table data doesn't make much sense without titles to describe what the data represents. To add titles to rows and columns, you can use the table heading element: [...] . The table heading elem...
6
So far, the tables you've created have been a little difficult to read because they have no borders. In older versions of HTML, a border could be added to a table using the [...] attribute and ...
7
What if the table contains data that spans multiple columns? For example, a personal calendar could have events that span across multiple hours, or even multiple days. Data can span columns using...
8
Data can also span multiple rows using the [...] attribute. The [...] attribute is used for data that spans multiple rows (perhaps an event goes on for multiple hours on a certain day). It acc...
9
Over time, a table can grow to contain a lot of data and become very long. When this happens, the table can be sectioned off so that it is easier to manage. Long tables can be sectioned off using ...
10
In the last exercise, the table's headings were kept inside of the table's body. When a table's body is sectioned off, however, it also makes sense to section off the table's headings using the [....
11
The bottom part of a long table can also be sectioned off using the [...] element. [...] In the example above, the footer contains the totals of the data in the table. Footers are often used ...
12
Tables, by default, are very bland. They have no borders, the font color is black, and the typeface is the same type used for other HTML elements. You can use CSS to style tables just like you hav...
13
Great job! In this lesson, you learned how to create a table, add data to it, and section the table into smaller parts that make it easier to read. Let's review what you've learned so far: 1. The...