How toTech

How to center a table in HTML?

Center Table HTML: Similar to the image/text in HTML, you can also center a table. This is done pretty simply by using the old conventional method but now it is no longer supported. In this article, we will get to learn how to center a table in HTML.

Although you cannot center the entire table by using the align center tool, you can adjust the text in rows and columns. If you are in need of centering the entire table to center then you need to set the left and right ends margins to auto. This auto function is nothing but it adjusts automatically the left and right ends of the table. Below, we will get to know both the old and new ways of adjusting table alignment to center. One is the old align tool method and the other is CSS.

Center Table HTML

There are now two methods to center a table in HTML. One is the old conventional method and the other is the one which is now being currently used and supported in HTML 5. We will go through both of the methods using relevant examples.

Using Align Attribute

The align attribute specifies the alignment of a table according to surrounding text. Normally, an HTML table will have a break before and after it. The align attribute allows other HTML elements to wrap around the table. It is supported by every browser on net while in use. The syntax of the align attribute is as follows,

<table align="left|right|center"> 

The description of the parameters in the above syntax is as follows,

ValueDescription
leftLeft aligns the table
rightRight aligns the table
centerCenter aligns the table


Here is a basic example that can help you get a clearer idea about the above syntax and the align attribute. In the below example, we have right aligned the table. You can use the center option to align the table to the center.

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

<table align="right">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

<p>The align attribute allows text to be wrapped around the table.</p>
<p>The align attribute is not supported in HTML 5. Use CSS instead.</p>

</body>
</html>

The output of the above illustrated HTML script is as follows,

Centering a table using align attribute
Align attribute output

Using CSS

There are three methods you can use in CSS to align your table to the center. Follow them below,

Method 1

To center a table, you need to set the margins, like this:

table.center {     
margin-left:auto;
margin-right:auto;
}

and then you need to do this,

<table class="center">     
...
</table>

At this point, Mozilla and Opera will center your table. Internet Explorer 5.5 and up, however, needs you to add this to your CSS as well:

  body {text-align:center;} 

Method 2

If you want your table to be a certain percentage width, you can do this:

 table#table1 {     
width:70%;
margin-left:15%;
margin-right:15%;
}

And then in your HTML/XHTML, you would do this:

<table id="table1">
...
</table>

If you had many tables on a page that you wanted to be the same width and centered, you would do this in your CSS:

table.center {     
width:70%;
margin-left:15%;
margin-right:15%;
}

Method 3

If you want your table to be of fixed width, define your CSS like this:

div.container {     
width:98%;
margin:1%;
}
table#table1 {
text-align:center;
margin-left:auto;
margin-right:auto;
width:100px;
}
tr,td {text-align:left;}

Set “width:100px” to whatever width you need. “text-align: center” is there for Internet Explorer, which won’t work without it. Unfortunately, “text-align: center” will center all the text inside your table cells, but we counter that by setting “tr” and “td” to align left.

You can change your font size in HTML. To know more in regard to changing fonts in HTML explore the highlighted link below this text.
How to change Font size in HTML
You can also change the font/text color in HTML. To learn more about this topic refer the highlighted link below this text.
How to change font/text color in HTML

FAQ’s

Before we get to conclude this article, let us go through some of the top relevant FAQ’s on the web in regard to this article. Scroll down below, to know more

How do I align images side by side in HTML?

<IMG SRC=”building.jpg” ALIGN=”right” />This text flows on the left. You can even flow text around an image placed on the left side of the page and then make the text wrap around a different image placed on the right side. In this instance, the break element <B /> and its one attribute, Clear, come into use.

What is overflow in HTML?

The overflow property specifies what should happen if content overflows an element’s box. This property specifies whether to clip content or to add scrollbars when an element’s content is too big to fit in a specified area.

What is margin in CSS?

Margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside something, whereas padding is the space inside something. Change the CSS code for h2 to the following: h2 { font-size: 1.5em; background-color: #ccc; margin: 20px; padding: 40px; }

To conclude: Hence, through this article we have learned how one can center a table in HTML using different methods and relevant examples. If you have any queries in regard to this content comment them below in the comment section. Also, do share the content if you like it. For some more interesting and latest tech news and articles visit Morphigo.com and delve into the most amazing stuff on the web.

How useful was this post?

Click on a star to rate it!

Average rating / 5. Vote count:

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Related Articles

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button
Close