How To Center Table In HTML? – POFTUT
How To Center Table In HTML?

How To Center Table In HTML?

by

HTML table provides the ability to show text, data, and other elements. While using tables we may want to center the table or table contents to the center. Centering the table and its contents will be centered and look pretty.

Center Table with margin-left and margin-right  Attribute

The first way to make an HTML table center is by using margin-left and margin-right CSS attributes. We can set these attributes as auto or the same value in order to make the table center.

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table style="margin-left:auto; margin-right:auto;">
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td>İsmail</td>
<td>Baydan</td>
</tr>
<tr>
<td>Ahmet Ali</td>
<td>Baydan</td>
</tr>
<tr>
<td>Elif Ecrin</td>
<td>Baydan</td>
</tr>
</table>

</body>
</html>
Center Table with margin-left and margin-right  Attribute
Center Table with margin-left and margin-right  Attribute

Center Table Content with align Attribute

The table HTML element provides an align attribute which will align the table. The align attribute can get right, left and center values. In the following example, we will set the align attribute to the center.

<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>

<table align="center">
<tr>
<th>Name</th>
<th>Surname</th>
</tr>
<tr>
<td>İsmail</td>
<td>Baydan</td>
</tr>
<tr>
<td>Ahmet Ali</td>
<td>Baydan</td>
</tr>
<tr>
<td>Elif Ecrin</td>
<td>Baydan</td>
</tr>
</table>

</body>
</html>
Center Table Content with align Attribute
Center Table Content with align Attribute

LEARN MORE  Hiding Scroll Bar for Internet Explorer, Chrome, Firefox

Leave a Comment