How to center contents of an HTML table ?

Name: How to center contents of an HTML table ?
Uploaded: 2024-06-10T17:30:21Z
Duration: 3 min 2 s

Last Updated : 20 Nov, 2024

To center content in an HTML table, add text-align: center; CSS for each cell or use align="center" it in the <td> tags. This keeps text in the middle.

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: Center the content of an HTML table.

HTML

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

<head>
    <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

How to fetch data from JSON file and display in HTML table using jQuery ?

meetgor

Improve

Article Tags :

How to center contents of an HTML table ?

Similar Reads

Thank You!

What kind of Experience do you want to share?