![]() |
The concept of tables in HTML |
This tutorial introduces the concept of a table and discusses its structure and some of its most basic properties. It essentially focuses on those aspects of tables that are used regularly in document development.
CONCEPT
A table is nothing more than a means of organizing data in rows and columns. This concept has been around in our society for a long period of time and has been adopted by HTML in its early stages, as a way to convey information that would not otherwise be so easily understood.
In HTML documents a table can be considered, in short, as a group of rows where each one contains a group of cells. This is conceptually different from a group of columns containing a group of rows, and this difference will have an impact on the composition and behavior of the table.
Like many other HTML structures, tables are built using elements. In particular, a basic table can be declared using three elements, namely table
(the main container), tr
(representing the containing rows of the cells) and td
(representing the cells). Let's make it clearer with an example:
<table class="egt"> <tr> <td>Celda 1</td> <td>Celda 2</td> <td>Celda 3</td> </tr> <tr> <td>Celda 4</td> <td>Celda 5</td> <td>Celda 6</td> </tr> </table>
Cell 1 | Cell 2 | Cell 3 |
Cell 4 | Cell 5 | Cell 6 |
Note that this table has been styled using CSS to improve readability and understanding. You should not expect these results in tables without assigned presentational attributes.
You can clearly see in the previous example, the concept of rows containing columns that we talked about previously. Here it becomes evident how the cells, which have been numbered according to their appearance in the code, follow a sequence in the representation that goes from left to right, one row at a time. This will have future implications, especially when it comes to cell unification and grouping.
HEADER CELLS
Now that we've covered the basic structure of a table, it's time to start creating more useful tables.
A header cell is a special type of cell used to organize and categorize other cells in the table. That said, it's hard to imagine a table where a header cell is useless. Almost any table can benefit from a well-placed group of header cells.
In the following example, we will build a table to display information about the weather in the next few days. Here, the header cells, represented by the elementth
, are placed in the first row of the table, above the common cells.
<table class="egt"> <tr> <th>Hoy</th> <th>Mañana</th> <th>Sábado</th> </tr> <tr> <td>Soleado</td> <td>Mayormente soleado</td> <td>Parcialmente nublado</td> </tr> <tr> <td>19°C</td> <td>17°C</td> <td>12°C</td> </tr> <tr> <td>E 13 km/h</td> <td>E 11 km/h</td> <td>S 16 km/h</td> </tr> </table>
Today | morning | Saturday |
---|---|---|
Sunny | Mainly sunny | Partly cloudy |
19 ° C | 17 ° C | 12 ° C |
E 13 km / h | E 11 km / h | S 16 km / h |
It is easy to see here how each header cell in the table provides information for the rest of the cells in the column to which it belongs. Some agents, such as voice browsers, do the same analysis when they must inform the user which header cell is associated with a particular cell. But in some cases, ambiguities need to be avoided and it is for this reason that HTML provides some attributes like scope
.
THE SCOPE ATTRIBUTE
The attribute scope
provides a mechanism to explicitly indicate which cells a header cell affects. This attribute can only be declared in a header cell and take the values ​​"col", "row", "colgroup" and "rowgroup". The values ​​"col" and "row" indicate that the header cell provides information for the rest of the cells in the column or row (respectively) in which it is present. The other two values ​​will make sense later in this tutorial.
In the following example, the table presented above has been enhanced with more header cells, in order to increase readability. Here, the cell in the upper left corner of the table would provide ambiguous information if the attribute was scope
not present. In other words, it would affect the cells in your column, as well as the cells in your row. The presence of the attribute scope
has made it clear that the cells affected by this header are those in the same row.
<table class="egt"> <tr> <th scope="row">DÃa</th> <th>Hoy</th> <th>Mañana</th> <th>Sábado</th> </tr> <tr> <th>Condición</th> <td>Soleado</td> <td>Mayormente soleado</td> <td>Parcialmente nublado</td> </tr> <tr> <th>Temperatura</th> <td>19°C</td> <td>17°C</td> <td>12°C</td> </tr> <tr> <th>Vientos</th> <td>E 13 km/h</td> <td>E 11 km/h</td> <td>S 16 km/h</td> </tr> </table>
Day | Today | morning | Saturday |
---|---|---|---|
Condition | Sunny | Mainly sunny | Partly cloudy |
Temperature | 19 ° C | 17 ° C | 12 ° C |
Winds | E 13 km / h | E 11 km / h | S 16 km / h |
Must Read, HTML Articles
0 Comments