HTML table question...

Toggle sidebar Toggle sidebar
Ichinisan

Ichinisan

Lifer
Oct 9, 2002
28,298
1,236
136
Not really a programming question, but I don't think there's an appropriate forum.

Code: 
<table>
<tr><td colspan="4"><h2>VIP Package Bundles - Video - Internet - Phone</h2></td></tr>
<tr><td colspan="4"><i>Bundles all three services for the ultimate savings!</i></td></tr>
<tr><td><b>VIP Ultra                 </b></td><td>Digital Cable  + Internet 9 Mbps + Phone</td><td align="right">$146.95</td><td><b>Save over $150 annually!</b></td></tr>
<tr><td><b>VIP Plus                  </b></td><td>Digital Cable  + Internet 3 Mbps + Phone</td><td align="right">$137.95</td><td><b>Save over $200 annually!</b></td></tr>
<tr><td><b>VIP Value                 </b></td><td>Expanded Cable + Internet 9 Mbps + Phone</td><td align="right">$141.95</td><td><b>Save over $290 annually!</b></td></tr>
<tr><td><b>VIP Starter               </b></td><td>Expanded Cable + Internet 3 Mbps + Phone</td><td align="right">$132.95</td><td><b>Save over $340 annually!</b></td></tr>

<tr><td colspan="4"><h2>Double Play Package Bundles</h2></td></tr>
<tr><td>Digital  Cable  + Internet 9 Mbps</td><td>...                                     </td><td align="right">$114.75</td><td><b>Save over $130 annually!</b></td></tr>
<tr><td>Digital  Cable  + Internet 3 Mbps</td><td>...                                     </td><td align="right">$105.25</td><td><b>Save over $125 annually!</b></td></tr>
<tr><td>Digital  Cable  + Phone          </td><td>...                                     </td><td align="right">$105.25</td><td><b>Save over $125 annually!</b></td></tr>
<tr><td>Expanded Cable  + Internet 9 Mbps</td><td>...                                     </td><td align="right">$104.95</td><td><b>Save over  $59 annually!</b></td></tr>
<tr><td>Expanded Cable  + Internet 3 Mbps</td><td>...                                     </td><td align="right"> $95.95</td><td><b>Save over  $45 annually!</b></td></tr>
<tr><td>Expanded Cable  + Phone          </td><td>...                                     </td><td align="right"> $95.95</td><td><b>Save over  $45 annually!</b></td></tr>
<tr><td>Internet 9 Mbps + Phone          </td><td>...                                     </td><td align="right"> $93.95</td><td><b>Save over  $95 annually!</b></td></tr>
<tr><td>Internet 3 Mbps + Phone          </td><td>...                                     </td><td align="right"> $84.95</td><td><b>Save over  $83 annually!</b></td></tr>
</table>


This table is split into two parts. When this is rendered, the top part of the table has a huge space between the first and second data columns. If I remove the bottom part of the table, the first part looks fine.

I could do two separate tables, but then the last 2 columns won't be aligned between the two sections.

Code: 
<table>
<tr><td colspan="4"><h2>VIP Package Bundles - Video - Internet - Phone</h2></td></tr>
<tr><td colspan="4"><i>Bundles all three services for the ultimate savings!</i></td></tr>
<tr><td><b>VIP Ultra                 </b></td><td>Digital Cable  + Internet 9 Mbps + Phone</td><td align="right">$146.95</td><td><b>Save over $150 annually!</b></td></tr>
<tr><td><b>VIP Plus                  </b></td><td>Digital Cable  + Internet 3 Mbps + Phone</td><td align="right">$137.95</td><td><b>Save over $200 annually!</b></td></tr>
<tr><td><b>VIP Value                 </b></td><td>Expanded Cable + Internet 9 Mbps + Phone</td><td align="right">$141.95</td><td><b>Save over $290 annually!</b></td></tr>
<tr><td><b>VIP Starter               </b></td><td>Expanded Cable + Internet 3 Mbps + Phone</td><td align="right">$132.95</td><td><b>Save over $340 annually!</b></td></tr>
</table>

