HTML Tables

Html Table

An HTML table is a structured grid of rows and columns used to display data or information on a webpage. It is one of the fundamental elements in HTML and can be used for a variety of purposes such a:

  • Displaying product information or pricing on an e-commerce website
  • Showing schedules or agendas on event websites
  • Presenting survey or research data on a data analysis website
  • Listing contact information on a business website
  • Displaying financial information or reports on a banking website

To create an HTML table, you will need to use the <table> element, along with the following elements:

Tag Description
<table> Defines a table
<caption> Defines a caption for a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<tr> Defines a row in a table
<th> Defines a header cell in a table
<td> Defines a data cell in a table
<col> Specifies properties for a column in a table
<colgroup> Specifies a group of one or more columns in a table for formatting purposes

Html Table Example

<!DOCTYPE html>
<html lang="en">
<head>">
    <title>Html Table</title>
</head>
<body>
    <table border="1">
        <thead>
          <tr>
            <th>Name</th>
            <th>Age</th>
            <th>Gender</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Jahangir Alam</td>
            <td>25</td>
            <td>Male</td>
          </tr>
          <tr>
            <td>Jesmin</td>
            <td>30</td>
            <td>Female</td>
          </tr>
          <tr>
            <td>Polash</td>
            <td>16</td>
            <td>Male</td>
          </tr>
        </tbody>
      </table>
</body>
</html>

Output:

html-table

Table Heading

In HTML, you can define table headings using the <th> element. The <th> element defines a header cell in a table that contains header information, such as column or row labels.

Example of Tables of heading

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Html Table Header</title>
</head>
<body>
  <table border="1">
    <thead>
      <tr>
        <th>SL NO</th>
        <th>Products Name</th>
        <th>Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>01</td>
        <td>Samsung Gallaxy J 10</td>
        <td>22,000</td>
      </tr>
      <tr>
        <td>02</td>
        <td>MI</td>
        <td>18,000</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

Output:

header-table

Colspan and Rowspan Attributes

In HTML, the colspan and rowspan attributes allow you to merge multiple table cells into a single cell, either horizontally or vertically.

The colspan attribute specifies the number of columns a cell should span, while the rowspan attribute specifies the number of rows a cell should span.

Example of Colspan and Rowspan Attributes

<!DOCTYPE html>
<html>

   <head>
      <title>Colspan & Rowspan HTML Table </title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Age</th>
         </tr>
         <tr>
            <td rowspan = "2">Jahangir Alam</td>
            <td>BSC</td>
            <td>3</td>
         </tr>
         <tr>
            <td>Polash</td>
            <td>SSC</td>
         </tr>
         <tr>
            <td colspan = "3">Shamim</td>
         </tr>
      </table>
   </body>
	
</html>

Output:

col-table

As you can see, the first cell in the first row spans two rows, while the second cell spans two columns in the second row. The remaining cells are single cells with no rowspan or colspan attributes.

Cellpadding and Cellspacing Attributes

In HTML, the cellpadding and cellspacing attributes allow you to control the amount of space between the content of a table cell and the cell’s border, as well as the amount of space between adjacent cells.

The cellpadding attribute specifies the amount of space between the cell content and the cell’s border, while the cellspacing attribute specifies the amount of space between adjacent cells.

Example cellpadding and cellspacing

<!DOCTYPE html>
<html>

   <head>
      <title>Cellpadding HTML Table </title>
   </head>
	
   <body>
    <table border = "1" cellpadding = "10" cellspacing = "10">
      <tr>
         <th>Name</th>
         <th>Class</th>
         <th>GPA</th>
      </tr>
      <tr>
         <td>Mamun</td>
         <td>SSC</td>
         <td>Golden A+</td>
      </tr>
      <tr>
        <td>Polash</td>
        <td>HSC</td>
        <td>A+</td>
     </tr>
   </table>
    
   </body>
	
</html>

Output:

cellpadding-table

Backgrounds Tables

HTML tables can have background colors or images applied to them using the background attribute of the table tag or by using CSS styling.

To apply a background color to an HTML table, you can use the bgcolor attribute in the “table” tag.

For Example background color

<!DOCTYPE html>
<html>

   <head>
      <title>Background Table </title>
   </head>
	
   <body>
    <table border = "1" bgcolor="#green">
      <tr>
         <th>Name</th>
         <th>Class</th>
         <th>GPA</th>
      </tr>
      <tr>
         <td>Mamun</td>
         <td>SSC</td>
         <td>Golden A+</td>
      </tr>
      <tr>
        <td>Polash</td>
        <td>HSC</td>
        <td>A+</td>
     </tr>
   </table>
    
   </body>
	
</html>

Output:

background-img

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

Example of Background Attribute

<!DOCTYPE html>
<html>

   <head>
      <title>Background Table </title>
   </head>
	
   <body>
    <table border = "1" bgcolor="#green" background = "images/logo-sm.png">
      <tr>
         <th>Name</th>
         <th>Class</th>
         <th>GPA</th>
      </tr>
      <tr>
         <td>Mamun</td>
         <td>SSC</td>
         <td>Golden A+</td>
      </tr>
      <tr>
        <td>Polash</td>
        <td>HSC</td>
        <td>A+</td>
     </tr>
   </table>
    
   </body>
	
