PDA

View Full Version : tableless design

chadi
September 13th, 2007, 07:30 PM
I'm designing a site which utilizes mostly css, but I added tables and now I'm deciding against that. Problem is, I have no idea how to get a "table" layout using css/div, etc without actual table html coding.

Could someone *please* take the below table I'm using and convert it to actual css, whatever you use such as <ul> <li> ,etc. A bit of explanation on how it works (multiple columns, 'cell' hover color change) would be really appreciated. I have multiple css tutorial bookmarks but none explain these things.


Below is 5 columns and multiple rows...

<table style="width: 100%">
<tr>
<td style="padding:4px; height: 30px;" class="style5"><strong>
Package Details</strong></td>
<td style="border-bottom:1px solid #C3D3F1; height: 30px;" class="style3"><strong>
Starter</strong></td>
<td style="border-bottom:1px solid #C3D3F1; height: 30px;" class="style3">
<strong>
Network</strong></td>
<td style="border-bottom:1px solid #C3D3F1; height: 30px;" class="style3">
<strong>Business</strong></td>
<td style="border-bottom:1px solid #C3D3F1; height: 30px;" class="style3">
<strong>
Ultimate</strong></td>
</tr>
<tr>
<td style="text-align:left; height: 24px;">Monthly</td>
<td class="style1" style="height: 24px;">$20</td>
<td class="style1" style="height: 24px;">$30</td>
<td class="style1" style="height: 24px;">
$40</td>
<td class="style1" style="height: 24px;">
$50</td>
</tr>
<tr>
<td style="text-align:left; height: 24px;" class="style8"><strong>Yearly (2 months free)</strong></td>
<td style="height: 24px;" class="style8">$200</td>
<td style="height: 24px;" class="style8">$300</td>
<td style="height: 24px;" class="style8">$400</td>
<td style="height: 24px;" class="style8">$500</td>
</tr>
<tr>
<td style="text-align:left; height: 24px;">Setup Fee</td>
<td class="style1" style="height: 24px;">FREE</td>
<td class="style1" style="height: 24px;">FREE</td>
<td class="style1" style="height: 24px;">FREE</td>
<td class="style1" style="height: 24px;">FREE</td>
</tr>
<tr>
<td>&nbsp;</td>
</tr>
<tr>
<td style="padding:4px; height: 30px;" class="style5"><strong>Account Features</strong></td>
<td style="border-bottom:1px solid #C3D3F1; height: 30px;" class="style3"><strong>
Starter</strong></td>
<td style="border-bottom:1px solid #C3D3F1; height: 30px;" class="style3">
<strong>
Network</strong></td>
<td style="border-bottom:1px solid #C3D3F1; height: 30px;" class="style3">
<strong>Business</strong></td>
<td style="border-bottom:1px solid #C3D3F1; height: 30px;" class="style3">
<strong>
Ultimate</strong></td>
</tr>
<tr>
<td style="text-align:left; height: 24px;">Host Domains</td>
<td style="height: 24px;">Unlimited</td>
<td style="height: 24px;">Unlimited</td>
<td style="height: 24px;">Unlimited</td>
<td style="height: 24px;">Unlimited</td>
</tr>
<tr>
<td style="text-align:left; height: 24px;" class="style8">Disk Space</td>
<td style="height: 24px;" class="style8">10 GB</td>
<td style="height: 24px;" class="style8">15 GB</td>
<td style="height: 24px;" class="style8">20 GB</td>
<td style="height: 24px;" class="style8">30 GB</td>
</tr>
<tr>
<td style="text-align:left; height: 24px;">Traffic/Bandwidth</td>
<td class="style1" style="height: 24px;">300 GB</td>
<td class="style1" style="height: 24px;">500 GB</td>
<td class="style1" style="height: 24px;">750 GB</td>
<td class="style1" style="height: 24px;">1,000 GB</td>
</tr>
<tr>
<td style="text-align:left; height: 24px;" class="style8">MySQL&nbsp; / PostgreSQL Databases</td>
<td style="height: 24px;" class="style8">Unlimited</td>
<td style="height: 24px;" class="style8">Unlimited</td>
<td style="height: 24px;" class="style8">Unlimited</td>
<td style="height: 24px;" class="style8">Unlimited</td>
</tr>
<tr>
<td style="text-align:left; height: 24px;">FTP Accounts</td>
<td class="style1" style="height: 24px;">Unlimited</td>
<td class="style1" style="height: 24px;">Unlimited</td>
<td class="style1" style="height: 24px;">Unlimited</td>
<td class="style1" style="height: 24px;">Unlimited</td>
</tr>
<tr>
<td style="text-align:left; height: 24px;" class="style8">Dedicated IP Address</td>
<td style="height: 24px;" class="style8">2</td>
<td style="height: 24px;" class="style8">2</td>
<td style="height: 24px;" class="style8">2</td>
<td style="height: 24px;" class="style8">2</td>
</tr>
<tr>
<td style="text-align:left; height: 24px;">Daily Backup</td>
<td class="style1" style="height: 24px;">
<img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
<td class="style1" style="height: 24px;">
<img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
<td class="style1" style="height: 24px;">
<img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
<td class="style1" style="height: 24px;">
<img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
</tr>
<tr>
<td style="text-align:left; height: 24px;" class="style8">Private Label
Nameservers</td>
<td style="height: 24px;" class="style8">
<img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
<td style="height: 24px;" class="style8">
<img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
<td style="height: 24px;" class="style8">
<img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
<td style="height: 24px;" class="style8">
<img src="../images/yes.gif" width="16" height="16" alt="Yes"/></td>
</tr>
<tr>
<td style="text-align:left; height: 24px;">&nbsp;</td>
<td class="style1" style="height: 24px;">
<img alt="Order Now!" src="../images/order.gif" /></td>
<td class="style1" style="height: 24px;">
<img alt="Order Now!" src="../images/order.gif" /></td>
<td class="style1" style="height: 24px;">
<img alt="Order Now!" src="../images/order.gif" /></td>
<td class="style1" style="height: 24px;">
<img alt="Order Now!" src="../images/order.gif" /></td>
</tr>
</table>




