Table in HTML with Example

When we arrange data in a tabular form, i.e. in the form of rows and columns, it is called table. A table in HTML displays the data or information in rows and columns on a web page. They are an outstanding way to present data visually.

HTML tables allow us to display a large amount of data in a structured and organized way using rows and columns that make data easier to read, understand, and analyze. Using tables, we can display tabular data, such as price lists, financial reports, weather forecasts, timetables, and comparison charts.

Let’s understand the commonly used tags to create a simple table in HTML.

Common HTML Table Tags

A table consists of a series of rows and columns that allow us to format data in rows and columns. The basic structure of a table in HTML is simple and straightforward, consisting mainly of the table tag (<table>) and a series of row (<tr>) and cell (<td> or <th>) tags. The most commonly used tags to define an HTML table is as:

1. <table> Tag:

This tag is used to create a table in HTML. It is a container tag, meaning that it has a closing </table> tag. Everything related to the table should be enclosed within these two tags. Both tags are required like this:

<table>
   . . . . . .
   . . . . . .
</table>

Here, the opening <table> tag denotes the start of a table, and the closing </table> tag ends it. The <table> and </table> tags contain several other tags that define the structure or sections of the table in HTML.

2. <tr> Tag:

Inside the < table > element, we define cells in the HTML table row by row. The <tr> tag stands for “table row”, defines a row in the table. We mainly use it to group together a row of cells in the table. Each row in the table starts with the opening <tr> tag and ends with the closing </tr> tag.

3. <td> Tag:

Inside the <tr> tag or element, we define cells to write the data. A data in the table cell can contain all the HTML elements, such as text, images, lists, links, other tables, etc. The <td> tag stands for “table data”, defines a cell in the table where the actual data goes. Each cell inside the <tr> and </tr> tags starts with <td> tag and ends with the closing </td> tag. Each <td> tag should be nested within a <tr> tag.

4. <th> Tag:

The <th> tag stands for “table header”, defines a header cell in a table. It typically contains the title or name of the column (or row, in some cases). Just like with data cells (<td>), each header cell begins with an opening <th> tag and ends with a closing </th> tag.

5. <caption> Tag:

This tag defines the table caption that tells a short description of the table’s purpose. It starts with an opening <caption> and ends with a closing </caption> tag.

Inside the caption tags, we write a short description about the purpose of defining the HTML tables. The <caption> tag must be inserted immediately after the <table> tag. We can specify only one caption per table. By default, it is center-aligned above the table.

6. <thead> Tag:

The <thead> tag in HTML groups the header content in a table. It encloses one or more <tr> (table row) elements, each of which contains multiple <th> (table header) elements. These elements define the column headers of the table.

Using the <thead> tag, we can semantically separate the header rows of the table from the body (<tbody>) and footer (<tfoot>) sections. The <thead> tag specifically precedes the <tbody> and <tfoot> sections, but follows any <caption> element if one is present.

7. <tbody> Tag:

The <tbody> tag groups the body content in a table. It encloses one or more <tr> elements, each of which can contain <td> and/or <th> elements that define the cells of these rows. The main purpose of using <tbody> element is to semantically structure the table content, making a clear distinction between the table’s header (<thead>), body (<tbody>), and footer (<tfoot>) sections.
[adinserter block=”5″]
In the HTML table, the <tbody> tag generally follows the <thead> section and precedes the <tfoot> section, if used, which contains the table’s footer rows.

8. <tfoot> Tag:

The <tfoot> tag in HTML groups the footer content in a table. It is generally used to summerize or conclude the data given in the table body <tbody>. This tag encloses one or more <tr> elements that contain <td> or <th> elements to define the cells within these rows. We generally place <tfoot> tag after <thead> and <tbody> sections within the <table> element.

Basic Structure of Table in HTML

The basic structure of a table in HTML with all the above main elements would be:

<table>
<caption>Table Caption</caption>
<thead>
   <!-- Table header section-->
   <tr>
      <th>Header 1</th> <!-- Column header -->
      <th>Header 2</th> <!-- Column header -->
   </tr>
</thead>
<tbody>
   <!-- Table data  section-->
   <tr>
      <td>Data 1</td>
      <td>Data 2</td>
   </tr>
   <tr>
      <td>Data 3</td>
      <td>Data 4</td>
   </tr>
