HTML - <tr> Tag

In an HTML table, a row is defined with the <tr> tag. Each <tr> tag can have one or more <th> tag that specify the table's header cells or one or more <td> tag that define the table's standard cells. The <tr> tag can either be a nested child of the <thead>, <tbody>, and <tfoot> elements or a direct child of the <table> element.

Syntax

Following is the syntax for HTML <tr> −

<tr>
......
</tr>

Example

Let's consider the following example, where we are going to use the <tr> tag.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1.25px solid #DE3163;
      }
   </style>
<body>
   <table>
      <tr>
         <th>University</th>
         <th>Place</th>
      </tr>
      <tr>
         <td>LPU</td>
         <td>Punjab</td>
      </tr>
      <tr>
         <td>Amity</td>
         <td>Noida</td>
      </tr>
      <tr>
      <td>Amrutha</td>
      <td>Coimbatore</td>
      </tr>
   </table>
</body>
</html>

On running the above code, the output window will pop up, displaying the table on the webpage.

Example

Considering another scenario where we are going to apply th background-color to the <tr> tag.

<!DOCTYPE html>
<html>
   <style>
      table,
      th,
      td {
         border: 1px solid black;
      }
   </style>
<body>
   <table>
      <tr>
         <th>Bike</th>
         <th>Owner</th>
      </tr>
      <tr style="background-color:#D5F5E3;">
         <td>RX100</td>
         <td>Ravi</td>
      </tr>
      <tr style="background-color:#D2B4DE ;">
         <td>Continental</td>
         <td>Arjun</td>
      </tr>
   </table>
</body>
</html>

When we execute the above code, it will generate an output consisting of the table along with a background color added to the data that comes under the <tr> tag displayed on the webpage.

Example

In the following example, we are going to align the <tr> tag to the center using the CSS.

<!DOCTYPE html>
<html>
   <style>
      table,
         th,
         td {
            border: 1.5px solid #A569BD;
         }
   </style>
<body>
   <table style="width:100%">
      <tr>
         <th>Country</th>
         <th>Capital</th>
      </tr>
      <tr style="text-align:center">
         <td>Afghanistan</td>
         <td>Kabul</td>
      </tr>
      <tr style="text-align:center">
         <td>Albania</td>
         <td>Tirane</td>
      </tr>
   </table>
</body>
</html>

On running the above code, the output window will pop up, displaying the data that comes under the <tr> tag displayed at the center inside the table.

Example

Following is an example where we are going to use the rowspan and colspan.

<!DOCTYPE html>
<html>
   <style>
      th,
      td {
         border: 1.5px solid #A569BD;
      }
      table {
         border-collapse: collapse;
      }
   </style>
<body>
   <table>
      <tr>
         <th rowspan=2>Name</th>
         <th colspan=2>Contact Details</th>
      </tr>
      <tr>
         <th>Mobile</th>
         <th>Landline</th>
      </tr>
      <tr>
         <td>Suresh</td>
         <td>0987654321</td>
         <td>123456</td>
      </tr>
      <tr>
         <td>Ramesh</td>
         <td>1256789543</td>
         <td>234562</td>
      </tr>
      <tr>
         <td>Kamal</td>
         <td>88976765432</td>
         <td>009875242</td>
      </tr>
   </table>
</body>
</html>

When we execute the above code, it will generate an output consisting of the table mentioned with a rowspan and colspan displayed on the webpage.

html_tags_reference.htm
Advertisements