HTML, Tables

Follow FullPress on Google

Add us to your preferred sources.

The “Gurus” of new computing tend to give order and linearity to a site by using “Style Sheets”, because that’s what W3C wants… We will briefly mention “Style Sheets” later, but I maintain that the order that tables bring to a web document is unparalleled. Well, now that you know that tables are the basis of a webpage’s structure, let’s make friends with them, okay?

Let’s start right away by saying that the units of measurement used for tables are two, namely,pixels and percentages. Using the pixel measurement, the table will be of the fixed type, meaning, whatever video resolution your users use, the table will always be displayed with the same dimensions. If instead you use a percentage measurement, the table will become fluid, meaning, it will automatically adapt to your users’ video resolution. Here is an example to better understand this concept.

Suppose you create a table of 400 pixels. Your users will always see 400 pixels on their screen, regardless of the resolution they use. If instead you create a table of 80%, it will take up 80% of your users’ screen… always and without exception.

So, in summary, we can say that there are two types of tables, fixed e and fluidwhich are distinguished by the unit of measurement used for their creation. In conclusion, we can safely say that tables regulate the Layout of a webpage, i.e., the graphic representation on screen.

After seeing what tables are and what they are used for, let’s start creating one. Let’s state right away that tables can be divided into e rowsand columns, and the union of this division constitutes the cells of the table.

Well, having made this important premise, let’s move on to creating a 400-pixel table with one row. To create a table, the table tag is used, along with other parameters that regulate the table’s appearance. Here is our table with these parameters, which we will discuss later:

In this example, we have set the table border to 1px using the border attribute, just as we set the length to 400px using the width attribute. In this completed example, we haven’t inserted any rows, but if it’s true that a table must have at least one row to be valid…let’s insert it now.

Using tr we have inserted a row into our table. You can notice that by just inserting tr, although valid, nothing will be shown on screen. The third basic element for creating a table is needed, and that element is td, which creates a cell within the table. Here then are the three basic elements for a table: table, tr, and td.

To recap, we have created a table 400px long, with a 1px border, consisting of one row and one cell. Here is our table:

In the next lessons, we will see how to add cells, merge cells, and many other table elements.