How to align right in a table cell using CSS ?
Last Updated :
25 May, 2022
In this article, we will be demonstrating how to align the data in the table cell to the right text-align property in CSS can be used to align the contents of the data in a given element.
Approach: To align the contents of a table cell to right, we can use the text-align property in CSS. 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;
Property Value:
- initial: It is the default value.
- inherit: It sets the property value from its parent element.
- left: It align the text to the left side (default property).
- right: It align text to the right side.
- center: It align the text to the center.
- justify: It stretches the content of an element.
Example: We will first create an HTML template with the table element and add the data to the table rows and columns.
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:
Here, we can see that the table cell elements are aligned to the right. We are not aligning the header i.e. the column names, so we use the td or table data as the reference container for specifying and modifying the properties of the style. The contents of the cell are aligned with the text-align property and set to the right to align the contents to the right side.
Extra styles like the border have been set for visualizing the alignment with the border and also adding padding for scaling in the table view a bit more and being able to see the align property in a better way.
So, this is how we can set the alignment of the table cells in HTML using CSS.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...