HTML Tables Basics
HTML tables are sometimes a life saver for web designers. HTML tables are used specifically to visualize data in a meaningful way . It is very important for web designers to use tables consisting of rows and columns effectively.
So, how to make a table in HTML? When and why is it used? Let's take a look at the answers to these questions and more.
HTML table and usage areas
HTML table is used to organize data such as text, images, links and basically consists of rows and columns.
When should tables be (not) used?
An HTML table makes a lot of sense when you want to organize data. It's an ideal way to present a lot of data such as financial data, calendars, pricing, feature comparison, scores.
Although some data looks great in tables, it is better not to use tables for some data. For example, you should never use tables for site layout. The general rule is that websites should be accessible. Accessibility, on the other hand, is directly tied to screen readers, which read tables from top to bottom, left to right. With tables in HTML, the order of presentation of the site is decided by visual selections rather than accessibility options. In such cases, screen readers will not work as you want them to.
table elements
HTML tables usually come with a short description explaining their purpose. Sometimes a more detailed definition may also be used. Table rows can be grouped as head, foot and body sections. For this, thead, tfoot, tbody elements are used.
If you want to give more structural information, you can also group the columns. In addition, you can declare the properties of the column at the beginning of the table definition using the COLGROUP and COL elements. Table cells contain header information or data. Tables can have multiple rows and columns.
The first row of the table is the header of the table and contains no data. You can express this with the thead element, which will semantically enclose the first tr tag. When you use thead, the table's child tr is not used. All lines must be in thead, tbody, or tfoot.
Along with thead and tbody, there is tfoot to span the table rows showing the footer of the table. Like thead, these are not data rows and contain auxiliary information.
When we say tfoot, a section that will be placed at the bottom of the table comes to mind, but it doesn't have to be like this. tfoot can also be thought of as a subheading and placed before the data. For example, it can be used to remind the title by repeating it in very long tables.
tfoot HTML tag
tfoot defines one or more tr elements that contain the short contents of a table's columns. The tfoot tag must always be placed under a table tag. In HTML5, tfoot can be placed before or after tbody and tr tags, but not before caption, colgroup, and thead tags.
tbody HTML tag
The tbody tag must always be placed under a table tag and is used to define the tr tags that make up the body of the table. While the tbody tag should always be used after the thead tag, it can come before or after the tfoot tag.
Get the HTML5 CSS3 book now to learn how to use HTML5.
