Log in

View Full Version : tableless design


Chadi
09-13-2007, 06: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.
Twey
09-14-2007, 05:16 AM
The first block of code is actually tabular data, and it would be wrong not to use a table for it. The customer testimonial can be done like so:
<h3 class="style9">Customer Testimonial</h3>
<p 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.</p>Note that "style9" and "style15" are not semantic names for your classes. A class should be described by the thing it styles, e.g. you could call style9 "customer-testimonial-header" and style15 "customer-testimonial". Also, my use of <h3> assumes that you already have an <h1> and <h2> on the page somewhere (usually the site title and page title). Use the first available header (but if you don't have an <h1> already, you're doing something wrong).
This is my doctype..Transitional DOCTYPEs are outdated (by about ten years) and XHTML is not yet supported by IE -- not a good combination. Upgrade to HTML 4.01 Strict:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
boogyman
09-14-2007, 01:40 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>_YOUR_PAGE_TITLE_</title>
<style type="text/css">
table {
margin-bottom: 3em;
width: 100%;
border-collapse:collapse;
}
tr.headings {
height: 30px;
background: #1bd;
}

table tr th, table tr td {
height: 24px;
text-align: center;
border: 1px solid #000;
}
th.lft, td.lft {
text-align: left;
}
</style>
</head>

<body>

<table>
<tr class="headings">
<th class="lft">Package Details</th>
<th>Starter</th>
<th>Network</th>
<th>Business</th>
<th>Ultimate</th>
</tr>
<tr>
<td class="lft">Monthly</td>
<td>$20</td>
<td>$30</td>
<td>$40</td>
<td>$50</td>
</tr>
<tr>
<td class="lft"><strong>Yearly (2 months free)</strong></td>
<td>$200</td>
<td>$300</td>
<td>$400</td>
<td>$500</td>
</tr>
<tr>
<td class="lft">Setup Fee</td>
<td>FREE</td>
<td>FREE</td>
<td>FREE</td>
<td>FREE</td>
</tr>
<tr>&nbsp;</tr>
<tr class="headings">
<th class="lft">Account Features</th>
<th>Starter</th>
<th>Network</th>
<th>Business</th>
<th>Ultimate</th>
</tr>
<tr>
<td class="lft">Host Domains</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td class="lft">Disk Space</td>
<td>10 GB</td>
<td>15 GB</td>
<td>20 GB</td>
<td>30 GB</td>
</tr>
<tr>
<td class="lft">Traffic/Bandwidth</td>
<td>300 GB</td>
<td>500 GB</td>
<td>750 GB</td>
<td>1,000 GB</td>
</tr>
<tr>
<td class="lft">MySQL&nbsp; / PostgreSQL Databases</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td class="lft">FTP Accounts</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td class="lft">Dedicated IP Address</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td class="lft">Daily Backup</td>
<td><img src="../images/yes.gif" width="16" height="16" alt="Yes"></td>
<td><img src="../images/yes.gif" width="16" height="16" alt="Yes"></td>
<td><img src="../images/yes.gif" width="16" height="16" alt="Yes"></td>
<td><img src="../images/yes.gif" width="16" height="16" alt="Yes"></td>
</tr>
<tr>
<td class="lft">Private Label Nameservers</td>
<td><img src="../images/yes.gif" width="16" height="16" alt="Yes"></td>
<td><img src="../images/yes.gif" width="16" height="16" alt="Yes"></td>
<td><img src="../images/yes.gif" width="16" height="16" alt="Yes"></td>
<td><img src="../images/yes.gif" width="16" height="16" alt="Yes"></td>
</tr>
<tr>
<td class="lft">&nbsp;</td>
<td>
<a href="/order.php?plan=1"><img src="../images/order.gif" width="" height="" alt="Order Now!"></a>
</td>
<td>
<a href="/order.php?plan=2"><img src="../images/order.gif" width="" height="" alt="Order Now!"></a>
</td>
<td>
<a href="/order.php?plan=3"><img src="../images/order.gif" width="" height="" alt="Order Now!"></a>
</td>
<td>
<a href="/order.php?plan=4"><img src="../images/order.gif" width="" height="" alt="Order Now!"></a>
</td>
</tr>
</table>

<h3>Customer Testimonial</h3>
<p>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.</p>

</body>
</html>


The only recommendation I might have opposed to Twey's is to blockquote the Customer Tutorial and add the customer who said it? but thats up to you.. something like


<h3>Customer Testimonial</h3>
<blockquote>
<q class="testimonial">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.</q>
<q class="author">&mdash; Joseph Smith</q>
</blockquote>

then you just add this to your style sheet


blockquote {
quotes: none;
background: #cecece url("/images/quote-begin.gif") no-repeat top left;
}
blockquote q {
display: block;
}
q. content {
text-indent: 10px;
}
q.author {
quotes: none;
text-align: right;
background: inherit url("/mages/quote-end.gif") no-repeat bottom right;
}


blockquote inheritly has some styles put on them and they are ideal for short citations from a person. the style ensures the content and the customer name are on their own line, and after adding the classes to each you can style them up further, like putting in your own quotations etc.

See Example (http://dividinglimits.com/examples/hosting.html)
Twey
09-14-2007, 02:09 PM
The only recommendation I might have opposed to Twey's is to blockquote the Customer TutorialActually, that's a better idea than my paragraph, yes. The <q> element, however, isn't appropriate here -- it's meant for inline quotations. You can use a <p> within the <blockquote>.
q. content {There is no q.content...
text-indent: 10px;Mind the pixels.
boogyman
09-14-2007, 02:33 PM
i tried to edit it... but it wouldn't let me. i picked up on that when i initially posted it...

also note... i am having difficulties with my ftp, so dont follow the example link

that block of code is supposed to be this


blockquote {
quotes: none;
background: #cecece url("/images/quote-begin.gif") no-repeat top left;
padding: 2%; /* creates a buffer around the text */
}
blockquote p {
display: block;
}
p.testimonial {
text-indent: 5%;
}
p.author {
text-align: right;
background: inherit url("/images/quote-end.gif") no-repeat bottom right;
}
Twey
09-14-2007, 02:50 PM
I usually prefer ems for text-indents. To each their own, though.