</tbody>
<tfoot>
   <!-- Table Footer section-->
   <tr>
      <td>Footer 1</td>
      <td>Footer 2</td>
   </tr>
</tfoot>
</table>

This is a well-organized structure example of a table in HTML in which we have included all the main tags, such as <caption>, <thead>, <tbody>, etc. inside <table> tag. In this structure, we have separately defined table’s header, body, and footer sections to improve readability and accessibility.

Basic HTML Table Example

Let’s take an example in which we will create step by step a simple table in HTML with four rows and three columns.
[adinserter block=”2″]
Example 1:

<!DOCTYPE html>
<html>
<head>
<title>Simple HTML Table Example</title>
</head>
<body>
<!-- Table starts here -->
<table>
   <!-- Table row for column headings -->
   <tr> <!-- First row starts here -->
      <th>First_Name</th> <!-- Column header for first names -->
      <th>Last_Name</th> <!-- Column header for last names -->
      <th>Marks</th> <!-- Column header for marks -->
   </tr> <!-- First row ends here -->
   <!-- First row of student data -->
   <tr>
      <td>Saanvi</td>
      <td>Gupta</td>
      <td>95</td>
   </tr>
   <!-- Second row of student data -->
   <tr>
      <td>Emily</td>
      <td>Johnson</td>
      <td>80</td>
   </tr>
   <!-- Third row of student data -->
   <tr>
      <td>David</td>
      <td>Smith</td>
      <td>82</td>
   </tr>
   <!-- Fourth row of student data -->
   <tr>
      <td>Tripti</td>
      <td>Priya</td>
      <td>85</td>
   </tr>
</table>
</body>
</html>

In this example, we have defined <table> tag to start the beginning of a table in HTML. Inside the <table> tag, we have defined <tr> tags to define rows in the table. Then, we have defined <th> tags inside the <tr> tag to define table headings of the first row.

After that, we have defined <td> tags for data cells in the second, third, and fourth rows that contain actual data. All the tags must be closed with their closing tags, such as </table>, </tr>, </th>, and </td>. When the browser renders this HTML code, it will display the following output on the webpage.

Output:

A basic example of HTML table with four rows and three columns

As you can see in the above HTML code, we have not used <thead>, <tbody>, and <tfoot> elements to create a table. These elements are not mandatory for the basic functioning of a table. If you create a table in HTML without using these tags, it will still work and display correctly in the web browsers.

This table is simpler and less semantically structured. All rows (<tr>) and data cells (<td>) or header cells (<th>) are direct children of the <table> element. However, this structure is perfectly valid for displaying data, but we cannot style its different sections of the table using CSS property.

Creating Table in HTML using <thead>, <tbody>, and <tfoot>

Let’s take an example in which will make a table in HTML using <thead>, <tbody>, and <tfoot> tags to separately define different sections of the table. Look at the HTML code.

Example 2:

<!DOCTYPE html>
<html>
<head>
     <title>Simple Table Example</title>
</head>
<body>
<!-- Table starts here -->
<table>
    <!-- Table caption -->
    <caption>Monthly Expenses</caption>

    <!-- Table header -->
    <thead>
        <tr>
           <th>Item</th> <!-- Column header -->
           <th>Cost</th> <!-- Column header -->
        </tr>
    </thead>

    <!-- Table body -->
    <tbody>
       <!-- First row of data -->
       <tr>
          <td>Rent</td> <!-- Data cell -->
          <td>$1200</td> <!-- Data cell -->
       </tr>
       <!-- Second row of data -->
       <tr>
          <td>Groceries</td> <!-- Data cell -->
          <td>$300</td> <!-- Data cell -->
       </tr>
       <!-- Third row of data -->
       <tr>
          <td>Utilities</td> <!-- Data cell -->
          <td>$150</td> <!-- Data cell -->
          </tr>
     </tbody>

     <!-- Table footer -->
     <tfoot>
         <tr>
            <td>Total</td> <!-- Footer cell -->
            <td>$1650</td> <!-- Footer cell -->
         </tr>
     </tfoot>
</table>
<!-- Table ends here -->
</body>
</html>

Output:

An example of a well-organized, structured table in HTML without border