</html>

** Output:**

bg-img

Table Height and Width

In HTML, you can set the height and width of a table using the “height” and “width” attributes in the “table” tag.

To set the height and width of a table to specific pixel values, you can use the following code:

<!DOCTYPE html>
<html>

   <head>
      <title>Table  Height & Width</title>
   </head>
	
   <body>
    <table border = "1" width="500" height="300">
      <tr>
         <th>Name</th>
         <th>Class</th>
         <th>GPA</th>
      </tr>
      <tr>
         <td>Mamun</td>
         <td>SSC</td>
         <td>Golden A+</td>
      </tr>
      <tr>
        <td>Polash</td>
        <td>HSC</td>
        <td>A+</td>
     </tr>
   </table>
    
   </body>
	
</html>

** Output:**

h-w-img

You can also use percentages to set the width and height of a table relative to the size of its parent container. For example:

<!DOCTYPE html>
<html>

   <head>
      <title>Table  Height & Width</title>
   </head>
	
   <body>
      <div style="width: 800px;"></div>
         <table border = "1" width="100%" height="50%">
            <tr>
               <th>Name</th>
               <th>Class</th>
               <th>GPA</th>
            </tr>
            <tr>
               <td>Mamun</td>
               <td>SSC</td>
               <td>Golden A+</td>
            </tr>
            <tr>
            <td>Polash</td>
            <td>HSC</td>
            <td>A+</td>
         </tr>
         </table>
      </div>
   </body>
	
</html>

** Output:**

full-w-img

NOTE: Note that setting the width and height of a table can affect how its content is displayed, especially if the content is larger than the specified dimensions. In such cases, the table may overflow its container and cause horizontal or vertical scrolling.

Table Caption

A table caption is a short description or title that is used to provide context or summarize the content of an HTML table and it’s usually displayed above or below the table.

Example of Caption

<!DOCTYPE html>
<html>

   <head>
      <title>Caption Table</title>
   </head>
	
   <body>
         <table border = "1" width="70%">
            <caption>Caption Table</caption>
            <tr>
               <th>Name</th>
               <th>Job</th>
               <th>Salary</th>
            </tr>
            <tr>
               <td>Akash</td>
               <td>CSC Engineer</td>
               <td>2,00,000 TK</td>
            </tr>
            <tr>
            <td>Polash</td>
            <td>Salesman</td>
            <td>40,000 TK</td>
         </tr>
         </table>

   </body>
	
</html>

** Output:**

caotion-img

Table Header, Body, and Footer

In HTML, a table can be divided into three parts: the header, the body, and the footer. These sections are used to organize the content of the table and provide additional structure and context.

Header -

The header section of a table is used to display one or more rows of table headers. Table headers are typically displayed in bold text and are used to label the columns of the table. To define a table header, you can use the <thead> tag, and then use the <th> tag to define each header cell.

Body

The body section of a table is used to display the main content of the table, which typically consists of one or more rows of table data. To define the body of a table, you can use the <tbody> tag, and then use the <tr> tag to define each row of data, and the <td> tag to define each cell.

Footer

The footer section of a table is used to display one or more rows of table footer content, which is typically used to display summary information or totals. To define a table footer, you can use the <tfoot> tag, and then use the <td> or <th> tag to define each footer cell.

Example of Header, Body, and Footer

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border="1">
         <thead>
           <tr>
             <th>S.N</th>
             <th>Products name</th>
             <th>Price</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>1</td>
             <td>Walton TV</td>
             <td>15,000 Tk</td>
           </tr>
           <tr>
             <td>2</td>
             <td>Walton Fridge</td>
             <td>25,000 Tk</td>
           </tr>
           <tr>
             <td>3</td>
             <td>Walton Mobile</td>
             <td>10,000 Tk</td>
           </tr>
         </tbody>
         <tfoot>
           <tr>
             <td colspan="2" align="right">Total</td>
             <td>50,000 Tk</td>
           </tr>
         </tfoot>
       </table>

   </body>
	
</html>

** Output:**

html-table-img

Nested Tables

In HTML, it is possible to nest tables within other tables. This means that you can include one or more tables inside the cells of another table, allowing you to create complex layouts and structures.

To nest tables, you simply need to include a complete table structure inside a cell of another table.

Example

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML Table</title>
</head>
<body>
   <table border="1" width="75%">
      <tr>
         <td>
            <table border="1" width="65%">
            <tr>
               <td>Column 1</td>
               <td>Column 2</td>
            </tr>
            <tr>
               <td>Column 1</td>
               <td>Column 2</td>
            </tr>
            </table>
         </td>
         <td>Column 3</td>
      </tr>
      <tr>
         <td>Column 1</td>
         <td>Column 2</td>
      </tr>
   </table>
   
</body>
</html>

Output:

nested-table
Previous
HTML Images
Next
HTML - Lists