HTML - Tables

HTML Tables allow us to present data in a organized way by providing row and column facility. Also offer a visual structure that aids in clarity and comprehension, making them a fundamental element in web development.

Why Tables are Used in HTML?

Tables are included in HTML for various reasons, primarily centered around organizing and presenting data effectively. Some key purposes include

Structuring Data: Tables provide a coherent structure for organizing and displaying data, making it easier for users to interpret information.
Comparative Presentation: When there is a need to compare different sets of data side by side like difference between two concepts, tables offer a clear and visually accessible format.
Tabular Data Representation: Information that naturally fits into rows and columns, such as schedules, statistics, or pricing tables, can be well-represented using HTML tables.

How to create a Table in HTML?

Creating tables in HTML involves several elements that define the structure and content. The primary tags used are <table>, <tr>, <td>, and <th>.

HTML <table> Tag: This tag is used to create the table that wrap the rows and columns within it.
HTML <tr> Tag: Stands for "table row" and is used to create a row within the table.
HTML <td> Tag: Represents "table data" and is used to create standard cells within a row.
HTML <th> Tag: Represents "table header" and is used to create header cells within a row.

All about HTML Tables

Geeting started with HTML tables - from "how we can define a table" to "Creating Nested Tables". Tables are very useful for brief textual content, numeric and non-numeric data. Most useful application of a table is database.

Define an HTML Table
Styling HTML Table
Table Background Color & Image

Table Width and Height
Nested HTML Table

Try to click the icon run button to run the following HTML code to see the output.

Define an HTML Table

An HTML table is defined using <table> tag, to create row <tr> tag, <th> & <td> are used to create table header and table data cell.

Example:

Consider a table representing a simple list of products with their respective categories and prices. This basic table structure organizes data in a clear, tabular format, making it easy to read and understand. Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border, then you can use border="0".

<!DOCTYPE html>
<html>
<body>
    <table border="1">
    <tr>
       <th>Product</th>
       <th>Category</th>
       <th>Price</th>
    </tr>
    <tr>
       <td>Laptop</td>
       <td>Electronics</td>
       <td>$800</td>
    </tr>
    <tr>
       <td>Bookshelf</td>
       <td>Furniture</td>
       <td>$150</td>
    </tr>
    <tr>
       <td>Coffee Maker</td>
       <td>Appliances</td>
       <td>$50</td>
    </tr>
    </table>
</body>
</html>

Styling HTML Table

To add apply css we will use the internal css approach and a few basic CSS properties to decorate the HTML table.

Example:

Here's an example illustrating the basic HTML table which will be designed with CSS to make it look good.

<!DOCTYPE html>
<html>
<head>
   <style>
   table {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 20px;
   }
   th, td {
      border: 1px solid #ddd;
      padding: 8px;
      text-align: left;
   }
   th {
      background-color: #f2f2f2;
   }
   </style>
</head>
<body>
    <h2>HTML Table</h2>
    <p>This table is 3*3 cells including table header.
    <table>
        <tr>
           <th>Header 1</th>
           <th>Header 2</th>
           <th>Header 3</th>
        </tr>
        <tr>
           <td>Data 1</td>
           <td>Data 2</td>
           <td>Data 3</td>
        </tr>
        <tr>
           <td>Data 4</td>
           <td>Data 5</td>
           <td>Data 6</td>
        </tr>
    </table>
</body>
</html>

Table Background Color & Image

We can use CSS to set the background color or image or we can use the HTML attributes for the same, here in both the example we will use the HTML attribute.

HTML bgcolor Attribute: We can set background color for whole table or just for one cell.
HTML background Attribute: We can set background image by using the HTML background attribute.

You can also set border color also using bordercolor attribute.

Example 1:

Here is an another example of using bgcolor & bordercolor attribute to color the table background and border of the table.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Background Color</title>
</head>
<body>
    <table border="1" bordercolor="green" bgcolor="yellow">
       <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
       </tr>
       <tr>
          <td rowspan="2">Row 1 Cell 1</td>
          <td>Row 1 Cell 2</td>
          <td>Row 1 Cell 3</td>
       </tr>
       <tr>
          <td>Row 2 Cell 2</td>
          <td>Row 2 Cell 3</td>
       </tr>
       <tr>
          <td colspan="3">Row 3 Cell 1</td>
       </tr>
    </table>
</body>
</html>

Example 2:

Here is an another example of using background attribute. Here we will use an image available in our "images" directory.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Background Image</title>
</head>
<body>
    <table border="1" bordercolor="green" background="/images/test.png">
    <tr>
       <th>Column 1</th>
       <th>Column 2</th>
       <th>Column 3</th>
    </tr>
    <tr>
       <td rowspan="2">Row 1 Cell 1</td>
       <td>Row 1 Cell 2</td>
       <td>Row 1 Cell 3</td>
    </tr>
    <tr>
       <td>Row 2 Cell 2</td>
       <td>Row 2 Cell 3</td>
    </tr>
    <tr>
       <td colspan="3">Row 3 Cell 1</td>
    </tr>
    </table>
</body>
</html>

Table Width and Height

You can set a table size by mentioning width and height using HTML width and height attributes. You can specify table width or height in terms of pixels or in terms of percentage of available screen area.

Example:

In this example we will set the table with and height 400 and 150 by using HTML width and height attribute.

<!DOCTYPE html>
<html>
<head>
   <title>HTML Table Width/Height</title>
</head>
<body>
    <table border="1" width="400" height="150">
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
        <tr>
          <td>Row 1, Column 1</td>
          <td>Row 1, Column 2</td>
        </tr>
        <tr>
          <td>Row 2, Column 1</td>
          <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

Nested HTML Table

Creating a nested HTML table is quite easy, we just need to create table inside of HTML table.

Example:

In this example we will create nested table with border of 1.

<!DOCTYPE html>
<html>
<head>
    <title>HTML Nested Tables</title>
</head>

<body>
    <table border=1>
        <tr>
            <td> First Column of Outer Table </td>
            <td>
                <table border=1>
                    <tr>
                        <td> First row of Inner Table </td>
                    </tr>
                    <tr>
                        <td> Second row of Inner Table </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table border=1>
                    <tr>
                        <td> First row of Inner Table </td>
                    </tr>
                    <tr>
                        <td> Second row of Inner Table </td>
                    </tr>
                </table>
            </td>
            <td> First Column of Outer Table </td>

        </tr>
    </table>
</body>

</html>

HTML Tables Related Tags

Following is the list of all the HTML tags related to HTML Tables

Tag	Descriprtion	Example
<table>	This is used to create HTML table.	Try It
<th>	This tag define the header of the table.	Try It
<tr>	This tag define table row.	Try It
<td>	This tag is used to store table data of each cell.	Try It
<caption>	This tag specify a caption for the table element.	Try It
<colgroup>	This tag describe the collection of one or more columns in a table for formattig.	Try It
<col>	This tag is used to offer information about columns.	Try It
<thead>	This tag is used to define table header section.	Try It
<tbody>	This tag is used to define table body section.	Try It
<tfoot>	This tag is used to define the table footer section.	Try It

Video - HTML Tables

Print Page