Html codes for centering table

How to Center the Text in the HTML Table Row

Earlier, it was possible to do this using the align attribute, however, it is deprecated in HTML5. Instead of using that attribute, use the CSS text-align property, or specify it through the inline style attributes.

In this snippet, we’ll show and explain examples with the text-align property and style attribute.

Create HTML

table> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> table>

Add CSS

table, table td < border: 1px solid #cccccc; > td < height: 80px; width: 160px; text-align: center; vertical-align: middle; >

Now, you can see the full example.

Example of centering the text in table row using the CSS text-align property:

html> html> head> style> table, table td < border: 1px solid #cccccc; > td < height: 80px; width: 160px; text-align: center; vertical-align: middle; > style> head> body> table> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> table> body> html>

Result

In our next example, we specify the text-align and vertical-align properties through the style inline attribute.

Example of centering the text in table row using the style attributes:

html> html> head> style> td < height: 80px; width: 160px; > style> head> body> table border="1"> tr> td style="text-align: center; vertical-align: middle;">Text td> td style="text-align: center; vertical-align: middle;">Text td> tr> tr> td style="text-align: center; vertical-align: middle;">Text td> td style="text-align: center; vertical-align: middle;">Text td> tr> table> body> html>

The style attribute overrides the styles set globally. It will override any style set in the tag or external style sheet.

Example of centering only elements:

html> html> head> style> table, table th, td < border: 1px solid #cccccc; border-collapse: collapse; > th, td < height: 80px; width: 160px; padding: 5px 10px; vertical-align: middle; > th < text-align: right; > td < text-align: center; > style> head> body> table> thead> tr> th>Heading th> th>Heading th> tr> thead> tbody> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> tr> td>Text td> td>Text td> tr> tbody> table> body> html>

Источник

CSS Table Alignment

To left-align the content, force the alignment of elements to be left-aligned, with the text-align: left property:

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Example

Vertical Alignment

Firstname	Lastname	Savings
Peter	Griffin	$100
Lois	Griffin	$150
Joe	Swanson	$300

Example

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Center a Table in HTML

1. Set the margin Property to auto to Center a Table in HTML
2. Set the margin Property to Percentage Values to Center a Table in HTML

This article will introduce ways to center a table in HTML.

Set the margin Property to auto to Center a Table in HTML

The most straightforward way to center an HTML table is using the margin property and setting it to auto . This method works for centering all the block elements.

Using the auto value for the margin will take the available horizontal space equally. Consequently, the table takes a certain width, and its left and right margins are equally adjusted.

We can also set the margin property to 0px auto . Here, the 0px value is for the top and bottom margins, and the auto value is for the left and right margins.

The margin property sets a space between the adjacent elements. The property combines the four properties margin-top , margin-right , margin-bottom , and margin-left .

A single value in the margin property resembles the value for these four properties.

For example, create an HTML table with some rows and columns. Set the style attribute to margin:auto for the table tag.

To write the CSS more specifically, you can also write the properties margin-left and margin-right to auto .

Here, we have used the inline CSS to achieve the centering of a table in HTML.

table border=1 style="margin:auto">  tr>  th>Countryth>  th>Continentth>  th>Capitalth>  tr>  tr>  td>Nepaltd>  td>Asiatd>  td>Kathmandutd>  tr>  tr>  td>Spaintd>  td>Europetd>  td>Madridtd>  tr>  table> 

Set the margin Property to Percentage Values to Center a Table in HTML

We can also center a table in HTML using the percentage value in the margin property. The concept behind this approach is dividing the horizontal viewport of the screen into three sections.

They are the left margin, right margin, and the table’s width. We can set a specific width of the table in percentage.

Next, we can equally divide the remaining length of the viewport and set the left and right margin, respectively.

For example, set the following properties in the style attribute in the table tag. Set the width property to 50% and the margin-left and margin-right properties to 25% .

As a result, the table will take half of the width of the horizontal viewport of the screen. The remaining space is equally adjusted to the left and the right margins.

Thus, we can center the table in HTML.

table border=1 style="width:50%; margin-left: 25%; margin-right: 25 %;">  tr>  th>Countryth>  th>Continentth>  th>Capitalth>  tr>  tr>  td>Nepaltd>  td>Asiatd>  td>Kathmandutd>  tr>  tr>  td>Spaintd>  td>Europetd>  td>Madridtd>  tr>  table> 

Источник