• We’re currently investigating an issue related to the forum theme and styling that is impacting page layout and visual formatting. The problem has been identified, and we are actively working on a resolution. There is no impact to user data or functionality, this is strictly a front-end display issue. We’ll post an update once the fix has been deployed. Thanks for your patience while we get this sorted.

HTML table question...

Ichinisan

Ichinisan

Lifer
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?
 
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.
 
Which browser are you using to view the table? You might find the results vary greatly depending on browser/version too.
 
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:
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.
 
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.
 
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.
 
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>
 
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

Back
Top