Code highlights logo

Learn

HTML tables

HTML tables

Tables are used to display tabular data in a structured format. They are often used to display financial data, sports scores, and other information that benefits from a structured layout.

Tables are created using the <table> tag and are composed of one or more rows, each containing one or more cells.

Table content

The <table> tag contains one or more <tr> tags representing table rows. Each <tr> tag contains one or more <td> tags representing table cells. The <td> tags can contain any type of content, including text, images, and links. The <table> tag also has several attributes that can be used to customize the appearance of the table, such as border, cellpadding, and cellspacing.

Table Structure

The first row of the table can be defined as a header using the <th> tag. The <th> tag works like the <td> tag, but it is used to indicate that the cell is a header cell, rather than a data cell. By default, the text in header cells is bold and centered, which makes it easier to read and distinguish from the other cells in the table.

Table Attributes

The <table> tag can have optional attributes such as:

  • border: specifies the width of the border around the table
  • width: specifies the width of the table
  • cellpadding: specifies the space between the cell content and the cell border
  • cellspacing: specifies the space between cells

Here's an example of how a simple HTML table is structured:

1<table border="1" cellpadding="5">
2  <tr>
3    <th>Product</th>
4    <th>Price</th>
5  </tr>
6  <tr>
7    <td>Apples</td>
8    <td>$2.99</td>
9  </tr>
10  <tr>
11    <td>Bananas</td>
12    <td>$1.99</td>
13  </tr>
14</table>

Instructions

1.

Inside our first list item, right below the paragraph, let's create a table with 1px border and 2 rows.

Stuck? Get a hint

To create a table with 3px border and 4 rows, write the following:

<table border="3">
    <tr></tr>
    <tr></tr>
    <tr></tr>
    <tr></tr>
</table>
2.

Let's add 2 heading cells (<th>) in the first row. The first cell heading should contain Total Area as text, and the second shoud have the Population text

3.

In the second row, let's add two cells. The first cell should have the 131,957 text, and the second: 10,482,487

Sign up to start coding

Already have an account?

Sign In

Course content