HTML Table Tag Element

Blog Desk May 1, 2021 1397 No Comments

<table> HTML Table Tag Element

In HTML, the Table “<table>” tag element has content that is used to display data rows and columns. The HTML tables are created using the group of <table> elements. <table> tag in which <tr> tag is used to create table rows and <td> tag is used to create data cells.

<thead> Table Head

Table Head: <thead> defines the headings of table columns encapsulated in table rows.

<tr> Table Row

Table row element: <tr> is used to add rows into a table before adding table data and table headings.

<th> Table Heading

Table Heading: <th> is used to add titles to rows and columns of a table. It automatically makes bold and center text inside a cell.

<tbody> Table Body

Table Body: <tbody> is a semantic element that will contain all table data other than table heading and table footer content. If used, <tbody> will contain all table row <tr> elements, and indicates that <tr> elements make up the body of the table. <table> cannot have both <tbody> and <tr> as direct children.

<td> Table Data

Table Data: <td> can be nested inside a table row element. <tr> to add a cell of data into a table.

<tfoot> Table Footer

Table Footer: <tfoot> uses table rows to give footer content at the end of a table.

Rowspan Attribute

The rowspan attribute on a table <th> or <td> tag indicates how many rows that particular cell should span within the table. The rowspan value is 1 by default and will take any positive integer up to 65534.

Colspan Attribute

Similar to rowspan, The colspan attribute on a table <th> or <td> tag indicates how many columns that particular cell should span within the table. The colspan value is set to 1 by default and will take any positive integer between 1 and 1000.

Deprecated Attributes

align

This enumerated attribute indicates how the table must be aligned inside the page. It may have the following values:

left: the table is displayed on the left side of the document;
center: the table is displayed in the center of the document;
right: the table is displayed on the right side of the document.

bgcolor
The background color of the table.

border
This integer attribute defines in pixels. The size of the frame surrounding the table.

cellpadding
This attribute defines the space between the content of a cell and its border displayed or not.

cellspacing
This attribute defines the size of the space between two cells in a percentage value or pixels.

width
This attribute defines the width of the table.

Table Example:


<!DOCTYPE html>
<html>
  <head>
      <title>Table Tag</title>
  </head>
  <body>
    <table border="1" width="60%" align="center">
       <tr bgcolor="silver">
          <th>SN</th>
          <th>Item Name</th>
         <th>Rate</th>
      </tr>
      <tr>
         <td>1</td>
         <td>Apple</td>
         <td>Rs. 250 Per Kg</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Banana</td>
         <td>Rs. 100 Per Doz</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Mango</td>
         <td>Rs. 150 Per Kg</td>
      </tr>
   </table>
 </body>
</html>

SN	Item Name	Rate
1	Apple	Rs. 250 Per Kg
2	Banana	Rs. 100 Per Doz
3	Mango	Rs. 150 Per Kg

Table Example with span attributes


<!DOCTYPE html>
<html>
  <head>
      <title>Table Tag with Attributes </title>
  </head>
  <body>
     <table border="1" width="50%" align="center" cellspacing="0" cellpadding="5">
        <tr>
           <th colspan="5">Jk Fruit Store</th>
        </tr>
        <tr>
            <th>SN</th>
            <th>Item Name</th>
            <th>Rate</th>
            <th>Quantity</th>
            <th>Amount</th>
        </tr>
        <tr>
           <td>1</td>
           <td>Apple</td>
           <td>Rs. 250 Per Kg</td>
           <td>5 kg</td>
           <td>Rs. 1250</td>
        </tr>
        <tr>
           <td>2</td>
           <td>Orange</td>
           <td>Rs. 100 Per kg</td>
           <td>3 kg</td>
           <td>Rs. 300</td>
        </tr>
        <tr>
           <td>3</td>
           <td>Mango</td>
           <td>Rs. 150 Per Kg</td>
           <td>2 kg</td>
           <td>Rs. 300</td>
           </tr>
           <tr bgcolor="#f1f1f1">
           <th colspan="3">Total</th>
           <th>10 kg</th>
           <th>Rs. 1850</th>
        </tr>
      </table>
   </body>
</html>

Jk Fruit Store
SN	Item Name	Rate	Quantity	Amount
1	Apple	Rs. 250 Per Kg	5 kg	Rs. 1250
2	Orange	Rs. 100 Per kg	3 kg	Rs. 300
3	Mango	Rs. 150 Per Kg	2 kg	Rs. 300
Total			10 kg	Rs. 1850

HTML List Item Tag and Element

Note: All deprecated attributes are replaced into the CSS property instead.