Open In App

HTML tfoot char Attribute

Improve
Improve
Like Article
Like
Save
Share
Report

The HTML <tfoot> char Attribute is an attribute value used with the <tfoot> align Attribute, that defines content alignment in a column to a character. The default value of the char is the dot sign(.). If align attribute is not set to char then this will not work at all. While aligning the numbers or any monetary values, then this period (.) is included.

Syntax:

<tfoot align="char" char=".">
     <tr>...</tr>
</tfoot>

Example 1: The following example demonstrates the use of the char attribute with an HTML <tfoot> tag.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                         initial-scale=1.0">
  
    <style>
        table , tr ,td,caption{
            border: 1px solid;
            border-spacing: 0px;
        }
        table  thead  tr td{
          text-align:center;
            font-size: 1.5rem;
            background-color: rgb(130, 127, 224)
        }
        table tfoot tr td{
            background-color: rgb(130, 127, 224);
        }
    </style>
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <table>
        <caption>Marks in Math</caption>
        <thead>
            <tr>
                <td>S.no</td>
                <td>Name</td>
                <td>Marks</td>
            </tr>
        </thead>
        <tfoot align="char" char=".">
            <tr>
                <td>Total</td>
                <td></td>
                <td>401</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>1</td>
                <td>Ankit</td>
                <td>76</td>
            </tr>
            <tr>
                <td>2</td>
                <td>kartik</td>
                <td>65</td>
            </tr>
            <tr>
                <td>3</td>
                <td>manas</td>
                <td>33</td>
            </tr>
            <tr>
                <td>4</td>
                <td>priyanshu</td>
                <td>69</td>
            </tr>
            <tr>
                <td>5</td>
                <td>Kuldeep</td>
                <td>80</td>
            </tr>
            <tr>
                <td>6</td>
                <td>Atul</td>
                <td>78</td>
            </tr>
        </tbody>
    </table>
</body>
  
</html>


Output:

 

Example 2: The following example displays that using <tfoot> before and after the <tbody> does not affect the table layout in any way.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" 
          content="IE=edge">
    <meta name="viewport" 
          content="width=device-width, 
                         initial-scale=1.0">
    <title>HTML char Attribute</title>
    <style>
        table , tr ,td,caption{
            border: 1px solid;
            border-spacing: 0px;
        }
        table  thead  tr td{
            font-size: 1.5rem;
            background-color: rgb(130, 127, 224)
        }
        table tfoot tr td{
            background-color: rgb(130, 127, 224);
        }
    </style>
</head>
  
<body>
    <table>
        <caption>Marks</caption>
        <thead>
            <tr>
                <td>Subject</td>
                <td>Name</td>
                <td>Marks</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Math</td>
                <td>Ankit</td>
                <td>76</td>
            </tr>
            <tr>
                <td>Science</td>
                <td>kartik</td>
                <td>65</td>
            </tr>
            <tr>
                <td>Bio</td>
                <td>Ankush</td>
                <td>69</td>
            </tr>
        </tbody>
        <tfoot align="char" char=".">
            <tr>
                <td>Total</td>
                <td></td>
                <td>210</td>
            </tr>
        </tfoot>
  
    </table>
</body>
  
</html>


Output:  

 

Supported Browsers:

  • Edge
  • this attribute is a deprecated attribute not supported in any browsers.


Last Updated : 30 Nov, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads