tables

**spyder** · 07-10-2008, 08:51 PM

this is probably a simple thing to do, but its giving me a few issues. i want to make a table that has two rows. the top row should have 2 equal sized columns and the bottom row should have 3 equal sized columns.

thank you very much

**coothead** · 07-10-2008, 10:19 PM

Hi there spyder,

try it like this...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
table {
    border:1px solid #999;
 }
td {
    border:1px solid #000;
    padding:5px;
    text-align:center;
}
</style>

</head>
<body>

<table><tr>
<td colspan="2">tabular data</td><td colspan="2" >tabular data</td>
</tr><tr>
<td>tabular data</td><td colspan="2">tabular data</td><td>tabular data</td>
</tr></table>

</body>
</html>

coothead

**boogyman** · 07-11-2008, 01:35 PM

coot, that doesn't offer equal columns on the bottom.

By your definition you are looking for something like this correct?

111111222222 (equal)
111122223333 (equal)

If that is the case, you are not using the table properly. A table is meant for record (tabular) type data. The layout you have above breaks that, with the different sizes of columns. now with that said, below I have included the tabular version of the above LOL

Code:

<table>
     <tr>
          <td colspan="3">Stuff</td>
          <td colspan="3">Stuff</td>
     </tr>
     <tr>
          <td colspan="2">Stuff</td>
          <td colspan="2">Stuff</td>
          <td colspan="2">Stuff</td>
     </tr>
</table>

the way I found out what to use, is that if I wish to use just one table, I would need to find a number that would be evenly divisible by 2 and by 3. The first number that does so is 6.... Then I use that as my basis for creating an evenly distributed 2 row, odd column layout

in order to get a width of "6" I would need to make my first row 2 sets of three.
and in order to make the second row, I need 3 sets of 2... and thus I have the minimal width with the best benefit. Now If I wanted, I could expand that 2 ways.... I can just scale up the colspan to be the next number divisible by both two and three (12) and assign 3/4, or I can just adjust the width on the outer table, and the column width will adjust accordingly.

**coothead** · 07-11-2008, 04:47 PM

Hi there boogyman,

coot, that doesn't offer equal columns on the bottom.

You, obviously, could not have tested my code fully then.

My code produces identical results in Opera 9.25, Firefox 3.0 and Safari 3.1, IE 5.5, IE 6.0 and IE7.
Your code produces identical results in Opera 9.25, Firefox 3.0 and Safari 3.1 but fails, unfortunately, in...
IE 5.5, IE 6.0 and IE7.

Here is the code that I used to compare our efforts...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
table {
    border:1px solid #999;
 }
td {
    border:1px solid #000;
    padding:5px;
    text-align:center;
}

</style>


</head>
<body>

<h4>boogyman's solution</h4>

<table>
     <tr>
          <td colspan="3">Stuff</td>
          <td colspan="3">Stuff</td>
     </tr>
     <tr>
          <td colspan="2">Stuff</td>
          <td colspan="2">Stuff</td>
          <td colspan="2">Stuff</td>
     </tr>
</table>

<h4>coothead's solution</h4>

<table>
     <tr>
         <td colspan="2">Stuff</td>
         <td colspan="2">Stuff</td>
     </tr>
     <tr>
         <td>Stuff</td>
         <td colspan="2">Stuff</td>
         <td>Stuff</td>
     </tr>
</table>

</body>
</html>

Here is an image of IE7's rendering of our code, for your consideration...

Your comments concerning this will, certainly, be appreciated.

coothead

**boogyman** · 07-11-2008, 06:32 PM

if i was going to break the codes down into individual blocks, where the digit it the row and the number of digits equals the column width, this is what you would get

yours

11 11
2 22 2

mine

111 111
22 22 22

now I understand what you are saying... the end result ends up being the same, so it shouldn't matter right? well take a look at the image below and you will see that the browser corrects your layout to appear what it wants, however in my layout... each cell is accurately depicted and a truly even set of columns are created.

Edit: updated photo

if you would like to see the textual representation, visit http://www.dividinglimits.com/table.html

**coothead** · 07-11-2008, 10:17 PM

Hi there boogyman,

sorry, I must be obtuse, but I cannot understand any of your reasoning.

All that I can see is that your code produces identical results as mine except for it's failure in IE browsers.
You seem to be ignoring this failure.
What are your thoughts on the image that I posted?

I have done further tests and my colspan method produced the expected outcomes as did yours.

http://mysite.orange.co.uk/coothead/boogyman.html

Don't forget to view the link in an IE browser also.

coothead

Thread: tables

Thread Tools

Search Thread

tables

Bookmarks

Bookmarks

Posting Permissions