HTML Table Tag

⟼ HTML Table tag is used to arrange data into rows and columns.

⟼ We can display data in tabular form, using <table> element, with the help of <tr> , <td>, and <th> elements.

Syntax Follow:-

  <table>
      <tr>
          <th></th>
          <th></th>
      </tr>
     <tr>
          <td></td>
          <td></td>
      </tr> 
  </table>
 

Example:-

  <table>
       <tr> 
            <th>Name</th>
            <th>Roll No.</th>
            <th>Address.</th>
            <th>Father'Name.</th>
            <th>Mobile No.</th>
      </tr>
      <tr>
             <td>Jon</td>
             <td>01</td>
             <td>US</td>
             <td>Korma</td>
             <td>1234567890</td>      
      </tr> 
       <tr>
            <td>Pradeep</td>
            <td>02</td>
             <td>India</td>
             <td>Paras Nath</td>
             <td>0125647898</td>
        </tr> 
       <tr>
             <td>Priyanka </td>
             <td>03</td>
             <td>India</td>
              <td>RajKumar</td>
              <td>0125647834</td>
        </tr> 


  </table>
 

Output-:

Table Attributes or Property

⟼ Table Attributes specify Two way.

Border Attribute
CSS use

1) HTML Border Attribute

Syntax:-

Example:-

   <table border="1">
       <tr> 
            <th>Name</th>
            <th>Roll No.</th>
            <th>Address.</th>
            <th>Father'Name.</th>
            <th>Mobile No.</th>
      </tr>
      <tr>
             <td>Jon</td>
             <td>01</td>
             <td>US</td>
             <td>Korma</td>
             <td>1234567890</td>      
      </tr> 
       <tr>
            <td>Pradeep</td>
            <td>02</td>
             <td>India</td>
             <td>Paras Nath</td>
             <td>0125647898</td>
        </tr> 
       <tr>
             <td>Priyanka </td>
             <td>03</td>
             <td>India</td>
              <td>RajKumar</td>
              <td>0125647834</td>
        </tr> 


  </table>
 

Output-:

2) CSS Border Property

CSS use for Border Property.

    <style>  
  table, th, td {  
  border: 2px solid black;  
  border-collapse: collapse;  
}  
</style>  

Example:-

  <!DOCTYPE html>
<html>
<title>Table Tag</title>
<head>
<style>  
table, th, td {  
  border: 2px solid black;  
  border-collapse: collapse;  
}  
</style>  
</head>
<body>
   <table border="1">
      <tr>
          <th>Name</th>
          <th>Roll No.</th>
          <th>Address.</th>
           <th>Father'Name.</th>
          <th>Mobile No.</th>
      </tr>
     <tr>
          <td>Jon</td>
          <td>01</td>
          <td>US</td>
         <td>Korma</td>
          <td>1234567890</td>      
      </tr> 
 
         <tr>
           <td>Pradeep</td>
           <td>02</td>
           <td>India</td>
           <td>Paras Nath</td>
           <td>0125647898</td>
      
        </tr> 
       <tr>
           <td>Priyanka </td>
           <td>03</td>
           <td>India</td>
            <td>RajKumar</td>
           <td>0125647834</td>
        </tr> 

  </table>
</body>
</html>

Output-:

HTML Cell Padding Table

Two way use Cell Padding Table

Collapsed Borders Property
Cellpadding and Cellspacing

1) Collapsed Borders Property

border-collapse By default, adjust cells will have their own distinct border..

Syntax:-

2) Cellpadding and Cellspacing

Cellpadding specifies the space between the cell content and its borders.If you do not specify a padding, the table cells will be displayed without padding.

Cellspacing The cellspacing attribute defines space between table cells

Syntax:-

Example:-

<!DOCTYPE html>
<html>
<title>Table Tag</title>
<head>
<style>  
     table{  
            border-collapse: collapse; 
        }  
    th,td{  
        border: 2px solid green;   
        padding: 15px;  
    }  
</style>  
</head>
<body>
   <table border="1">
      <tr>
          <th>Name</th>
          <th>Roll No.</th>
          <th>Address.</th>
           <th>Father'Name.</th>
          <th>Mobile No.</th>
      </tr>
     <tr>
          <td>Jon</td>
          <td>01</td>
          <td>US</td>
         <td>Korma</td>
          <td>1234567890</td>      
      </tr> 
 
         <tr>
           <td>Pradeep</td>
           <td>02</td>
           <td>India</td>
           <td>Paras Nath</td>
           <td>0125647898</td>
      
        </tr> 
       <tr>
           <td>Priyanka </td>
           <td>03</td>
           <td>India</td>
            <td>RajKumar</td>
           <td>0125647834</td>
      
        </tr> 


  </table>
</body>
</html>

Output-:

HTML Table Border Cellpadding and Cellspacing Example

HTML Table Colspan

⟼ HTML Table Colspan divide one cell, in multiple number of columns depend on the value of colspan attribute.

Syntax:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Studnet Mobile Number</h2>

<table style="width:50%">
  <tr>
    <th>Name</th>
    <th colspan="2">Mobile No.</th>
  </tr>
  <tr>
    <td>Pradeep Kumar</td>
    <td>123456789</td>
    <td>987456321</td>
  </tr>
</table>

</body>
</html>

Output-:

HTML Table Rowspan

⟼ HTML Table Rowspan divide one rows, in multiple number of rows depend on the value of rowspan attribute

Syntax:

Example:

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;    
}
</style>
</head>
<body>

<h2>Student Mobile Number</h2>

<table style="width:50%">
  <tr>
    <td>Name</td><td>Pradeep Kumar</td></tr>
    <td rowspan="2">Mobile No.</td><td>123456789</td> </tr>
   <tr>
   <td>987456321</td> 
 
  </tr>
</table>

</body>
</html>

Output-:

Next Topic HTML List Tag Example

← prev next →

HTML Tutorials

HTML Tags

HTML5 Tutorial

HTML Table Tag

Table Attributes or Property

1) HTML Border Attribute

2) CSS Border Property

HTML Cell Padding Table

1) Collapsed Borders Property

Syntax:-

2) Cellpadding and Cellspacing

Syntax:-

HTML Table Colspan

Syntax:

Example:

HTML Table Rowspan

Syntax:

Example: