View Full Version : Tables

06-04-2007, 02:50 AM
Hi, im having the worst problem with a table. Tables are my weak point. They are so confusing. Here is my messed up coding.

<table width="40%" style="border: solid 1px white" cellspacing="0" cellpadding="0">
<tr><td colspan="4" bgcolor="#ffffff"><center><b>Suggested Item Price</b></center></td></tr>

<table width="40%" style="border: solid 1px white" cellspacing="0" cellpadding="0">
<center><tr><td><b>Item 1</b><td>$1.00</td></tr></td>

And this is what i'd like for it to look like,

I hope to learn by this. Thanks everyone.

06-04-2007, 03:42 AM
Id suggest using css instead of tables.

06-04-2007, 04:01 AM
CSS instead of tables? What kind of advice is that?

CSS doesnít replace tables. Itís there for giving them a style.
Tables are the perfect solution for this kind of content.

This might give you a start.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
table {
width: 300px;
border-bottom: 1px solid black;
border-top: 1px solid black;
margin-top: 10px;
caption {border: 1px solid black;}
thead {}
thead th {margin-bottom: 10px;}
th {text-align: left;}
th + th {text-align: right;}
td + td {text-align: right;}

<table cellspacing="0" cellpadding="0" border="1" rules="groups">
<caption>Suggested Item Price</caption>
<td>Item 1 </td>
<td>$ 1.00 </td>
<td>Item 2 </td>
<td>$ 2.00 </td>
<td>Item 3 </td>
<td>$ 3.00 </td>

Unfortunately itís not so easy to separate the sections visually (to work in all browsers at least). And note: I didnít optimize it for IE 6. Itís just a suggestion for you to build upon.

06-04-2007, 04:21 AM
Excellent, this looks like it would work. If I have any problems ill let you know. Thanks so much

I am going to play with it to learn how to do it.