<table>
<tr><td colspan="4"><h2>Double Play Package Bundles</h2></td></tr>
<tr><td>Digital  Cable  + Internet 9 Mbps</td><td>...                                     </td><td align="right">$114.75</td><td><b>Save over $130 annually!</b></td></tr>
<tr><td>Digital  Cable  + Internet 3 Mbps</td><td>...                                     </td><td align="right">$105.25</td><td><b>Save over $125 annually!</b></td></tr>
<tr><td>Digital  Cable  + Phone          </td><td>...                                     </td><td align="right">$105.25</td><td><b>Save over $125 annually!</b></td></tr>
<tr><td>Expanded Cable  + Internet 9 Mbps</td><td>...                                     </td><td align="right">$104.95</td><td><b>Save over  $59 annually!</b></td></tr>
<tr><td>Expanded Cable  + Internet 3 Mbps</td><td>...                                     </td><td align="right"> $95.95</td><td><b>Save over  $45 annually!</b></td></tr>
<tr><td>Expanded Cable  + Phone          </td><td>...                                     </td><td align="right"> $95.95</td><td><b>Save over  $45 annually!</b></td></tr>
<tr><td>Internet 9 Mbps + Phone          </td><td>...                                     </td><td align="right"> $93.95</td><td><b>Save over  $95 annually!</b></td></tr>
<tr><td>Internet 3 Mbps + Phone          </td><td>...                                     </td><td align="right"> $84.95</td><td><b>Save over  $83 annually!</b></td></tr>
</table>

Note: all the extra spaces in the code samples are for readability while trying to figure this out. All browsers should eliminate extra whitespace anyway.


So what would be the best way to render this?
 
B

beginner99

Diamond Member
Jun 2, 2009
5,320
1,768
136
Don't use tables for layout! Although it is done very, very often it's very bad practice.
Use css instead. There are tons of free css templates available.

Only use tables for tabular data.
 
S

SJP0tato

Senior member
Aug 19, 2004
267
0
76
Which browser are you using to view the table? You might find the results vary greatly depending on browser/version too.
 
PhatoseAlpha

PhatoseAlpha

Platinum Member
Apr 10, 2005
2,131
21
81
beginner99 said:
Don't use tables for layout! Although it is done very, very often it's very bad practice.
Use css instead. There are tons of free css templates available.

Only use tables for tabular data.
Click to expand...

That looks an awful lot like tabular data to me.


At any rate, the large space in the upper section is the width of the first column. It's automatically expanding to the size of it's largest cell, which is down below. Change
<table> to <table border=1> and it will make the layout crystal clear.

Get rid of the second cells in the lower section entirely, and set the first cell in the upper section to colspan=2.
 
Last edited:
Markbnj

Markbnj

Elite Member <br>Moderator Emeritus
Moderator
Sep 16, 2005
15,682
14
81
www.markbetz.net
beginner99 said:
Don't use tables for layout! Although it is done very, very often it's very bad practice.
Use css instead. There are tons of free css templates available.

Only use tables for tabular data.
Click to expand...

Have to agree with PhatoseAlpha here. I almost posted "In before 'Never use tables'" when I first saw the OP, because I knew the second or third post would be "OMG you used tables." Most of the bad things people used to (still do) use tables for involved coercing the layout of pages. Using a table to control a set of data that is tabular doesn't strike me as bad practice.
 
B

beginner99

Diamond Member
Jun 2, 2009
5,320
1,768
136
Markbnj said:
Have to agree with PhatoseAlpha here. I almost posted "In before 'Never use tables'" when I first saw the OP, because I knew the second or third post would be "OMG you used tables." Most of the bad things people used to (still do) use tables for involved coercing the layout of pages. Using a table to control a set of data that is tabular doesn't strike me as bad practice.
Click to expand...