This is 2 rows, one column


<table style="width: 100%">
<tr>
<td class="style9"><strong>Customer Testimonial</strong></td>
</tr>
<tr>
<td class="style15">I spent a good deal of time researching the masses of different hosting
companies until deciding on Company. I have been with them for nearly a year
now and I can't even begin to express how great my experience has been. Not only
do I consider Company to be top notch among hosting companies, but I also
consider them to be top notch among businesses of all types. Company's customer
care towers above ANY organization or company that I have ever dealt with. I am
proud to be with Company and am proud to keep spreading the word about them.</td>
</tr>
</table>


This is my doctype..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



I really appreciate any help. Thanks in advance.
Buzz
September 13th, 2007, 08:07 PM
Tables are fine for tabular data like your first chunk of code. In fact, that's what tables are for.

The second chunk of code could simple be done with an h2 or h tag and a paragraph. No tables needed at all.
chadi
September 13th, 2007, 08:20 PM
So the whole purpose of not using tables is for the page to load faster? Am I correct on this?

Also, regarding the second code, good point. Not sure why I didn't think of that as I'm already using the <h> codes
Buzz
September 13th, 2007, 08:49 PM
The point of not using tables is so the page loads faster and so the site is accessible from any web-capable device. Tables are bad for layout, but they are fine for sorting tabular data. The big disadvantage to tabled layouts is that if you view a site on, say, a cell phone, the tables reduce to show the entire thing. So if you have an 800px wide table used to layout your site that means the entire site will be reduce so the 800px table can be displayed on the phone. The content will not be readable at all. With a CSS layout on a cell phone, the css is killed and just the information is shown. So regardless of where you view the site, all the content can be seen.

Basically, tables for layout = bad. Tables to express data in a tabular form = okay.