SEO Blog

You were wondering the same thing as me. Yes it does work for three columns.

• Andrew Miles
• Anil Batra
• Aurélie Pols
• Avinash Kaushik
• Bill Tancer
• Chris Furlong
• Clinton Ivy
• Eric Peterson
• Gary Angel
• Heather Hopkins

• Ian Thomas
• Jacques Warren
• Jeff Gills
• Jeff Lawrence
• Jim Novo
• Jonathan Mendez
• Justin Cutroni
• Judah Phillips
• LeeAnn Prescott
•  

• Manoj Jasra
• Marshall Sponder
• Matt Belkin
• Matt Jacob
• Neil Mason
• Pat McCarthy
• Robbin Steif
• Sandra Hanchard
• Stéphane Hamel
•  

Here is the code.

<ul style=”float: left; padding: 0 50px 0 0;”>
<li><a href=”http://www.ga-experts.co.uk”>Andrew Miles</a></li>
<li><a href=”http://webanalysis.blogspot.com”>Anil Batra</a></li>
<li><a href=”http://webanalytics.wordpress.com”>Aurélie Pols</a></li>
<li><a href=”http://www.kaushik.net”>Avinash Kaushik</a></li>
<li><a href=”http://weblogs.hitwise.com/bill-tancer/”>Bill Tancer</a></li>
<li><a href=”http://www.trackingtechniques.com”>Chris Furlong</a></li>
<li><a href=”http://blog.instantcognition.com”>Clinton Ivy</a></li>
<li><a href=”http://blog.webanalyticsdemystified.com”>Eric Peterson</a></li>
<li><a href=”http://semphonic.blogs.com”>Gary Angel</a></li>
<li><a href=”http://weblogs.hitwise.com/heather-hopkins/”>Heather Hopkins</a></li>
</ul>

<ul style=”float: left; padding: 0 50px 0 0;”>
<li><a href=”http://www.liesdamnedlies.com”>Ian Thomas</a></li>
<li><a href=”http://www.waomarketing.com”>Jacques Warren</a></li>
<li><a href=”http://analytics.blogspot.com”>Jeff Gills</a></li>
<li><a href=”http://www.sonicko.com”>Jeff Lawrence</a></li>
<li><a href=”http://blog.jimnovo.com”>Jim Novo</a></li>
<li><a href=”http://www.optimizeandprophesize.com”>Jonathan Mendez</a></li>
<li><a href=”http://www.epikone.com”>Justin Cutroni</a></li>
<li><a href=”http://judah.webanalyticsdemystified.com”>Judah Phillips</a></li>
<li><a href=”http://weblogs.hitwise.com/leeann-prescott/”>LeeAnn Prescott</a></li>
<li>&nbsp;</li>
</ul>

<ul>
<li><a href=”http://manojjasra.blogspot.com”>Manoj Jasra</a></li>
<li><a href=”http://www.webmetricsguru.com”>Marshall Sponder</a></li>
<li><a href=”http://www.omniture.com”>Matt Belkin</a></li>
<li><a href=”http://www.digitalmediaanalytics.com”>Matt Jacob</a></li>
<li><a href=”http://www.applied-insights.co.uk”>Neil Mason</a></li>
<li><a href=”http://www.conversionrater.com”>Pat McCarthy</a></li>
<li><a href=”http://lunametrics.blogspot.com”>Robbin Steif</a></li>
<li><a href=”http://weblogs.hitwise.com/sandra-hanchard/”>Sandra Hanchard</a></li>
<li><a href=”http://blog.immeria.net”>Stéphane Hamel</a></li>
<li>&nbsp;</li>
</ul>

It displays fine on all Windows browsers.

I have been hand coding all my sites for almost 3 years now. While I have not subscribed to the “tables are evil” mantra like some HTML wiens I am more than willing to put my presentation in CSS and keep tables for tabular data.

When it comes to blogging one the first things I do when I set up a WordPress blog is turn off the visual editor. And the next thing I do is turn it off for every one else. Have you ever looked that the HTML that MS Word produces — it bothers me. In my opinion every one needs to know enough HTML to place an image, a link, to bold, to make a list and perhaps a few other things.

So I have this long list of 24 bloggers names and I wanted to put them into two columns so I did it fast and easy using tables. Tables are set up using the table tag <table></table>, then a table row tag <tr></tr>, and inside the table row tag you put one more more table data cells <td></td>. It lookes like this.

<table>
<tr><td>first row first column</td><td>first row second column<td></tr>
<tr><td>second row first column</td><td>second row second column<td></tr>
</table>

Here is how the code will display the two rows.

Now this can be considered tabular data and I am not that much of a perfectionist that I feel like I have to go out of my way just to have table-less code.

