How to create tables in HTML?

HTML tables allow us to arrange data into rows and columns on the web page.

We use the <table> tag, to create table in HTML. A table consist of rows and columns. Table heading, row and column and table data can be set using one or more <th>, <tr>, and <td> elements.

  • A table row is defined by the <tr> tag. To set table header,we use <th> tag. To insert data in table cell, use the <td> tag.

  • A table in HTML consists of table cells inside rows and columns of the table.

  • Table heading is defined by the <th>...</th>. Data inside the <th> are the headings of the column of a table.

  • Each table cell is defined by a <td>...</td> tag. Data inside the <td> tag are the content of the table rows and columns.

  • Each table row starts with a <tr> ....</tr> tag.

  • We use style sheet to create border for the table.

Example

Following is an example program to create table in HTML. 

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid green;
      }
   </style>
<body>
   <h2>Count</h2>
   <table>
   <tr>
      <th>Monday</th>
      <th>Tuesday</th>
      <th>Wednesday</th>
      <th>Thursday</th>
      <th>Friday</th>
      <th>Saturday</th>
      <th>Sunday</th>
   </tr>
   <tr>
      <td>12</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
      <td>28</td>
   </tr>
   <tr>
      <td>35</td>
      <td>21</td>
      <td>34</td>
      <td>00</td>
      <td>8</td>
      <td>75</td>
      <td>24</td>
   </tr>
</body>
</html>

Example

Following is another example program to create table in HTML.

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table>
      <tr>
         <th>Name</th>
         <th>RollNo</th>
      </tr>
      <tr>
         <td>Jason</td>
         <td>28</td>
      </tr>
      <tr>
         <td>Yadav</td>
         <td>22</td>
      </tr>
      <tr>
         <td>Abdul</td>
         <td>25</td></tr>
      </tr>
      <tr>
         <td>Abdul</td>
         <td>25</td></tr>
      </tr>
   </table>
</body>
</html>

Now we try to extend our table to our browser tab size using style attribute.

Example

Following is the example program to extend our table to our browser tab size using style attribute.

<!DOCTYPE html>
<html>
   <style>
      table, th, td {
         border:1px solid black;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th>Name</th>
         <th>RollNo</th>
      </tr>
      <tr>
         <td>Jason</td>
         <td>28</td>
      </tr>
      <tr>
         <td>Yadav</td>
         <td>22</td>
      </tr>
      <tr>
         <td>Abdul</td>
         <td>25</td></tr>
      </tr>
      <tr>
         <td>Abdul</td>
         <td>25</td></tr>
      </tr>
   </table>
</body>
</html>

Updated on: 06-Sep-2023

30K+ Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements