HTML Table Tag Element

  Blog Desk       May 1, 2021     178 No Comments
HTML-Table-Tag-Element

<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.

Leave a Reply

Your email address will not be published. Required fields are marked *