Tables in HTML5 - part 1

Question

1 Answer

Best answer

In the past HTML tables were used to control the layout of the sites, in order to maintain the proportions of the content, create sections, divide the information, etc. Currently this is a bad practice, in fact with the new specifications of the table element in HTML5 has been done so that it is used for its true purpose is to display data in 2-dimensional arrays.

Element table

The table element is the large container and can be inside any element that is flow, such as div . Within the table element we will have the elements: caption, colgroup, thead, tbody, tfoot, tr, th and td , which are the required to give the constitution to our table, additionally the new standard has made the following attributes obsolete within of table and have to be used exclusively by CSS: summary, align, width, bgcolor, cellpadding, cellspacing, frame, rules . The CSS convention for this element will be this:

 table {display: table; border-collapse: separate; border-spacing: 2px; border-color: gray; }

Element tr

As we know, the tables are composed of two basic elements, rows and columns, where the rows represent each information record and the columns the structure and type of the information, let's see the element used to create the rows, this element is the tr . This can be a child of the following elements: table, thead, tfoot, tbody , as we see can be the direct son of a table or son of the elements that are children of the table and that define its structure. It must contain 1 or more elements td or th as appropriate, in the new HTML5 standard it has also placed some of its obsolete attributes, these are: align, char, charoff, valign, bgcolor. Which have to be worked exclusively by CSS, said CSS has the following structure as a convention:

 tr {display: table-row; vertical-align: inherit; border-color: inherit;}

Element td

This element defines the columns within our rows in the table, which allows us to separate the information within a record and thus be able to classify it according to our needs, it is son of the element tr, the valid attributes that it can possess are: colspan, rowspan, headers and the obsolete attributes that must now be handled in the CSS are: abbr, axis, align, width, char, charoff, valign, bgcolor, height, nowrap, scope . The CSS convention for this element is the following:

 td {display: table-cell; vertical-align: inherit; }

Our first table

Let's put into practice what we have seen so far, we already know that for our table we need rows and columns within our container or parent element, let's see how we take it to HTML code below:

 <! DOCTYPE HTML> <html> <head> <title> Example </ title> </ head> <body> <table> <tr> <td> Apples </ td> <td> Green </ td> <td> Medium </ td> </ tr> <tr> <td> Oranges </ td> <td> Orange </ td> <td> Large </ td> </ tr> </ table> </ body> </ html>

This code gives us the structure of a 2-row table with 3 columns, as we see it is simple text, which leads us to see this result:

As we could see, it is quite easy to create a table in HTML5 at the moment it is just text, and without format, in the next part of the tutorial we will see how to make a table a bit more advanced with CSS content.

answered Jun 23, 2019 by stackoverflow (3.5m points)
edited Jun 23, 2019

Tables in HTML5 - part 1

Your answer

1 Answer

Your comment on this answer:

Related questions