After seeing some formatting related text tags, let's start now talking about the tables you can insert
inside our age HTML documents, so let's delete headings and paragraphs to end up with our file.
Exactly as it was when we created it in one of the first lessons of the section.
Once done this, let's insert now a classic table made up of rows and columns into our document.
The table is recalled by the table tag so table and it needs inside.
A series of other tags have to be inserted as these tags initially represent rows and colors.
We are going to see then other tags which represent, for example, the part relative to the header
on the table, the Parrella team to the photo and the part relative to the content there.
For the body to insert rows and columns, you need to use the TR and T the attributes inserted inside
our tags for the rows.
The R would be inserted instead for the columns T d would be inserted.
So if we wanted to insert a table made up, for example, all three columns and four rows, this would
be the right procedure.
Starting from the first row, let's insert.
A second row and third row and a fourth.
Now that we have inserted our rose into the table, let's insert Chalons into our PR tags.
Therefore, let's insert the first column.
Then the second.
And the third and let's copy the structure in within the other TR Keg's.
As you see, we have the structure of the table wholly inserted within the body.
We have to insert in all our columns, therefore in every single cell of the rows a series of contents
to make the browser interpret and read correctly the content and to make this content visualized as
a table.
So let's insert some names within the first cell of every row.
Of course, you can see the names that most appeal to you.
We are inserting apparel within the second row.
And colors within the third.
In so doing, we have just created a table containing names of people to whom we gave some apparel and
then the color of the apparel itself.
This is, of course, a simple exercise we are using to make you understand how to insert a table and
how to correctly position it within an HDMI out.
At this point, we can save the content created.
Let's refresh.
And we see that within our browser.
We inserted our table with the names in the first column, apparel in the second column and colors in
the third.
This basic table structure can be implemented with a series of functionalities which may give some features
to the table.
So to make it more intelligible and visually engaging within the browser.
For example, if we add an additional role at the beginning by coping the content already inserted,
modifying our PDA into t h.
We will get some heading tags representing, therefore, the contents of our chalons, therefore all
the CDs.
We have become P.H. and inside them we will insert the labels name where?
Carlos.
Now, let's save our document and let's see the result in the browser.
As you can see, the headings have been inserted and they are bold with the aim, in fact, of representing
what every single column contains.
In addition to this series of tags, we can also insert some clear cut distinctions in the header section,
in the body section and in the photo section of the table.
Moreover, we can also add additional tags such as the had representing the head of the table inside
the table.
But before the first concert, the table a row, because it means to represent the head of eight.
The body which represents the body of the table.
And we might choose to add a photo.
So a t fault, this also might contain a row closing our table, normally used, for example, to represent
toters, as in the case of some of the single amount's inserted in within the table or else some texts
that enclose the contents of every column.
In our case, we can insert simply end to represent the end of our table.
And once saved and refresh, we can verify that visually nothing has changed.
By double checking our content, we can see that head.
Body and food have been correctly inserted and they neatly detach the sections of our table, these
attributes will be useful in case a much wider tables.
And in that case, for example, the heading would be visible within the browser.
And by scrolling down the content, it would be displayed without letting the header get overlooked.
Let's say in second position, same story for the photo, which would remain visible light in the case
of the toters.
And this way, the system might exclusively display the content of the body.
In the same way as far as a print preview.
We would obtain this output headers and footers inside over the pages we want to print to conclude our
lesson relative to tables.
I'd like to talk to you about the caption tags.
That is the caption section usually positioned above the table.
In our case, for example, if we insert in here a caption with the label complete table, so with all
our contents, by saving and refreshing, we would see that our caption gets positioned as middle aligned
as far as formatting and above the content of our table.
As you can see also from the inspection performed through Google Chrome.
To sum up, this is an overview of what you can create with the tables inside an HDMI by.
Now it's your turn to experiment a bit to make sure all the issues of this lesson are clear to you.