Índice de contenidos del artículo
Tables are added to the document using the table tag
The main purpose of tables is to display data in an orderly manner, organized into rows and columns.
Typical use cases would be a schedule, a calendar, a list of elements of which we want to show various information and similar things, which are susceptible to be expressed in tabular form.
For quite some time, tables were used to organize the structure of the entire pages, due to the ability we have with them to assign specific spaces.
At present, with the new additions of CSS, it is no longer necessary to use tables for the purpose of structuring the pages and we could even say that counterproductive, since the tables do not easily adapt to the various screen sizes available.
You can still see designs with tables in advertising emails.
For the creation of a table, a series of elements are involved:
<table>
It is the starting label of the table and requires the closing clause. The rest of the labels that we will see below must be enclosed within this label.
<Tr>
It is the starting label of a row, it must be inside table. This element requires a closing clause.
<Td>
It is the starting label of a cell, must be within tr and requires a closing clause.
To remember the names of these HTML elements:
<table>
<tr> comes from table row which means row.
<td> comes from table data which means data.
Example:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<td>China</td>
<td>1.3 billion</td>
</tr>
<tr>
<td>India</td>
<td>1080 million</td>
</tr>
<tr>
<td>United States</td>
<td>295 million</td>
</tr>
</table>
</body>
</html>First the table opening appears, where we initialize the border attribute with the value 1. With this, we are making visible a border around each cell and the entire table.
We can put the value 0 to border and we will see that the border disappears.
<table border="0"></table><table border="0">Next comes the opening of the first row of the table labeled tr:
Then, the opening of the first cell of the first row with td and inside the data of the cell: “India“.
Then another cell appears within the same tr, which will be a cell located to the right of the previous one, in the same row (tr).
It is a good practice to use tabulations as can be seen in the example to facilitate the reading of the tables.
We can specify header cells by replacing the td> tag< with <th>.
Normally we will use it in the first row and / or column of the table to represent the titles and the visual aspect is that it puts the texts centered and in bold.
Now the previous example is modified by replacing a td with a th in each column:
<html>
<head>
</head>
<body>
<table border="1">
<tr>
<th>Countries</th>
<th>Number of inhabitants</th>
</tr>
<tr>
<td>China</td>
<td>1.3 billion</td>
</tr>
<tr>
<td>India</td>
<td>1080 million</td>
</tr>
<tr>
<td>United States</td>
<td>295 million</td>
</tr>
</table>
</body>
</html>To add a title to a table we use the caption> tag < just after the table is opened.
Caption also have opening and closing clauses .
...
<table border="1">
<caption>Population of countries</caption>
<tr>
<th>Countries</th>
<th>Number of inhabitants</th>
</tr>
...Remember that the cells of the tables are inline elements from the point of view of design and that in addition, inside we can put what we want. Img, lists, etc.
If you have tested using different numbers of cells in different rows, you will have noticed that the total size of the table will be caused by the row with the largest number of elements and in the others gaps are generated.
In these situations, one cell needs to take the place of two or more cells horizontally or vertically in order to adjust the contents well. For this we have the rowspan and colspan attributes.
These are assigned an integer value greater than 1.
If we want a cell to occupy three columns, we will assign a 3 to colspan:
<td colspan="3">dato</td>If we want a cell to extend vertically through the rows we use rowspan:
<td rowspan="3">dato</td>Example:
Proposed exercise:
It is proposed to create an email like the one shown below using a table structure.
Note: Keep in mind that in a td tag you can put other tags with all kinds of content such as images, titles, paragraphs, links, etc.
Here’s the solution to the first two sections, the rest is more of the same:
To access the code you can right-click on the page once opened and click on “View page source code”.
