HTML tables are used to present data in a structured and organized manner on a web page. They are represented by the <table> tag in HTML and consist of rows (<tr>), columns (<td>), and headers (<th>).
The role of an HTML table is to create a grid of cells organized into rows and columns, with the ability to merge multiple cells together. Tables can be used to display tabular data such as financial reports, sports scores, schedules, and scientific data.
Tables can also be used to create layouts for web pages - although this is less common now due to the increasing use of CSS for layout and design. In contrast to using tables for layouts, it's recommended to using HTML <div> tags along with CSS to create a website's structural layout.
In addition to <table>, HTML also provides a number of related tags for working with tables, such as <caption>, <thead>, <tbody>, <tfoot>, and others. These tags allow tables to be properly structured and fully accessible to assistive technology devices used by people with disabilities.
Table example
Here's an example of a simple HTML table that lists some of the most important tags used to create HTML tables. This particular table has no style and therefore the data will be tabular but there are no borders or column separation lines. We will learn later how to style a table.
<table>
<caption>HTML Table Tags</caption>
<thead>
<tr>
<th>Tag</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><table></td>
<td>Defines the start of a table</td>
</tr>
<tr>
<td><tr></td>
<td>Defines a table row</td>
</tr>
<tr>
<td><th></td>
<td>Defines a table header cell</td>
</tr>
<tr>
<td><td></td>
<td>Defines a table data cell</td>
</tr>
<tr>
<td><caption></td>
<td>Defines a caption for a table</td>
</tr>
<tr>
<td><thead></td>
<td>Defines the header section of a table</td>
</tr>
<tr>
<td><tbody></td>
<td>Defines the body section of a table</td>
</tr>
<tr>
<td><tfoot></td>
<td>Defines the footer section of a table</td>
</tr>
</tbody>
</table>
In this example, we begin by using the <table> tag to define the start of our table. We then use the <caption> tag to provide a brief description of what the table is about.
The <thead> and <tbody> tags are used to group the table header and body sections respectively. Inside the <thead> section, we define a single row using the <tr> tag, and use the <th> tag to define two header cells for our two columns. In the <tbody> section, we define each row of our table using the <tr> tag, then fill each row with two columns - one for the tag name and one for its description - using the <td> tag. Finally, we close our table with the </table> tag.
Experimental
You can open the code snippet provided above using the codepen.io website. This is where you can experiment with HTML and you can share a code snippet. This website is also good to experiment CSS later.
Try it: https://codepen.io/elucian_moise/pen/oNQgBEg
Introduction of <div> element
In the early days of the web, HTML tables were the only reliable way to organize content into columns and rows. Tables were used to create a wide range of layouts, including complex multi-column designs and newsletter-style formats.
However, over time a few problems with using tables for layout became apparent. First, tables required a lot of HTML markup to create even simple layouts, making web pages slower to load and more complicated to maintain. Second, creating a responsive design with tables was difficult and often required complicated scripting. Finally, tables were not always semantically appropriate for the content they were used to organize. For example, using a table to create a simple form layout might make the HTML more complicated than it needs to be.
To address these issues, the <div> element was introduced with the release of HTML5. Divs, which are short for "divisions", were designed to be more lightweight and flexible than tables. They can be used to group blocks of content together and apply styles or other attributes to them. For example, a few <div> elements might be used to create a header, main content area, and footer for a web page. Divs make it easier to create responsive layout designs, as they can be easily formatted based on screen size or other factors. Plus, divs are semantically appropriate for grouping blocks of content, and can even be given class and ID attributes to add meaning to different parts of the page.
While HTML tables can still be used for data-heavy layouts and certain types of designs, <div> elements have largely replaced the use of tables in web design. They offer greater flexibility, better performance, and more semantically-appropriate markup for modern web pages.
Role of <div> element
The <div> element in HTML stands for "division" and is used to group together block-level elements and apply styles and other attributes to them. It is a container element that has no inherent semantic meaning, but is instead used as a generic grouping mechanism.
The role of the <div> element is to organize the content of a web page into logical sections, which can be styled and manipulated as needed. It allows developers to group together related content such as text, images, forms, and other HTML elements. The use of <div> elements makes it easier to apply styles to groups of content, rather than applying styles to individual elements.
The anatomy of a <div> element is simple. It is composed of an opening tag <div>, an optional set of attributes that can be used to provide information about the element, any tag content (including other HTML elements or text), and a closing tag </div>.
Here is an example of using a <div> element to group together a header and a navigation menu:
<div class="header">
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
In this example, we have created a <div> element with a class attribute of "header". Inside the <div>, there is a <h1> element containing the text "My Website", followed by a <nav> element with an unordered list of links. The <div> element groups these elements together and can be targeted with CSS styles or JavaScript events.
Overall, the <div> element is an important part of HTML as it provides a way to group elements together and structure the content of a web page. It is a versatile and flexible element that can be used for a wide range of purposes, from creating page layouts to grouping elements for styling and scripting purposes.
Style a table
We have not yet learn CSS but if you are curious you can open this example and study how a table look like when is styled. The purpose of this example is to demonstrate the importance of CSS over table aspect:
https://codepen.io/elucian_moise/pen/ZExzLGo
Disclaim: This article is created by a collaboration between men and the machine. If you find errors or have questions, please post a comment below.
Thanks for reading. Learn and prosper. 🖖