Basic Table Elements and Attributes: Understanding the tr Attribute (Part 3)

Rumman Ansari   Software Engineer   2024-07-05 04:13:59   6290  Share
Subject Syllabus DetailsSubject Details
☰ TContent
☰Fullscreen

Table of Content:

We already discuss about these below attributes

  1. The align Attribute
  2. The bgcolor Attribute
  3. The border Attribute
  4. The cellpadding Attribute
  5. The cellspacing Attribute
  6. The dir Attribute
  7. The frame Attribute
  8. The rules Attribute
  9. The summary Attribute
  10. The width Attribute
  • The <table> Element Creates a Table
    1. The align Attribute
    2. The bgcolor Attribute
    3. The border Attribute
    4. The cellpadding Attribute
    5. The cellspacing Attribute
    6. The dir Attribute
    7. The frame Attribute
    8. The rules Attribute
    9. The summary Attribute
    10. The width Attribute
  • The <tr> Element Contains Table Rows
    1. The align Attribute
    2. The bgcolor Attribute
    3. The char Attribute
    4. The charoff Attribute
    5. The valign Attribute
  • The <td> and <th> Elements Represent Table Cells
    1. The abbr Attribute
    2. The align Attribute
    3. The axis Attribute
    4. The bgcolor Attribute
    5. The char Attribute
    6. The charoff Attribute
    7. The colspan Attribute
    8. The headers Attribute
    9. The height Attribute
    10. The nowrap Attribute
    11. The rowspan Attribute
    12. The scope Attribute
    13. The valign Attribute
    14. The width Attribute
  • Adding a <caption> to a Table
  • Spanning Columns Using the colspan Attribute
  • Spanning Rows Using the rowspan Attribute
  • Splitting Up Tables Using a Head, Body, and Foot
  • Grouping Columns Using the <colgroup> Element
  • Columns Sharing Styles Using the <col> Element
  • Nested Tables

The align Attribute

The align attribute specifies the position of the content of all of the cells in the row.

align = "alignment"

By default, any <td> cells are usually left - aligned, whereas any <th> cells are usually centered.

The table that follows lists the possible values for the align attribute:

Value Purpose Example
left Content is left - aligned. align = "left"
right Content is right - aligned. align = "right"
center Content is centered horizontally within the cell. align = "center"
justify Text within the cell is justified to fill the cell. align = "justify"
char Cell contents are aligned horizontally around the first instance of a specific character (for example, numbers could be aligned around the first instance of a decimal point). align = "char"

Example 1: align="left" 


<table  border="3">
  <tr align="left">
<th>Name</th>
<th>Food</th>
  </tr>
  <tr align="left">
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr align="left">
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr align="left">
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr align="left">
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr align="left">
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

Example 2: align="right" 


<table  border="3">
  <tr align="right">
<th>Name</th>
<th>Food</th>
  </tr>
  <tr align="right">
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr align="right">
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr align="right">
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr align="right">
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr align="right">
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

Example 3: align="center" 


<table  border="3">
  <tr align="center">
<th>Name</th>
<th>Food</th>
  </tr>
  <tr align="center">
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr align="center">
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr align="center">
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr align="center">
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr align="center">
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

Example 4: align="justify" 


<table border="3">
  <tr align="justify">
<th>Name</th>
<th>Food</th>
  </tr>
  <tr align="justify">
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr align="justify">
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr align="justify">
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr align="justify">
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr align="justify">
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

Example 5: align="char" 


<table  border="3">
  <tr align="char">
<th>Name</th>
<th>Food</th>
  </tr>
  <tr align="char">
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr align="char">
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr align="char">
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr align="char">
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr align="char">
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

The bgcolor Attribute

The bgcolor attribute sets the background color for the row. 

bgcolor = "red"

Example 5: bgcolor = "pink" 


<table  border="3">
  <tr bgcolor = "pink">
<th>Name</th>
<th>Food</th>
  </tr>
  <tr bgcolor = "red">
        <td>Jakir</td>
        <td>Rasgola</td>
  </tr>
  <tr bgcolor = "yellow">
        <td>Sabir</td>
        <td>Masala Dosa</td>
  </tr>
  <tr bgcolor = "red">
        <td>Sourav</td>
        <td>Biryani</td>
  </tr>
  <tr bgcolor = "pink">
        <td>Rohan</td>
        <td>Chole Batura</td>
  </tr>
  <tr bgcolor = "red">
        <td>Rumman</td>
        <td>Birayani </td>
  </tr>
</table>

Live Preview

The char Attribute

The char attribute specifies the alignment of the content in a cell to a character.

The char attribute can only be used if the align attribute is set to "char".

The default value of char is the decimal-point character of the page language.

The <td> char attribute is not supported in HTML5. 

$10.00


