Thanks to visit codestin.com
Credit goes to www.tutorialspoint.com

Create Table Rows and Columns 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. For table rows and columns, we use <tr>,<td> tags respectively inside the <table>?</table> tag.

Example

Following is the example program to create table rows and column.


<!DOCTYPE html>
<html>
   <style>
      table {
         border:1px solid black;
         padding: 10px;
      }
      th, td{
         border:1px solid black;
         padding: 20px;
      }
   </style>
<body>
   <h2>Tables in HTML</h2>
   <table style="width: 100%">
      <tr>
         <th></th>
         <th></th>
         <th></th>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
      </tr>
      <tr>
         <td></td>
         <td></td>
         <td></td>
      </tr>
   </table>
</body>
</html>

Example

Following is another example program to create table rows and column.


<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {
         border: 1px solid green;
      }
   </style>
</head>
<body>
   <h2>Adding table rows and colomns in HTML</h2>
   <table>
      <tr>
         <th>S.no</th>
         <th>Name</th>
         <th>Age</th>
         <th>Country</th>
      </tr>
      <tr>
         <td>1</td>
         <td>Kohli</td>
         <td>34</td>
         <td>India</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Rabada</td>
         <td>29</td>
         <td>South Africa</td>
      </tr>
      <tr>
         <td>3</td>
         <td>Starc</td>
         <td>33</td>
         <td>Australia</td>
      </tr>
   </table>
</body>
</html>

Example

Following is one more example program to create table rows and column.


<!DOCTYPE html>
<html>
<head>
   <style>
      table, th, td {
         border: 1px solid green;
      }
   </style>
</head>
<body>
   <h2>Adding table rows and colomns in HTML</h2>
   <table style="width:80%">
      <caption>Cricketers...</caption>
      <tr style="background-color: Mediumseagreen">
         <th>S.no</th>
         <th>Name</th>
         <th>Age</th>
         <th>Country</th>
      </tr>
      <tr>
         <td>1</td>
         <td>Kohli</td>
         <td>34</td>
         <td>India</td>
      </tr>
      <tr>
         <td>2</td>
         <td>Rabada</td>
         <td>29</td>
         <td>South Africa</td>
      </tr>
      <tr style="background-color: Mediumseagreen">
         <td>3</td>
         <td>Starc</td>
         <td>33</td>
         <td>Australia</td>
      </tr>
   </table>
</body>
</html>
Updated on: 2022-11-18T10:59:27+05:30

21K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements