How to use CSS and invisible HTML tables to align webpage content

Posted on February 7, 2009 at 5:32 am

Alignment issues on your blogs and web pages is a common problem for beginning bloggers. If you need to put columnar content (like a newspaper or magazine presentation) however, you will not have a choice but to use tables. See our example below before and after I formatted the text:

BEFORE:

“But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful.

Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?”

AFTER:

in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?”

Not only that the reformatted format is easier to read, it also maintains the width of the whole thing since you can set a table to occupy only a certain amount of pixels. You can also set the distance of space between the columns to match your needs. So how do we make such a table container?

Simple, insert a table using your HTML editor. Just make sure that you don’t put a value on the BORDER attribute so that the borders are invisible. Let rows be equal to 1 and columns to 2. You can change the rows and columns as you require. In the screenshot below, I used Live Writer but it should be the same principle as in other web editors:

You can see above that I left the border blank and that makes it invisible. If you look at the code of the example table above, I used size 8 pixels of cellpadding and 5 pixels of cellspacing. The border’s value is of course zero.

<table cellspacing="5" cellpadding="8" width="506" border="0">

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, “Courier New”, courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

Then after this, just paste the content inside the cells of the table.

You will need to manually adjust the amount of text inside each cell to balance the amount of text on each one. Adjust the table width, cellpadding and cellspacing parameter values as you desire.

That’s it! You should be able to apply the concept on invisible tables to handle columnar text displays with perfect alignment.