How to Align HTML Tables Using the HTML Attributes Align, Style, and CSS

How to Align HTML Tables Using the HTML Attributes Align, Style, and CSS
Page content

Tables in HTML

Tables are an easy and effective way of displaying information in HTML. Most of the attributes can be adjusted as per the wish of the website designer. However, each browser interprets HTML code in a slightly different way, therefore it is not always possible to predict the outcome of code on every browser. That being said, there are a few fixes that can workaround a few of the glitches. Those will be described in further detail subsequently.

An example of an HTML table, in code, is as follows:

<TABLE border = 2>

<TR><TH>Heading 1</TH><TH>Heading 2</TH></TR>

<TR><TD>Data 1</TD><TD> Data 2</TD></TR>

<TR><TD> Data 3</TD><TD> Data 4</TD></TR>

</TABLE>

Aligning an HTML Table Using the Align Attribute

For aesthetic purposes, a table looks better centered in the middle of the page. The easiest way to achieve this is to use the align attribute in the TABLE tag. However there are two considerations with this method; firstly, most of the browsers will align the table in the center of the webpage as expected. However, some browsers will also interpret the attribute as a command to center all the text in the table as well. While this is not necessarily a bad effect, it may not be what was originally intended. The workaround in this scenario is to add an align attribute to all the table rows, specifying right.

The second consideration is that the use of the align attribute is deprecated, which means that its use is discouraged because it doesn’t follow good programming form. While being a deprecated feature is not an issue immediately, it may mean that the attribute is phased out in future versions of HTML.

In the above example, the code would change as follows:

<TABLE border=2 align = “center”>

Aligning an HTML Table Using the Style Attribute

The style attribute is used to style the table uniformly, including a font family, color and font size, apart from alignment. The alignment function is not as simple as the align attribute, as there are several variables that can accomplish the same result. Three of those variables are margin, margin-right and margin-left, and were originally intended to control the spacing of the table from the surrounding text. The values of the variables are either in pixels (px) or a keyword.

To align the table in the center of the webpage, the keyword “auto” is used as a value for the style attribute variable margin.

An example of the style attribute would be as follows:

<TABLE border=2 style = “margin:auto”>

There are some browsers that do not recognize the style attribute; in that case, the only other option is to use the align attribute mentioned before.

Using CSS to Align HTML Tables

CSS, or cascading style sheets, came about to make styling HTML web pages easier. The styles are defined in the HEAD portion of the web page, and then the style attribute is added to the web page elements. Adding the style attribute to a web page element references the style definition without having to redefine it for every single element. The advantage of having style sheets is to maintain uniformity in web pages.

There are many ways to code CSS to align web page elements, tables or otherwise. It is possible to create a code snippet (class) that aligns elements to the centre, regardless of what the element is; or it is possible to code a CSS class is specifically tailored for tables.

An example of a generic CSS class:

.centrealign

{ margin:auto;

position:absolute;

}

The class is called “centrealign” and, like the style attribute, it centers the web page element using the margin variable. The position variable equally absolute will center the element taking the web browser’s dimensions into consideration.

To assign the CSS class to a web page element, the DIV tag is used, to indicate the starting and end points of where the style should be applied. All the elements that the style is to be applied to are enclosed within the tags. The CSS class is assigned as a value to the class attribute of the DIV tag.

An example of the opening DIV tag, using the CSS class defined earlier: