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

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>

Output:

Using-text-align-property — Align right in a table cell Using text-align property Example output

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

M

meetgor

Improve

Article Tags :

Similar Reads

How To Set Alternate Table Row Color Using CSS?

To set alternate table row colors, we can use the :nth-child() pseudo-class in CSS. This technique helps improve the readability of a table by making it easier to differentiate between rows. In this article, we'll cover how to set alternate row colors using the :nth-child() pseudo-class and provide

How to create table cell using HTML5 ?

In this article, we will create cell in a table by using a combination of <tr> and <td> tag in a HTML table. Syntax: <table> <tr> <td> . . . </td> <td> . . . </td> </tr> </table> Example: html <!DOCTYPE html> <html> <head>

How to make a Animated Table using HTML and CSS ?

Table is an arrangement of data in rows and columns, or possibly in a more complex structure. Tables are widely used in communication, research, and data analysis. In this article, we are going to create a Table with animation over its columns. We are going to implement it using HTML and CSS. Approa

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

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: I

How to Center an Image using text-align Property in CSS ?

Aligning an image horizontally within a container can sometimes be challenging. In this article, we will explore how to center an image using the text-align property in CSS. Understanding the text-align PropertyThe text-align property in CSS is used to specify the horizontal alignment of text within

How to define a table caption using HTML ?

In this article, we define a table caption by using the <caption> tag element. The caption element is used to specify the caption of a table. This tag will be inserted just after the table tag. Only one caption can be specified for one table. It is by default aligned to the center. Syntax:

How to prevent text in a table cell from wrapping using CSS?

Preventing text from wrapping in a table cell ensures the content stays on one line, maintaining the layout's integrity. Using the CSS property white-space: nowrap;, you can control text behavior, avoiding unwanted line breaks within table cells.Syntax:white-space: normal|nowrap|pre|pre-wrap|pre-lin

How to arrange text in multi columns using CSS3 ?

In many websites, content is often displayed in parallel stacks to present more information in a compact space, similar to how newspapers and books are formatted. This pattern helps display large amounts of content in a small area, making it easier to read. In this article, we will learn how to arra

How to create Right Aligned Menu Links using HTML and CSS ?

The right-aligned menu links are used on many websites. Like hotels website that contains lots of options in the menu section but in case of emergency to make contact with them need specific attention. In that case, you can put all the menu options on the left side of the navigation bar and display

How to Align Images Side By Side using CSS ?

Images side by side means placing multiple images in a single row next to each other. This arrangement shows images in a horizontal line, making it great for photo galleries, and comparing pictures. To align images side by side using CSS, we can use flexbox or grid for layout.Table of ContentUsing t