coding180 icon

Coding180

HTML Element: Table <table> <tr> <td> <th>

HTML Element: Table <table> <tr> <td> <th>

Tutorials > HTML > HTML Table Elements


HTML tables <table> element is used to display a series of data in an orderly manner, organized in rows and columns.

Something important is that we will not use the tables to organize the entire page.

A series of elements involved in creating a table:

<table> is the parent tag of the table. This element requires the closing tag.

<tr> is the beginning tag of a row. This tag must be inside the table element. This element requires the closing tag.

<td> is the start tag of a cell. This tag must be inside the tr element. This element requires the closing tag.

To remember the name of these HTML elements:

<table> comes from table.

<tr> comes from table row.

<td> comes from table data.

The best way to understand and master this concept is to implement tables and see their result within the browser. 

Example 

Let's make a table that shows the names of countries in one column and their Population in another:

<!DOCTYPE html>
<html>

<head>
    <title>Page title</title>
    <meta charset="UTF-8">
</head>

<body>
    <table border="1">
        <tr>
            <td>China</td>
            <td>1300 millones</td>
        </tr>
        <tr>
            <td>India</td>
            <td>1080 millones</td>
        </tr>
        <tr>
            <td>United States</td>
            <td>295 million</td>
        </tr>
    </table>
</body>

</html>

The result in the browser is:

html table example - robort

The first attribute that appears in the opening of the table element, is the initialization of the border property with the value of 1.
This will put an outline to each cell. (try assigning the value zero and other values ​​greater than 1).

<table border="1">

Next comes the opening of the first row of the table with the tr element:

<tr>

We continue with the opening of the first cell of the first row of the table:

<td>

Then the actual data of the cell:

India

We close the cell:

</td>

We open the next cell:

<td>

We have the value of the cell:

1.3 billion

We close the cell:

</td>

Now we close the first row of the table:

</tr>

The mechanism of the next row is similar to the first.


user

Robort Gabriel

Lagos, Nigeria

Freelance Web Developer, Native Android Developer, and Coding Tutor.

Skills
  • UI / UX
  • JavaScript
  • Python
  • PHP
  • Kotlin
  • Java
  • Bootrap
  • Android
  • Laravel