Home Whiteboard Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs
Selected Reading

Example : Basic Table

Let's look at the following example, where we are going to create the basic table using the <table> tag.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #6C3483;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Employee</th>
         <th>Salary</th>
      </tr>
      <tr>
         <td>Maya</td>
         <td>32k</td>
      </tr>
      <tr>
         <td>Raju</td>
         <td>25k</td>
      </tr>
      <tr>
         <td>Rahul</td>
         <td>20k</td>
      </tr>
   </table>
</body>
</html>

Example : Table with Caption

Consider the following example, where we are going to use the <caption> tag along with the <table> tag.

<!DOCTYPE html>
<html>
<body>
<table border="1">
  <caption>Student Grades</caption>
  <tr>
    <th>Name</th>
    <th>Grade</th>
  </tr>
  <tr>
    <td>Ramesh</td>
    <td>A</td>
  </tr>
    <tr>
    <td>Suresh</td>
    <td>B</td>
  </tr>
</table>
</body>
</html>

Example : Table Alignment

In the following example, we are going to use the CSS property to make the table align to the right.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 2px solid #ABEBC6;
      }
   </style>
<body>
   <table style="float:right">
      <tr>
         <th>Team</th>
         <th>Points</th>
      </tr>
      <tr>
         <td>CSK</td>
         <td>16</td>
      </tr>
      <tr>
         <td>MI</td>
         <td>14</td>
      </tr>
      <tr>
         <td>RR</td>
         <td>14</td>
      </tr>
      <tr>
         <td>KKR</td>
         <td>12</td>
      </tr>
   </table>
   <p><br><br>
      The Indian Premier League is a men's Twenty20 cricket 
      league that is annually held in India and contested by 
      ten city-based franchise teams. The BCCI founded the 
      league in 2007.
   </p>
</body>
</html>

Example : Merging Cells

Following is teh example, where we are going to use the colspan along with the <table> tag.

<!DOCTYPE html>
<html>
<body>
<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2">Runs</th>
  </tr>
  <tr>
    <td>Suresh</td>
    <td>35</td>
    <td>50</td>
  </tr>
</table>
</body>
</html>

Supported Browsers

Tag Chrome Edge Firefox Safari Opera
table Yes Yes Yes Yes Yes
html_tags_reference.htm
Previous Quiz Next
Advertisements