I did a post last week of Web analytics bloggers and put them in two columns using tables and listed them alphabetically by first name. Every things was fine until I want to add addtional names to the list. Tables holds data in rows not in columns. When you want to add an additional name by alphabet you have move each name from the above row to the row below.

I only had to do that two or three times and I figured I need to find a better way to do this.

I took the 24 names that I had and put them into two different lists using the unordered list <ul></ul> and list item <li></li> tags. Then I used some CSS code and had one list float to the left and vola, it was done.

<ul style=”float: left; padding: 0 100px 0 0;”>
<li>first row first column</li>
<li>second row first column</li>
<ul>
<ul>
<li>first row second column</li>
<li>second row second column</li>
</ul>

The above code displays like this.

• first row first column
• second row first column

• first row second column
• second row second column

So now it is very easy to handle my two rows of 24 blogger names with ease.

Here is what the code looks like.

<ul style=”float: left; padding: 0 100px 0 0;”>
<li><a href=”http://www.ga-experts.co.uk”>Andrew Miles</a></li>
<li><a href=”http://webanalysis.blogspot.com”>Anil Batra</a></li>
<li><a href=”http://webanalytics.wordpress.com”>Aurélie Pols</a></li>
<li><a href=”http://www.kaushik.net”>Avinash Kaushik</a></li>
<li><a href=”http://weblogs.hitwise.com/bill-tancer/”>Bill Tancer</a></li>
<li><a href=”http://www.trackingtechniques.com”>Chris Furlong</a></li>
<li><a href=”http://blog.instantcognition.com”>Clinton Ivy</a></li>
<li><a href=”http://blog.webanalyticsdemystified.com”>Eric Peterson</a></li>
<li><a href=”http://semphonic.blogs.com”>Gary Angel</a></li>
<li><a href=”http://weblogs.hitwise.com/heather-hopkins/”>Heather Hopkins</a></li>
<li><a href=”http://www.liesdamnedlies.com”>Ian Thomas</a></li>
<li><a href=”http://www.waomarketing.com”>Jacques Warren</a></li>
<li><a href=”http://analytics.blogspot.com”>Jeff Gills</a></li>
<li><a href=”http://www.sonicko.com”>Jeff Lawrence</a></li>
</ul>

<ul>
<li><a href=”http://blog.jimnovo.com”>Jim Novo</a></li>
<li><a href=”http://www.optimizeandprophesize.com”>Jonathan Mendez</a></li>
<li><a href=”http://www.epikone.com”>Justin Cutroni</a></li>
<li><a href=”http://judah.webanalyticsdemystified.com”>Judah Phillips</a></li>
<li><a href=”http://weblogs.hitwise.com/leeann-prescott/”>LeeAnn Prescott</a></li>
<li><a href=”http://manojjasra.blogspot.com”>Manoj Jasra</a></li>
<li><a href=”http://www.webmetricsguru.com”>Marshall Sponder</a></li>
<li><a href=”http://www.omniture.com”>Matt Belkin</a></li>
<li><a href=”http://www.digitalmediaanalytics.com”>Matt Jacob</a></li>
<li><a href=”http://www.applied-insights.co.uk”>Neil Mason</a></li>
<li><a href=”http://www.conversionrater.com”>Pat McCarthy</a></li>
<li><a href=”http://lunametrics.blogspot.com”>Robbin Steif</a></li>
<li><a href=”http://weblogs.hitwise.com/sandra-hanchard/”>Sandra Hanchard</a></li>
<li><a href=”http://blog.immeria.net”>Stéphane Hamel</a></li>
</ul>

And here is how it displays.

• Andrew Miles
• Anil Batra
• Aurélie Pols
• Avinash Kaushik
• Bill Tancer
• Chris Furlong
• Clinton Ivy
• Eric Peterson
• Gary Angel
• Heather Hopkins
• Ian Thomas
• Jacques Warren
• Jeff Gills
• Jeff Lawrence

• Jim Novo
• Jonathan Mendez
• Justin Cutroni
• Judah Phillips
• LeeAnn Prescott
• Manoj Jasra
• Marshall Sponder
• Matt Belkin
• Matt Jacob
• Neil Mason
• Pat McCarthy
• Robbin Steif
• Sandra Hanchard
• Stéphane Hamel

The next thing you want to do is to check the page to make sure it is w3c validated and then test it in on Windows, Mac, and *nix browsers to make sure you code is cross browser compatible.

I checked this code on IE 6/7, Firefox 1.5/2.0, Mozilla 1.7, Netscape 8.1, Opera 9.2, on Windows. Its 6:37am so I will test it on the Mac and *nix later.