Horizontal Text Alignment

The text-align property sets the horizontal alignment, like left, right, or center. By default, the text in <th> elements are center-aligned and the text in <td> elements are left-aligned. The following example left-aligns the text in <th> elements:

HTML file: Displayed by browser:
<style>
table, td, th {
   border: 1px solid black;
}
table {
   width:100%;
}
th {
   text-align: left;
}
</style>
<body>
<table>
    <tr>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Savings</th>
    </tr>
    <tr>
        <td>Peter</td>
        <td>Griffin</td>
        <td>$100</td>
    </tr>
    <tr>
        <td>Lois</td>
        <td>Griffin</td>
        <td>$150</td>
    </tr>
    <tr>
        <td>Joe</td>
        <td>Swanson</td>
        <td>$300</td>
    </tr>
    <tr>
        <td>Cleveland</td>
        <td>Brown</td>
        <td>$250</td>
    </tr>
</table>
</body>
First Name Last Name Savings
Peter Griffin $100
Lois Griffin $150
Joe Swanson $300
Cleveland Brown $250

Back button Table of Contents Next button