In this example, we have used <thead>, <tbody>, and <tfoot> tags to create a table in HTML. These elements allow us to semantically group different sections of the table as well as also help to make styling specific sections of the table with the CSS easier. For example, we can easily style all header rows differently from body rows using CSS property.

Hence, tags <thead>, <tbody>, and <tfoot> are not strictly necessary for creating a basic HTML table. But for complex data tables, these elements help to create a systematic structure of a table that improves readability, accessibility, and styling.

How to Add Border in HTML Table?

As you see in the above HTML table code, we have used <table> tag without mentioning the border. As a result, there is no border around the table. Border marks the outlines of a table and frame each cell. There are two ways to add border to an HTML table. They are:

  • By using border attribute of table in HTML
  • By using border property in CSS

Let’s understand both methods one by one with the help of examples.

Using the HTML border Attribute

This method is straightforward but less flexible than CSS. To define a border around the table in HTML, we simply add the border attribute inside the <table> tag and specify the thickness of the border in pixels. The general syntax to add border attribute inside the <table> tag is as:

<table border = "n">

In the above syntax, n specifies the width or thickness of the table border in pixels.

Example 3:

<!DOCTYPE html>
<html>
<head>
    <title>HTML Table Example with Border</title>
</head>
<body>
<table border="1">
   <caption>Marks Sheet</caption>
   <thead>
   <tr>
      <th>Subject</th>
      <th>Marks Obtained</th>
   </tr>
   </thead>
   <tbody>
   <tr>
      <td>Physics</td>
      <td>90</td>
   </tr>
   <tr>
      <td>Chemistry</td>
      <td>95</td>
   </tr>
   <tr>
      <td>Maths</td>
      <td>98</td>
   </tr>
   </tbody>
   <tfoot>
   <tr>
      <td>Total Marks</td>
      <td>283</td>
   </tr>
   </tfoot>
</table>
</body>
</html>

Output:

Using border Attribute

In this example code, we have assigned a border thickness of 1 pixel around each cell and the table itself. We can also change its color using bordercolor attribute of a HTML table like this:

<table border = "1" bordercolor = red>

In HTML5, it is not recommended to use the border and bordercolor attributes directly inside table tags because these attributes do not offer the flexibility or styling capabilities that the CSS provides.

Using CSS Border Property

To make border around a table in HTML, we can use the border property of CSS that is more flexible and is also a recommended method for styling HTML elements. We can add CSS directly within our HTML file using the <style> tag in the <head> section. Here’s an example of how we can add a border to a table using CSS’s border property:

Example 4:

<!DOCTYPE html>
<html>
<head>
     <title>HTML Table using CSS Border property</title>
<style>
table, th, td {
    border: 1px solid red;
    border-collapse: collapse;
}
</style>
</head>
<body>
<table>
    <caption>Marks Sheet</caption>
    <tr>
       <th>Subject</th>
       <th>Marks Obtained</th>
    </tr>
    <tr>
       <td>Physics</td>
       <td>90</td>
    </tr>
    <tr>
       <td>Chemistry</td>
       <td>95</td>
    </tr>
    <tr>
       <td>Maths</td>
       <td>98</td>
    </tr>
    <tr>
       <td>Total Marks</td>
       <td>283</td>
    </tr>
</table>
</body>
</html>

Output:

An example of adding border to a table in HTML using border property of CSS
In this example, we have applied the CSS border property to the <table>, <th>, and <td> elements to add a solid red border around the table and each cell. We have also used the border-collapse property of CSS to collapse cell borders as a single border rather than as separate borders for each cell. Using CSS, we can easily adjust the color, style, and width of the border over the appearance of the tables in HTML.

In this tutorial, we covered how to create tables in HTML documents using the essential HTML tags, such as <table>, <thead>, <tbody>, <tfoot>,<tr>, and <td>. Additionally, we have used the border property of CSS to add the border around the table, which is more recommended in comparison to using the border attribute of table. We hope that you will have understood of the basic structure of a table in HTML and practiced all example coding.

Related Posts

Trending now

Superglobal Variables in PHP with Examples
CSS :first-of-type selector example
CSS :first-of-type And :last-of-type Selectors
PHP Constants with Examples
CSS :only-child Selector with Example