Lessons 9 – HTML5 Tables

If you wish to organize data into rows and column, you ought to use tables. You can create tables by using a table <table> element. Furthermore, each table has three distinct sections that are table head, table body, and table footer. In most cases, you won’t see the table footer but the other two sections are present in tables through the internet.

You will use thead element to define the table header and the tbody element to define the table body. The table row tr element enclosed within the thead and tbody elements define table rows. Each tr element encloses th elements which denote table columns.

It is the table body which contains all the primary data which you want to display. Each tr element in further incorporates a number of td or table data elements containing individual pieces of information.

In our example, we display information about car prices in the United States by creating a table with three columns and six rows.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Tables</title>
</head>
<body>
    <h1>Car Prices In the United States</h1>

   <table border="1">
    <thead>
        <tr>
            <th>Car</th>
            <th>Model</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Toyota RAV4</th>
            <th>2019</th>
            <th>$25,650</th>
        </tr>
        <tr>
            <th>Hyundai Palisade</th>
            <th>2020</th>
            <th>$31,500</th>
        </tr>
        <tr>
            <th>Ford Super Duty F-250</th>
            <th>2020</th>
            <th>$35,000</th>
        </tr> 
        <tr>
            <th>GMC Sierra</th>
            <th>2020</th>
            <th>$43,395</th>
        </tr> 
        <tr>
            <th>Chevrole Siliverado</th>
            <th>2020</th>
            <th>$39,895</th>
        </tr>
    </tbody>
   </table>
</body>
</html>

Please note that the opening <table> tag also has a border attribute with value “1.” The table attribute and its respective value specify the border and its thickness around table and table cells. However, it is not recommended to use border attribute in HTML5. You must use CSS to style your tables as it is a much better approach.

The above code will correspond to the following table in the browser.

In the next and the final chapter of the course, we are going to discuss HTML5 Special Entities.