Most of it is tabular, but not everything in the table.

First 2 rows are a title. Then Tabular data. Then a title again in the same table and tabular data. Formatting stuff directly in html. I agree it's not as bad as I make it sound but it's just crying for problems.

Making 2 tables is the way to go. Remove the titles from the tables.
Next thing would be to control the table layout with css. To align the last 2 columns, make same number of columns in both tables and control their width with css.
 
Markbnj

Markbnj

Elite Member <br>Moderator Emeritus
Moderator
Sep 16, 2005
15,682
14
81
www.markbetz.net
beginner99 said:
Most of it is tabular, but not everything in the table.

First 2 rows are a title. Then Tabular data. Then a title again in the same table and tabular data. Formatting stuff directly in html. I agree it's not as bad as I make it sound but it's just crying for problems.

Making 2 tables is the way to go. Remove the titles from the tables.
Next thing would be to control the table layout with css. To align the last 2 columns, make same number of columns in both tables and control their width with css.
Click to expand...

Yeah you have a point there. If you see "colspan=" in a table definition it's a pretty good indication that at least that row of the table is being used to drive layout.
 
W

WildHorse

Diamond Member
Jun 29, 2003
5,006
0
0
The genius Paul Lutus, author of Arachnophilia, which is a GREAT html coding tool you can download FREE from his EXCELLENT AND USEFUL web site, [under Careware / Java ] gives this table creation code (which I use alla time):

Code: 
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- Created on May 4, 2011 1:45:42 AM -->

<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>
         deleteMe
      </title>
      <meta name="GENERATOR" content="Arachnophilia 5.4"/>
      <meta name="FORMATTER" content="Arachnophilia 5.4"/>
   </head>

   <body bgcolor="#ffffff" text="#000000" link="#0000ff" vlink="#800080" alink="#ff0000">

      <table cellspacing="0" cellpadding="4" border="1" width="95&#37;">
  <tr>
    <!-- Row 1 Column 1 -->
    <td>
      <b>
        R1C1
      </b>
    </td>
    <!-- Row 1 Column 2 -->
    <td>
      <b>
        R1C2
      </b>
    </td>
    <!-- Row 1 Column 3 -->
    <td>
      <b>
        R1C3
      </b>
    </td>
    <!-- Row 1 Column 4 -->
    <td>
      <b>
        R1C4
      </b>
    </td>
  </tr>
  <tr>
    <!-- Row 2 Column 1 -->
    <td>
      <b>
        R2C1
      </b>
    </td>
    <!-- Row 2 Column 2 -->
    <td>
      R2C2
    </td>
    <!-- Row 2 Column 3 -->
    <td>
      R2C3
    </td>
    <!-- Row 2 Column 4 -->
    <td>
      R2C4
    </td>
  </tr>
  <tr>
    <!-- Row 3 Column 1 -->
    <td>
      <b>
        R3C1
      </b>
    </td>
    <!-- Row 3 Column 2 -->
    <td>
      R3C2
    </td>
    <!-- Row 3 Column 3 -->
    <td>
      R3C3
    </td>
    <!-- Row 3 Column 4 -->
    <td>
      R3C4
    </td>
  </tr>
  <tr>
    <!-- Row 4 Column 1 -->
    <td>
      <b>
        R4C1
      </b>
    </td>
    <!-- Row 4 Column 2 -->
    <td>
      R4C2
    </td>
    <!-- Row 4 Column 3 -->
    <td>
      R4C3
    </td>
    <!-- Row 4 Column 4 -->
    <td>
      R4C4
    </td>
  </tr>
</table>


   </body>
</html>
 
Ichinisan

Ichinisan

Lifer
Oct 9, 2002
28,298
1,236
136
Sorry I didn't check back here. Thanks for the responses.

I figured out what I was doing wrong and got it straightened out.
 
You must log in or register to reply here.

TRENDING THREADS

COMPANY
RESOURCES
FOLLOW
Top Bottom