Tables in HTML

1. The <table> Element

HTML provides a convenient way to display data in a structured format using tables. Tables help organize information into rows and columns, making them handy for presenting numerical data, schedules, price lists, and other structured datasets. Let's dive into how basic tags are used to create tables: <table>, <tr>, <td>, and <th>.

The <table> tag acts as a container for the entire table. It's used to mark the start and end of a table and contains all other tags related to the table.

Example of creating a table with the <table> tag:

<table>
  <!-- Here are the table's rows and cells -->
</table>

The <table> tag can also be styled with the border attribute to add a border to the table:

<table border="1">
  <tr>
    <td>Example cell</td>
  </tr>
</table>

Here, the border="1" attribute adds a border around the table and its cells, making them visible.

2. The <tr> Element

The <tr> tag represents a table row. Each table row should be inside a <tr> tag, which in turn is placed inside the <table>.

Example:

<table border="1">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>

In this example, the table consists of two rows. Each row has two cells.

3. The <td> Element

The <td> (table data) tag is used to create data cells in a table. It represents a standard table cell, which can contain text, images, or other HTML content.

Example of using <td>:

<table border="1">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

<table border="1">
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
</table>

The <td> cells create the main content of the table and are placed within rows (<tr>).

4. The <th> Element

The <th> (table header) tag is used for creating table headings. Cells created with <th> are bold and center-aligned by default. This is useful for labeling column or row headings.

Example of a table with headers:

    
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>30</td>
  </tr>
<table border="1">
    
  

    
<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Anna</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ivan</td>
    <td>30</td>
</tr>
<table border="1">
    
  

In this example, <th> is used to label the headings "Name" and "Age," helping users quickly understand what each column represents.

1

Task

Python SELF EN, level 29, lesson 2

Locked

Creating a Basic HTML Table

Creating a Basic HTML Table

Open

2

Task

Python SELF EN, level 29, lesson 2

Locked

Using Headers in a Table

Using Headers in a Table

Open

4

Task

Python SELF EN, level 29, lesson 2

Locked

Creating a Table with Merged Cells

Creating a Table with Merged Cells

Open