<table  border="3">
  <tr align="char" char=".">
<th>Name</th>
<th>Salary</th>
  </tr>
  <tr align="char" char=".">
        <td>Jakir</td>
        <td>$100.78</td>
  </tr>
  <tr align="char" char=".">
        <td>Sabir</td>
        <td>$1200.78</td>
  </tr>
  <tr align="char" char=".">
        <td>Sourav</td>
        <td>$1030.78</td>
  </tr>
  <tr align="char" char=".">
        <td>Rohan</td>
        <td>$1300.78</td>
  </tr>
  <tr align="char" char=".">
        <td>Rumman</td>
        <td>$1400.78 </td>
  </tr>
</table>

Live Preview

The charoff Attribute 

charoff = "2"

The <td> charoff attribute is not supported in HTML5.

The charoff attribute sets the number of characters the content will be aligned from the character specified by the char attribute. For example, if it is given a value of 2 , then the elements are aligned with the character that is two characters along from the one specified by the char attribute. It can also take a negative value.

The charoff attribute can only be used if the char attribute is specified and the align attribute is set to "char". 


<table>
  <tr>
    <th>Name</th>
    <th>Salary</th>
  </tr>
  <tr>
    <td>Xman</td>
    <td align="char" char="." charoff="2">$1000.00</td>
  </tr>
  <tr>
    <td>Kreesh</td>
    <td align="char" char="." charoff="2">$1043.00</td>
  </tr>
</table>

this attribute is not supported at the time of this writing, and there is no requirement for browsers to support it.

Live Preview

The valign Attribute

The purpose of the HTML valign attribute is to define the vertical alignment of the content of a table cell.

HTML valign attribute supports col, colgroup, tbody, td, tfoot, th, thead, tr elements.

ElementName valign = "value"

The table that follows shows the possible values of the valign attribute:

Value Description
top Sets the vertical alignment of cell content top.
middle Sets the vertical alignment of cell content center.
bottom Sets the vertical alignment of cell content bottom.
baseline If set, the first text line occurs on a baseline common to all cells in the row.

Example 1: valign="top" 


<table border="1" cellpadding="2" height="200">  
<tr>  
<th valign="middle" >Student Code </th>  
<th valign="middle">Percentage of marks</th>  
<th valign="middle">Grade</th>  
<th valign="middle">Remarks</th>  
</tr>  
<tr>  
<td valign="top">S001</td>  
<td valign="top">92</td>  
<td valign="top">A+</td>  
<td valign="top">Excellent</td>  
</tr>  
<tr>  
<td valign="top">S002</td>  
<td valign="top">76</td>  
<td valign="top">B+</td>  
<td valign="top">Good</td>  
</tr>  
</table>

Live Preview

Example 2: valign="middle" 


<table border="1" cellpadding="2" height="200">  
<tr>  
<th valign="middle" >Student Code </th>  
<th valign="middle">Percentage of marks</th>  
<th valign="middle">Grade</th>  
<th valign="middle">Remarks</th>  
</tr>  
<tr>  
<td valign="middle">S001</td>  
<td valign="middle">92</td>  
<td valign="middle">A+</td>  
<td valign="middle">Excellent</td>  
</tr>  
<tr>  
<td valign="middle">S002</td>  
<td valign="middle">76</td>  
<td valign="middle">B+</td>  
<td valign="middle">Good</td>  
</tr>  
</table>

Live Preview

Example 3: valign="bottom" 


<table border="1" cellpadding="2" height="200">  
<tr>  
<th valign="middle" >Student Code </th>  
<th valign="middle">Percentage of marks</th>  
<th valign="middle">Grade</th>  
<th valign="middle">Remarks</th>  
</tr>  
<tr>  
<td valign="bottom">S001</td>  
<td valign="bottom">92</td>  
<td valign="bottom">A+</td>  
<td valign="bottom">Excellent</td>  
</tr>  
<tr>  
<td valign="bottom">S002</td>  
<td valign="bottom">76</td>  
<td valign="bottom">B+</td>  
<td valign="bottom">Good</td>  
</tr>  
</table>

Live Preview

Example 4: valign="baseline" 


<table border="1" cellpadding="2" height="200">  
<tr>  
<th valign="middle" >Student Code </th>  
<th valign="middle">Percentage of marks</th>  
<th valign="middle">Grade</th>  
<th valign="middle">Remarks</th>  
</tr>  
<tr>  
<td valign="baseline">S001</td>  
<td valign="baseline">92</td>  
<td valign="baseline">A+</td>  
<td valign="baseline">Excellent</td>  
</tr>  
<tr>  
<td valign="baseline">S002</td>  
<td valign="baseline">76</td>  
<td valign="baseline">B+</td>  
<td valign="baseline">Good</td>  
</tr>  
</table>

Live Preview



Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.