Table of Contents

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

    Rumman Ansari July 05, 2024 6,318 views
    Basic Table Elements and Attributes: Understanding the tr Attribute (Part 3)

    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