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