HTML - Tables, How to create table in Html

Ad Code

HTML - Tables, How to create table in Html

RK Tutorials May 03, 2023

Using <table> tag we can insert table with number of rows and columns. The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. The elements under <td> are left aligned by default.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables Example</title>
   </head>	
   <body>
      <table border = "1">
         <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>


Output

Row 1, Column 1Row 1, Column 2
Row 2, Column 1Row 2, Column 2


By default table tag does not display outline so, to display outline we use border attribute.
Table Heading

Using th tag we can define table heading. Normally we will put top row as table heading.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table Header Example</title>
   </head>	
   <body>
      <table border = "1">
         <tr bgcolor="green">
            <th><font color="white">Name</font></th>
            <th><font color="white">Marks</font></th>
         </tr>
         <tr>
            <td>Ratnesh Kumar</td>
            <td>456</td>
         </tr>
         
         <tr>
            <td>Kaushal Kumar</td>
            <td>453</td>
         </tr>
      </table>
   </body>
  </html>


Output

NameMarks
Ratnesh Kumar456
Kaushal Kumar453




Cellpadding and Cellspacing Attributes

The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell.




Example of cellpadding

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table Cellpadding Example</title>
   </head>	
   <body>
      <table border = "1" cellpadding = "5">
         <tr>
            <th>Name</th>
            <th>Roll</th>
            <th>Marks</th>
         </tr>
         <tr>
            <td>Raman Kumar</td>
            <td>101</td>
            <td>444</td>
         </tr>
         <tr>
            <td>Suman Kumar</td>
            <td>102</td>
            <td>436</td>
         </tr>
      </table>
   </body>	
</html>


Output


Example of cellspacing

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table cellspacing Example</title>
   </head>	
   <body>
      <table border = "1" cellspacing = "8">
         <tr>
            <th>Name</th>
            <th>Roll</th>
            <th>Marks</th>
         </tr>
         <tr>
            <td>Raman Kumar</td>
            <td>101</td>
            <td>444</td>
         </tr>
         <tr>
            <td>Suman Kumar</td>
            <td>102</td>
            <td>436</td>
         </tr>
      </table>
   </body>	
</html>


Output





Colspan and Rowspan Attributes

If we want to merge two or more columns into a single column then use colspan attribute.

Example of colspan:


<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table Colspan</title>
   </head>	
   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 1</td>
            <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>


Output




If we want to merge two or more rows then use rowspan attribute.

Example of rowspan

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table Colspan</title>
   </head>	
   <body>
      <table border = "1">
         <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>
      </table>
   </body>	
</html>


Output



Example 2:


<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table Header Example</title>
   </head>	
   <body>
      <table border="2" align="center">
<tr bgcolor="#ddff33">
<td rowspan="2"><center>STUDENT<br>NAME</CENTER></td>
<td colspan="3">DATE OF BIRTH</td><td rowspan="2">MARKS</td></tr>
<tr bgcolor="#ddff33"><td>DD</td><td>MM</td><td>YY</td></tr>
<tr><td>PANKAJ</td><td>07</td><td>02</td><td>1998</td><td>409</td></tr>
<tr><td>RAKESH</td><td>05</td><td>02</td><td>1998</td><td>409</td></tr>
<tr><td>RAJESH</td><td>07</td><td>02</td><td>1998</td><td>409</td></tr>

</table>

   </body>
  </html>


Output




Table Height and Width Attributes

We can set a table width and height using width and height attributes. Width and height can specify in terms of pixels or in terms of percentage of available screen area.

Example

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Table Colspan</title>
   </head>	
   <body>
      <table border = "1" width = "400" height = "150">
         <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>


Output





 

RK Tutorials

Posted by RK Tutorials

Post a Comment

0 Comments

Ad Code