html

CSS Center Table

“In this article, we will look at numerous diverse ways that CSS style attributes could be used to centrally align a table in the Hypertext Markup language. The margin property is the most common property used to align a table. This property can be used with several different values and functions like the auto function. We will discuss several examples related to this property and implement them as well in this article.”

Example 01: Creating a Table at the Center of the Webpage Using the Style Tag CSS in an HTML File

In this instance, we will be creating a table that will be aligned to the center of the webpage. The style tag CSS method will be utilized in this case. The margin property will be used in this example to centrally align a table on our browser.

Text Description automatically generated

In this script, we will be opening the head tag first. In the head tag, we will open the CSS style tag. In the style tag, we will give the table and its elements some styling properties. First will be the border size, form, and color; then, we will give it some padding. At the end of the style tag, we will assign the “margin” property and then close the style and head tag. After this, we will be opening the body tag, in which we will create our table using the table tag. Inside the table tag, we will be giving it two sets of rows. In the first row, the “th” tag will be used, which will assign the heading of the table’s column. Then we will create the second row with the “tr” tag and give this row some data for the columns by using the “td” tag.

Graphical user interface, application, Word Description automatically generated

As we can see in the output above, the table is aligned to the center of the page due to the margin auto property that was assigned in the header of the file.

Example 02: Using inline CSS Technique to Align a Table in the Center of an HTML Page

In this example, we will be using the margin property with the auto function, which will align the table to the center of the webpage. The inline CSS approach will be used in this example to achieve the objective.

A picture containing text Description automatically generated

In this script, we will start directly from the body tag. We will start with the h1 tag to give the page a heading. Then we will start the table tag in which we will give the style call and give it a border with its form, size, and color as the property. Then we will give the table some padding, and the margin property with the auto function will be called. The “tr” tag will then be used to add two rows to the table. We will use the “th” tag to give the column of the table names and the “td” tag to assign data to the second row of the table. The inline CSS style keyword will be applied to both the “th” and “td” tags to provide stylistic features to the table components independently. The styling properties include the border with form, size, color, and padding.

Table Description automatically generated with low confidence

After saving the previous script and opening it on any browser of your choice, we will get the overhead output. As we can see that we have successfully aligned the table with the center of the page using the inline CSS approach.

Example 03: Using margin-left and margin-right CSS Properties to Align a Table to the Center of the Page in an HTML File

In this example, the style tag CSS approach will be used. Here, we will create a table that will be centered on the page. The margin property will be separated into two pieces, left and right, which will then be utilized to centrally align a table on our browser’s page in this example.

Text, timeline Description automatically generated with medium confidence

The head tag will be opened first in this script. The CSS style tag will be opened in the head tag. We will give the table and its parts some stylistic characteristics with the style tag. The border size, shape, and color will come first, followed by padding. After the style tag, we will assign the “margin-right” and “margin-left” properties and give them percentage values before closing the style and head tags. Following that, we will open the body tag and begin by providing the page a header by using the h1 tag. The table tag will then be used to construct our table. We will give it two sets of rows within the table tag.

The “th” tag will be used in the first row to assign the heading of the table’s column. Then, using the “tr” tag, we’ll create the second row and use the “td” tag to populate the columns with data. Following that, we will close all of the tags and save the file to preserve the modifications that will be displayed on our browser, as seen below:

Table Description automatically generated with medium confidence

The table is aligned to the middle of the page, as shown in the output above, because of the margin-left and margin-right properties set in the file’s header.

Example 04: Using margin-left and margin-right CSS Properties With the Auto Function to Align a Table to the Center of the Page

In this example, the style tag CSS approach will be used. Here, we’ll make a table that exists in the center of the page. The margin property will be divided into two sections, left and right, which will then be used to centrally align a table in our example by using the auto feature on our browser’s page.

Text Description automatically generated with medium confidence

In this script, the head tag will be opened first. In the head tag, the CSS style tag will be opened. With the style tag, we will give the table and its components some stylistic qualities. The padding will come after the border size, shape, and color. Before closing the style and head tags, we will add the “margin-right” and “margin-left” properties after the style tag and give them the auto function as their value. The table tag will be utilized to build our table.

Within the table tag, we will give it two sets of rows. The “th” tag will be used in the first row to give the column heading to the table. Then, using the “tr” tag, we will construct the second row, and the “td” tag will be used to populate the columns with data. Following that, we will close all of the tags and save the file to preserve the changes that will be visible in our browser.

Table Description automatically generated with medium confidence

Because the margin-left and margin-right values in the file’s header are set to auto, the table is aligned to the center of the page, as shown in the output above.

Conclusion

We discussed numerous methods that CSS provides to align a table in the center of a webpage in this article. The margin property was explored and implemented in the Hypertext Markup Language to accomplish this phenomenon. We used the margin property with several different properties assigned, like auto function and percentage values, to align the table in the center. We implemented all the examples on the Notepad++ IDE in this article.

About the author

Aqsa Yasin

I am a self-motivated information technology professional with a passion for writing. I am a technical writer and love to write for all Linux flavors and Windows.