In this article, we will see how to align the contents of a table in the center. The text-align property in CSS can be used to align the contents of the given container or an element.
To align the contents of a table in the center, we can use the text-align property in CSS. The element table can be styled using the text-align property and the value as center will result in the desired solution. By default the text-align property is set to left, so the contents are aligned to the left, we will override the value of this property to center to align the contents as per our requirement.
Syntax:
text-align: left;Property Value:
|
Values |
Description |
|---|---|
|
initial |
It is the default value. |
|
inherit |
It sets the value to the parent’s element property value. |
|
left |
It align the text to left (default property). |
|
right |
It align the text to the right. |
|
center |
It align the text in the center. |
|
justify |
It stretches the content of an element. |
Example 1:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Centered Table</title>
<style>
table,
td,
th {
border: 1px solid;
padding: 20px;
}
table {
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Countries</th>
<th>Code</th>
<th>Continent</th>
</tr>
<tr>
<td>United States of America</td>
<td>USA</td>
<td>North America</td>
</tr>
<tr>
<td>India</td>
<td>IND</td>
<td>Asia</td>
</tr>
<tr>
<td>China</td>
<td>CHN</td>
<td>Asia</td>
</tr>
<tr>
<td>Russian Federation</td>
<td>RUS</td>
<td>Asia</td>
</tr>
<tr>
<td>United Kingdom</td>
<td>UK</td>
<td>Europe</td>
</tr>
<tr>
<td>France</td>
<td>FRA</td>
<td>Europe</td>
</tr>
</table>
</body>
</html>
|
Output:
Example 2:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<style>
h1{
color: green;
text-align: center;
}
table {
margin: auto;
border-collapse: collapse;
}
td {
border: 1px solid black;
padding: 10px;
justify-content: center;
text-align: center;
align-items: center;
}
</style>
<title>GeeksforGeeks</title>
</head>
<body>
<h1 style="">
GeeksforGeeks
</h1>
<table>
<tr>
<td>R1, C1</td>
<td>R1, C2</td>
<td>R1, C3</td>
</tr>
<tr>
<td>R2, C1</td>
<td>R2, C2</td>
<td>R2, C3</td>
</tr>
<tr>
<td>R3, C1</td>
<td>R3, C2</td>
<td>R3, C3</td>
</tr>
</table>
</body>
</html>
|
Output: