html

HTML tables

Tables are a good source of formatting your data to make it presentable/understandable. The HTML allows you to create tables for a web page using HTML elements. The HTML tables enhance the aesthetics of the web page and allow you to organize your data. We have compiled this guide to teach you about HTML tables, how they work and how they can be created. So, let’s start here:

How tables are created

The HTML supports long list of elements that assist in performing various tasks. The basic building blocks of HTML tables is <tr>, <td>, and <td>. However, the functionality of HTML tables can be extended by using elements such as <caption>, <col>, <tbody>, <colgroup>, and many more. All these elements are explained here one by one.

  • <th>: known as table-header and can be used where you want a header element
  • <td>: known as table data and it occupies one cell in a table
  • <tr>: a complete row is defined using this element
  • <caption>: defines the caption of the table
  • <colgroup>: the columns can be grouped to apply specific formatting
  • <col>: the property of a column is specified using this element
  • <thead>: used to group the header cells
  • <tfoot>: make a group of cells to define the footer
  • <tbody>: it comprises of various columns/rows. It is used after <thead>element and before <tfoot>element.

How to create HTML tables

The tags described in the above section are the key stakeholders in creating HTML tables. This section exercises those tags in various scenarios to define HTML tables:

Example 1: The code written below makes use of <td>, <tr>, and <th>tags to define an HTML table.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HTML tables </title>

</head>

<style type="text/css">

    tr,td,th,table {

        border-style: solid;

    }

</style>

<body>

    <table>

        <tr>

            <th>Name </th>

            <th>Designation </th>

            <th>Experience </th>

        </tr>

        <tr>

            <td>Sam </td>

            <td>Manager </td>

            <td>1-Year </td>

        </tr>

        <tr>

            <td>Kane </td>

            <td>Author </td>

            <td>6-Months</td>

        </tr>

    </table>

</body>

</html>

In the above code,

  • a <table>tag is defined
  • one table-row tag <tr>is used to define the head cells
  • the other <tr>tags are used to insert data using <td>element
  • additionally, we have applied border-style property on <table>, <th>, and <td>in the style tag.

Output:

Example 2: In contrast to above example, we have used some extra tags like <caption>, <colgroup>, and <col>.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title> HTML tables </title>

</head>

<style type="text/css">

    td, th, table {

        border-style: solid;

    }

</style>

<body>

    <table>

        <colgroup>

            <col style="background-color: beige;">

            <col style="background-color: lightseagreen;">

            <col span="2" style="background-color: lightgreen;">

        </colgroup>

        <caption>LinuxHint </caption>

        <tr>

            <th>Name </th>

            <th>Designation </th>

            <th>Age </th>

            <th>Experience </th>

        </tr>

        <tr>

            <td>Sam </td>

            <td>Manager </td>

            <td>20Y </td>

            <td>2-Months </td>

        </tr>

        <tr>

            <td>Kane </td>

            <td>Author </td>

            <td>30Y  </td>

            <td>1-Year </td>

        </tr>

    </table>

</body>

</html>

The above code is described as,

  • the <colgroup>element is used to practice attributes of <col>such as span and style. The span joins the number of columns specified by the user(as in our case it is 2).
  • the background color of first and second column is “beige” and “lightseagreen” respectively whereas the 3rd and 4th columns would have “lightgreen” background
  • the <caption>element defines the caption text of the table and it is set to here
  • two rows are declared using <tr>tag and each row contains four cells.

Output:

The above output shows that the “col style” is applied on all the columns whereas the “col span” is practiced on 3rd and 4th columns.

Example 3: Here we have practiced the tags <tbody>, <thead>, and <tfoot>alongside the essential tags i.e., <td>, and <tr>.

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>HTML tables </title>

</head>

<style type="text/css">

    td, th, table {

        border-style: solid;

    }

</style>

<body>

    <table>

        <caption>LinuxHint </caption>

        <thead>

            <tr>

                <th>Sr. No </th>

                <th>Name </th>

                <th>Designation </th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>1 </td>

                <td>Sam </td>

                <td>Manager </td>

            </tr>

            <tr>

                <td>2 </td>

                <td>Kane </td>

                <td>Author </td>

            </tr>

        </tbody>

        <tfoot>

            <tr>

                <td colspan="3" style="text-align: center;">END </td>

            </tr>

        </tfoot>

    </table>

</body>

</html>

The code is described as,

  • the border-style of <td>, <th>, and <table>is set to solid
  • the <thead>tag is used to enclose the first row as a head
  • after that, the table data is placed in <tbody>tag
  • lastly, the <tfoot>is define the footer section of the table
  • the table caption is provided using the <caption>tag

Output:

The caption of the table is at the top of the table of <thead>, <tbody>, and <tfoot>is shown in the output.

From the above-stated examples, you would have learned to create an HTML table.

Conclusion

HTML tables empower to organize the data in a presentable manner. To work with HTML tables, you have to learn the functionality of various HTML tags. We have compiled this guide to provide the basic information about HTML tables and provided the list of tags that assist in creating HTML tables.

About the author

Adnan Shabbir