Open In App

How to center contents of an HTML table ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

HTML




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

Screenshot-2023-12-20-133732

Example 2:

HTML




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

Screenshot-2023-12-20-134524



Last Updated : 17 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads