The table

Coding (Html5)

Tables had a fundamental part in web design, here is why


The creation of a pleasant-looking and well structured web page was based, until some time ago, on the use of HTML tables or grids, in which the contents were inserted the content of the page.



You could have them side by side or cascade according to the tastes of the Web designer (have a look to my tutorials on UX Design and UI design).



With the evolution of the Web Design techniques, however, the use of the tables is reduced greatly, from a few years to the creation of the layout, we use the technique based on the use of simple DIV formatted with the appropriate CSS property through which it is can play with a lower markup expenditure, the results obtained with tubular design.






Having said this, the fact remains that the use of HTML tables cannot and must not be considered obsolete: the use of an HTML table, in fact, remains essential for the presentation of certain content such as, for example, lists or reports data.






The HTML tags for creating tables



In HTML, you use different tags to create a table:



table - creates a table;

tr - creates a row of a table;

td - creates a cell of a table.

But also:



thead - creates the header of a table;

th - creates a cell to the header of a table;

tbody - creates the body of a table;

tfoot - creates the closure of a table but it must be entered before tbody.






In fact, the first three tags are the most used (as necessary), while the others are very often omitted. The tag thead, tbody and tfoot are used to group rows and to define it: thead defines the header of the table, tbody tfoot closing and rows of data.



For completeness, we will see examples for all tags, but giving priority to the first three tags: <table>, <tr> and <td>.



We see a first example of the table:















Through this markup we will get visually a structure like this:












If you like this content and you are hungry for some more join the Facebook's community in which we share info and news just like this one!

Other posts that might interest you

Coding (Html5) Jan 14, 2018

Hyperlinks tags

See details
Coding (Html5) Jan 14, 2018

Insert images in your document

See details
Coding (Html5) Jan 14, 2018

Build your foundation

See details
Get my free books' review to improve your skill now!
I'll do myself