set width percent in nested table 1

[AzizKamal]

In Internet Explorer, I am viewing an HTML table, which has another table in it.

This was my code earlier:

Response.Write "<table border=0 width='86%' cellpadding=0 cellspacing=0>"
Response.Write "<tr><td width='14%'>&nbsp;</td>"
Response.Write "<tr><td width='51%'>Item Name</td>"
Response.Write "<td width='7%' align='right'>Qty</td>"
Response.Write "<td width='7%' align='right'>Price</td>"
Response.Write "<td width='7%' align='right'>Amount</td></tr>"
Response.Write "</table>"

But then I needed to underline the heading starting from Item Name up to Amount. I created an inner table and the code is as follows:

Response.Write "<table border=0 width='86%' cellpadding=0 cellspacing=0>"
Response.Write "<tr><td width='14%'>&nbsp;</td>"
Response.Write "<td width='72%'><table width='100%' border=0 cellpadding=0 cellspacing=0 style='border-bottom:1px dashed black'>"
Response.Write "<tr><td width='51%'>Item Name</td>"
Response.Write "<td width='7%' align='right'>Qty</td>"
Response.Write "<td width='7%' align='right'>Price</td>"
Response.Write "<td width='7%' align='right'>Amount</td></tr></table></td></tr>"
Response.Write "</table>"

This works OK and I get an underline effect from Item Name up to Amount.

But I need to know how the widths are being calculated correctly?

In the first code fragment, outer table width was 86%, and five cells say c1,c2,c3,c4,c5 have 14%,51%,7%,7%,7%.

But then there is another table from c2 to c5. Sum of widths from c2 to c5 is 72% for outer table. The inner table has width 100% and inner table cells have widths (51+7+7+7=72%). Inner table sum of widths is not equal to 100%. Instead it is equal to outer table sum of widths from c2 to c5.

But still the browser is displaying the results correctly??

 

[BillyRayPreachersSon]

Why use a table just to give an underline? What's wrong with good old CSS ("border-bottom", etc)?

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

Dan's Page [blue]@[/blue] Code Couch:

http://www.codecouch.com/dan/

Code Couch Snippets & Info:

http://www.codecouch.com/

The Out Atheism Campaign

 

[AzizKamal]

This table shows the heading and then data values follow in this table. I have to underline the table heading (from cell c2 to cell c5). I have used the border-bottom property using the style attribute:

Response.Write "<td width='72%'><table width='100%' border=0 cellpadding=0 cellspacing=0 style='border-bottom:1px dashed black'>"

 

[Vragabond]

What Dan thought was, you shouldn't be creating extra elements to achieve a visual enhancement to the site. Instead, style existing elements the way you need them to look.

Can you please show us the rendered code (no ASP) and explain exactly what you want? Or even better, can you provide us with a link to this page (or a mock-up page demonstrating your issue).

[small]Do something about world cancer today: Comprehensive cancer control information at PACT[/small]

 

[AzizKamal]

Thanks Dan and Vragabond.

When I viewed the page, I right-clicked and selected View Source and the following HTML generated for the code fragment:

<table border=0 width='86%' cellpadding=0 cellspacing=0>
<tr>
<td width='14%'>&nbsp;</td>
<td width='72%'>
<table width='100%' border=0 cellpadding=0 cellspacing=0 style='border-bottom:1px dashed black'>
<tr>
<td width='51%'>Item Name</td>
<td width='7%' align='right'>Qty</td>
<td width='7%' align='right'>Price</td>
<td width='7%' align='right'>Amount</td>
</tr>
</table>
</td>
</tr>
</table>

 

[AzizKamal]

In this code fragment, inner table has the following HTML:

<table width='100%' border=0 cellpadding=0 cellspacing=0 style='border-bottom:1px dashed black'>
<tr>
<td width='51%'>Item Name</td>
<td width='7%' align='right'>Qty</td>
<td width='7%' align='right'>Price</td>
<td width='7%' align='right'>Amount</td>
</tr>
</table>

Sum of the widths in this case is not equal to 100% but equal to 72%, so how the browser is distributing the width 100%....

 

[ChrisHunt]

Well, with a little maths, you could work out what percentages you'd have to use in the inner table to correspond to the outer table - but the whole approach is way more complex than it probably needs to be.

You need to get out of the mindset of solving every problem by adding another nested table - it's so 20th century.

Take a step back and think about what you're trying to achieve. You don't spell it out, so I'm going to guess: the code you've given us is the heading line for a table, and there are going to be lines of data below it. I'm also going to guess that you're going to have a set of row headings below that first, blank, 14% width column to get a crosstab effect.

So let's forget (mostly) about presentation for a minute and mark that up properly:

<table class="data">
  <thead>
    <tr>
      <th class="blank">&nbsp;</th>
      <th>Item Name</th>
      <th class="num">Qty</th>
      <th class="num">Price</th>
      <th class="num">Amount</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row 1</th>
      <td>Gadgetmaster</td>
      <td class="num">1</td>
      <td class="num">20.00</td>
      <td class="num">20.00</td>
    </tr>
    <tr>
      <th>Row 2</th>
      <td>Gizmotron</td>
      <td class="num">3</td>
      <td class="num">10.00</td>
      <td class="num">30.00</td>
    </tr>
  </tbody>
</table>

I've left enough hooks in there to keep all the presentational stuff where it belongs - in the CSS stylesheet!

table.data {
   width: 100%;
   border-collapse: collapse;
}

table.data th {
   font-weight: normal;
   text-align: left;
}

table.data thead th {
   border-bottom: 1px dashed black;
}

table.data thead th.blank {
   width: 14%;
   border: 0;
}

table.data th.num, table.data td.num {
  text-align: right;
  width: 7%;
}

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[AzizKamal]

Thanks Chris.

This code is far better than the nested table approach. I am incorporating this HTML and CSS in my scenario.

I will post about my results when I am done.

Regards

 

[AzizKamal]

Thanks Chris.

I successfully replaced my code with the one suggested by you.

My earlier code:

<table border=0 width='86%' cellpadding=0 cellspacing=0>
<tr>
<td width='14%'>&nbsp;</td>
<td width='72%'>
<table width='100%' border=0 cellpadding=0 cellspacing=0 style='border-bottom:1px dashed black'>
<tr>
<td width='51%'>Item Name</td>
<td width='7%' align='right'>Qty</td>
<td width='7%' align='right'>Price</td>
<td width='7%' align='right'>Amount</td>
</tr>
</table>
</td>
</tr>
</table>

Revised code:

HTML:
<table class="data">
<thead>
<tr>
<th class="blank">&nbsp;</th>
<th class="str">Item Name</th>
<th class="num">Qty</th>
<th class="num">Price</th>
<th class="num">Amount</th>
</tr>
</thead>
</table>

CSS:
<STYLE TYPE='text/css'>

table.data {
 width: 86%;
 border-collapse: collapse;
}

table.data th {
 font-weight: normal;
 text-align: left;
}

table.data thead th {
 border-bottom: 1px dashed black;
}

table.data thead th.blank {
 width: 14%;
 border: 0;
}

table.data th.num {
 text-align: right;
 width: 7%;
}

table.data th.str {
 text-align: left;
 width: 51%;
}

</STYLE>

Above two codes display the same output but the second approach is much cleaner and elegant.

I am using this table in a receipt printing program that displays the output on screen and provides the print option through javascript:

Response.Write "<a href=javascript:print(this.form)>Printed By:</a> " & trim(session("username"))

There are more details related to it in this thread:
thread333-1626586

Thanks a lot for your support and assistance.