Html, rows and columns

Let’s see how to make more models by adding rows e columns. Since you know the basic elements of a table, let’s make one with two cells.

Here is how our table will look:

What determines the insertion of a cell in a table among the three elements listed? The tag td. So let’s use td to add two cells to our table:

Each time you repeat the td tag, a cell is created. If you repeat it three times you’ll obviously have three cells. Now let’s see how to make a table with two rows using tr. Here is how our table will look:

In this case as well, the tr tag is repeated for the number of rows to insert. Pay close attention… the tr tag always encloses the td tag because the two rows basically form two cells. Now let’s create a table with two rows and two cells in the lower section.

We have made a table consisting of two rows and two cells in the lower part. Here is the code used:

Let me introduce you to colspan which is used to divide a single cell into multiple cells. In our case, the lower row of the table was divided, through colspan, into two cells. When using colspan, you need to enter the sizes of the two individual cells generated by colspan itself, sizes that must take into account the total width of the table:

 

The total size of the cell is 400px, which will be divided into two cells by colspan.

 

Dividing into two equal-sized cells, we will get two cells of 200px each (400:2). If we want one of the two cells generated by colspan to be larger than the other, we must always keep in mind the total size of the table as a reference, so:

Therefore, you can assign different sizes to the two generated cells, as long as the sum does not exceed 400px. You can do exercises by building tables with various size combinations inserting rows and cells, resizing them to see the effect and find the combination that best suits your needs.

Pubblicato in HTML & CSS