Centering an HTML table with CSS

As you may have noticed, the table align=”center” attribute has been deprecated. So how is one supposed to center a table in an HTML page? The answer is with CSS. However, this is not as straight forward as you would think. Basically we now need to inform the browser to put the same amount of empty space on either side of our tables. Here is how to do it:

The inline method

<table style="margin:auto;">

Or if you are using an attached stylesheet you can do it with either classes or the ID method, or by further defining the table tag.

Here are some lines from a CSS stylesheet showing all three methods (you only need to use one of them, so choose what works best for you)

/* this will define the table tag */
table { margin:auto }
 
/* this will define an ID to assign the style to */
# table_align { margin:auto }
 
/* and lastly this is a css class that can be used */
.table_align { margin:auto }

Now, here is the html to make use of these three methods

<table class="table_align" id="table_align">

NOTE: Using “margin:auto” is a bit of overkill since it is basically affecting the margin on all 4 sides of the table in some way. You could center the table more precise by using the margin-left:auto and margin-right:auto and setting two properties in CSS. However, I usually find that the regular margin:auto generally does the job when the top and bottom are not a concern.

Unfortunately IE (Internet Explorer) once again is different and chooses not to recognize any of the methods above. So you will be forced to do one of two things.

  1. Add the margin:auto style to your “body” tag OR
  2. Resort to still using the align=”center” attribute for your tables to satisfy IE

Examples:

<body style="margin:auto">
 
<table align="center">

I do not like the previous two examples, but sometimes you gotta do what it takes to reach your entire audience.

Background image generator – BgPatterns.com

After Ian posted this on his blog I thougth I would follow suit. (He always seems to find the cool stuff.)

This very nifty site allows you to create tiled background images for use wherever you may need them. At first I thought “yuck, I stopped using backgrounds long ago”. But after playing with rotation, colors, and opacity I found that a pretty nice tiled background can be useful when applied right.

It is very difficult to do a good job on tiled backgrounds, but this site makes it easy.
www.BgPatterns.com

Javascript disable right click and image tool bar

A recent request from a client was to make life more difficult for his competitors to steal images from his site. He was worried that they could save the images using the Image Toolbar in newer versions of Internet Explorer, and by using the right click menu on the page. For those of you that wish to stop the right clickers from stealing your code, or from stealing images, here is a quick and easy way to make life more difficult for them.

To disable the Internet Explorer Image Toolbar for an entire page add this meta tag:

<meta http-equiv="imagetoolbar" content="no">

To disable the Internet Explorer Image Toolbar for an individual Image do this:

<img src="image.gif" width="250" height="250" galleryimg="no>

Now to handle those who love their “right-click”. For the entire page:

<body oncontextmenu="return false">

And for individual images:

<img src="image.gif" width="250" height="250" oncontextmenu="return false">

CSS style sheet switcher using Prototype

A recent project had a requirementfor a style switcher allowing a visitor to control font size on the site as needed. (Many do not know how to change it through a browser, and most sites are not designed to allow for font size changes without completely trashing presentation.)

Because the project in question was a dynamic site I wanted to make a style sheet switcher that didn’t force a page reload and it seemed like most examples on the net required a page to reload with a new stylesheet. (After PHP or some other scripting language decided which css sheet to render the page with.) This meant additional calls to the server to repopulate data grids and other info, after re-running a query and parsing in PHP. To me this was truly unacceptable load on a server to simply change font sizes on a page.

Continue reading CSS style sheet switcher using Prototype