How to use text-align property inside a table in CSS ?

Last Updated : 10 Mar, 2023

Text align is a CSS (Cascading Style Sheets) property that is used to specify the horizontal alignment of text within an HTML element. It is commonly used to align text within a block-level element such as a paragraph, heading, or table cell.

The "text-align" property accepts several values.

left: It aligns the text to the left edge of the element. This will align the text to the left margin of the container that the element is inside, so any extra space will be on the right side
center: It centers the text horizontally within the element.
right: It aligns the text to the right edge of the element. This will align the text to the right margin of the container that the element is inside, so any extra space will be on the left side.
justify: It stretches the lines of text to fill the entire width of the element, creating a clean edge on both sides.
end: This will align the text to the end of the container that the element is inside, so for left-to-right writing systems, it will appear on the right side of the container, and for right-to-left writing systems, it will appear on the left side of the container.
start: You can align the text to the start within that element by applying the "text-align: start" property to it in your CSS.
initial: It is a CSS property that sets the value of the "text-align" property to its initial or default value. The initial value of "text-align" is typically "left", which aligns text or other content to the left side of the container.
inherit: The "inherit" value is useful when you want an element to inherit a specific property from its parent, rather than setting a new value directly. It can make your CSS more efficient and easier to maintain since you don't have to update the same property on multiple elements if you want to change its value.
unset: This is a CSS property that resets the value of the "text-align" property to its default value, which is typically "inherit" or "initial", depending on the specific property.
calc(): The "text-align" property does not accept the "calc()" function as a value.
var(): The "text-align" property does not accept the "var()" function as a value either, but you can use CSS variables with "text-align" indirectly by defining the value of the variable and then using it as the value of the "text-align" property.

Note: You can apply the "text-align" property to individual elements or to a group of elements using a CSS class.

Insert a table using HTML: Let us first create a simple table in HTML.

Step 1: Use the <table> tag to create a table along with several other elements to define the structure and content of the table.

Step 2: The <tr> element defines a row within the table, and the <th> and <td> elements define header and data cells, respectively.

Example 1: The following code demonstrates the different text alignments using the classes. We define four custom classes as ".center", ".left", ".right", and ".justify". The ".center" class centers text within an element, the ".left" class left aligns text within an element, the ".right" class right aligns text within an element, and the ".justify" class sets stretch the lines of text to fill the entire width of the element, creating a clean edge on both sides.

We then apply these custom classes to our table elements. For example, we apply the .center class to the first header cell. We apply the ".left" class to the second header cell, which left-aligns the text "Name" within that cell. We apply the ".right" class to the third header cell, which right-aligns the text "Price" within that cell.

HTML

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

<head>
    <style>
        /* Define custom classes */
        .center {
            text-align: center;
        }

        .left {
            text-align: left;
        }

        .right {
            text-align: right;
        }

        .justify {
            text-align: justify;
        }

        /* Apply custom classes to table elements */
        table {
            border-collapse: collapse;
            width: 50%;
        }

        th,
        td {
            padding: 18px;
            text-align: left;
            border: 1px solid #ddd;
        }

        th {
            background-color: #4CAF50;
            color: white;
        }

        td.center {
            text-align: center;
        }

        td.right {
            text-align: right;
        }

        td.justify {
            font-weight: justify;
        }
    </style>
</head>

<body>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>Text-align class for inside a table</h3>
    <table>
        <thead>
            <tr>
                <th class="center">ID(center-aligned)</th>
                <th class="left">Name(left-aligned)</th>
                <th class="right">Price(right-aligned)</th>
                <th class="justify">Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="center">1</td>
                <td class="left">Product A</td>
                <td class="right ">100</td>
                <td class="justify">34</td>
            </tr>
            <tr>
                <td class="center">2</td>
                <td class="left">Product B</td>
                <td class="right">50</td>
                <td class="justify">56</td>
            </tr>
            <tr>
                <td class="center">3</td>
                <td class="left">Product C</td>
                <td class="right ">200</td>
                <td class="justify">12</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

Output:

Text-align class for inside a table: To align text inside a table cell, you can use the "text-align" property in CSS. You can add this property to the CSS style for the cell, or you can define a class that sets the "text-align" property and apply that class to the appropriate cells. You can see various text-align properties in the following picture.

Example 2: This example uses the "text-align" class to center the content of the "ID" column and right-align the "Salary" column.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Text-align Class Example</title>
    <style>
        table {
            width: 80%;
            margin: 0 auto;
            border-collapse: collapse;
            border: 2px solid green;
        }

        th,
        td {
            padding: 10px;
            text-align: left;
            border: 1px solid green;
            background-color: rgba(255, 255, 255, 0.797);
            color: green;
        }

        .center {
            text-align: center;
        }

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

<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3>Text-align class for inside a table</h3>
    <table>
        <thead>
            <tr>
                <th class="center">ID</th>
                <th class="center">First Name</th>
                <th class="center">Last Name</th>
                <th class="right">Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="center">1</td>
                <td>Isha</td>
                <td>Patel</td>
                <td class="right">$1,50,000</td>
            </tr>
            <tr>
                <td class="center">2</td>
                <td>Ravina</td>
                <td>Rani</td>
                <td class="right">$60,000</td>
            </tr>
            <tr>
                <td class="center">3</td>
                <td>Keshav</td>
                <td>Anthony</td>
                <td class="right">$45,000</td>
            </tr>
        </tbody>
    </table>
</body>

</html>