Learn

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

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

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>

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

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

Already have an account?

Course content