Pin Me

How to Align HTML Tables

written by: Karishma Sundaram•edited by: Michele McDonough•updated: 3/30/2010

HTML tables are easy to code, and convenient for a quick display of information. They can be tweaked in number of ways, and one of the design aspects is alignment. There are a number of ways to align HTML tables. This article looks at some of the ways, and the pros and cons of each.

  • slide 1 of 4

    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>

  • slide 2 of 4

    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">

  • slide 3 of 4

    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.

  • slide 4 of 4

    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:

    <DIV class="centrealign">