How to Align Right in a Table Cell using CSS ?

Last Updated : 16 Oct, 2024

Aligning right in a table cell means positioning the content of the cell to the right side. In CSS, this can be achieved by applying the text-align property to the table cell or using the td selector.

Align right in a table cell Using text-align property

To align the contents of a table cell to right, we can use the text-align property in CSS. we Apply text-align: right; to the <td> element or its parent <table>. The cells which will be the table data can be styled using the text-align property to right and that will result in the desired solution.

Syntax

text-align: property_value;

Example: In this table, the text-align: right; property is applied to <td> elements, ensuring that all data inside the table cells (such as prices and durations) is aligned to the right.

HTML

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

<head>
    <meta charset="UTF-8">
    <title>Table Example</title>
    <style>
        table,
        td,
        th {
            border: 1px solid;
            padding: 20px;
        }

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

<body>
    <table>
        <tr>
            <th>Course Name</th>
            <th>Price</th>
            <th>Duration</th>
            <th>Mentor</th>
        </tr>
        <tr>
            <td>DSA Basics</td>
            <td>300</td>
            <td>12 hours</td>
            <td>John</td>
        </tr>
        <tr>
            <td>Operating System Fundamentals</td>
            <td>500</td>
            <td>15 hours</td>
            <td>Smith</td>
        </tr>
        <tr>
            <td>Advanced DSA</td>
            <td>1000</td>
            <td>25 hours</td>
            <td>Chris</td>
        </tr>
        <tr>
            <td>Networking Fundamentals</td>
            <td>500</td>
            <td>10 hours</td>
            <td>James</td>
        </tr>
        <tr>
            <td>Android Development</td>
            <td>2000</td>
            <td>30 hours</td>
            <td>Kevin & Pat</td>
        </tr>
    </table>
</body>

</html>