How to Align Text in a Table Header and Body?

Last Updated : 18 Oct, 2024

Tables are a fundamental structure in HTML for organizing data into rows and columns. Aligning the text within these cells is crucial for readability and presentation. Properly aligning text in table headers and bodies not only enhances readability but also improves the overall aesthetic of your data presentation. This article will guide you through the various methods to align text in table headers and bodies.

We will discuss the different properties to align text in a table header and body:

Table of Content

Using CSS to Align Text
Vertical Alignment in Table Cells
Align Text in Specific Columns or Rows

Using CSS to Align Text

To align text in table cells using CSS, use the text-align property. Set it to left for standard text, center for headings or highlights, and right for numeric data. You can apply these styles inline or through classes in your stylesheet. This enhances readability and organization in your tables.

Start with your basic HTML table layout. Ensure you have rows (<tr>) and cells (<td> or <th>).
Use the text-align property in your CSS to control how text is displayed within each cell. You can apply these styles inline, within a <style> tag, or in an external stylesheet.

Example: Below is an example to align text using CSS to Align Text.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="
width=device-width, initial-scale=1.0">
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 10px;
            border: 1px solid #ddd;
        }

        .left {
            text-align: left;
        }

        .center {
            text-align: center;
        }

        .right {
            text-align: right;
        }
    </style>
    <title>Table Alignment Example</title>
</head>

<body>
    <h1>Table Alignment Propert 1</h1>
    <table>
        <thead>
            <tr>
                <th class="left">Name</th>
                <th class="center">Age</th>
                <th class="right">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="left">GFG</td>
                <td class="center">30</td>
                <td class="right">$50000</td>
            </tr>
            <tr>
                <td class="left">GeeksforGeeks</td>
                <td class="center">25</td>
                <td class="right">$4000</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Output:

Vertical Alignment in Table Cells

To vertically align text within table cells, you can use the vertical-align property in CSS. This allows you to position text at the top, middle, or bottom of each cell, enhancing the overall layout and readability of your tables.

Start with a basic HTML table containing rows (<tr>) and cells (<td>).
The vertical-align Property determines how text is positioned vertically within the cell. You can set it in individual cell styles or through CSS classes.

Example: Below is an example to align text using vertical alignment:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Vertical Align Text</title>
    <style>
        th,
        td {
            padding: 20px;
            border: 1px solid #000;
        }

        .top-align {
            vertical-align: top;
            background-color: #f1f1f1;
        }

        .middle-align {
            vertical-align: middle;
            background-color: #f9f9f9;
        }

        .bottom-align {
            vertical-align: bottom;
            background-color: #e9e9e9;
        }
    </style>
</head>

<body>

    <table>
        <thead>
            <tr>
                <th>Top Aligned</th>
                <th>Middle Aligned</th>
                <th>Bottom Aligned</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="top-align">Top Floor are GFG</td>
                <td class="middle-align">Middle Floor are GeeksforGeeks</td>
                <td class="bottom-align">Bottom Floor are GeeksforGeeks Rest Area</td>
            </tr>
        </tbody>
    </table>

</body>

</html>

Output:

Align Text in Specific Columns or Rows

To align text differently in specific columns or rows of a table, you can use CSS classes targeted at those specific elements. This method provides flexibility in how you present data, especially when dealing with a mix of text and numbers.

Create an HTML table with rows (<tr>) and cells (<td>), ensuring that each column is clearly defined.
Create specific CSS classes for the text alignment you want in different columns or rows. For example, you might have a class for center alignment and another for right alignment.
Center Aligning a Column: Use a class to center-align text in a specific column, like the "Price" column.
Right Aligning a Column: Apply a class to right-align text in another column, such as the "Quantity" column.

Example: Below is an example to align text in specific columns or rows.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>Align Specific Columns</title>
    <style>
        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            padding: 10px;
            border: 1px solid #000;
        }

        .right-align {
            text-align: right;
        }

        .center-align {
            text-align: center;
        }
    </style>
</head>

<body>

    <table>
        <thead>
            <tr>
                <th>Item</th>
                <th class="center-align">Price</th>
                <th class="right-align">Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Onion</td>
                <td class="center-align">$2</td>
                <td class="right-align">5</td>
            </tr>
            <tr>
                <td>Potato</td>
                <td class="center-align">$3</td>
                <td class="right-align">10</td>
            </tr>
        </tbody>
    </table>

</body>

</html>