Click to See Complete Forum and Search --> : Table border


k_pilkington
10-24-2006, 03:57 AM
Hi I have the following code which works fine, the only problem is, tht because I'm using 5 tables, 1 for each section, for layout reasons, The border is thicker in certain areas. I would like this border and lines within the tables to be the same width for the whole page, so there is just thin lines dividing each section.


<table width="632" border="1" cellpadding="0" cellspacing="0">

<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

<!--Top Table that contains header and address-->
<tr>
<td width="628" height="156" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="396" height="154" valign="top" class="mainheader">
ADVICE SHIPPING INVOICE ONLY<br/>
<p>&nbsp;</p>
<p><img src="test.gif" /></p>
</td>

<td width="232" valign="top" class="topaddress">
Test Line<br />
Test Line<br />
Test Line<br />
Test Line<br />
Test Line<br />
Test Line
<p class="topaddress">&nbsp;</p>
<p class="topaddress">Test Line<br />
Test Line<br />
Test Line<br />
Test Line<br />
Test Line</p></td>
</tr>
<tr>
<td height="0"></td>
<td></td>
</tr>
</table></td>
</tr>
<!--End of Top Table that contains header and address-->

<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

<!-- Table containing Consignee, Invoice number, Sellers ref, Invoice date, Buyers ref, AWB No and Other reference -->
<tr>
<td height="117" valign="top"><table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="232" rowspan="2" valign="top">
<p class="tableheader">Consignee</p>
<p class="datatopsection">Test Line</p>
<p class="datatopsection">Test Line</p>
<p class="datatopsection">Test Line</p>
<p class="datatopsection">Test Line</p>
<p class="datatopsection">Test Line</p>
<p class="datatopsection">Test Line</p>
</td>
<td width="118" height="35" valign="top">
<p class="tableheader">Invoice number</p>
<p align="center" class="datatopsection">Customs</p>
</td>
<td width="159" valign="top">
<p class="tableheader">Invoice date (tax point)</p>
<p class="datatopsection">Text 1 </p>
</td>
<td width="119" valign="top">
<p class="tableheader">AWB No. </p>
<p class="datatopsection">Text 1 </p>
</td>
</tr>
<tr>
<td height="78" valign="top">
<p class="tableheader">Seller's reference</p>
<p class="datatopsection">Text 1 </p>
<p class="datatopsection">Text 2</p>
<p class="datatopsection">Text 3 </p>
<p class="datatopsection">&nbsp;</p>
</td>
<td valign="top">
<p class="tableheader">Buyer's reference </p>
<p class="datatopsection">Text 1 </p>
<p class="datatopsection">Text 2 </p>
<p class="datatopsection">Text 3 </p>
</td>
<td valign="top">
<p class="tableheader">Other reference </p>
<p class="datatopsection">Text 1 </p>
</td>
</tr>
</table></td>
</tr>
<!-- End of table containing Invoice number, Sellers ref, Invoice date, Buyers ref and Other reference -->

<!--////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

<!-- Table containing shipping details -->
<tr>
<td height="123" valign="top">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<td width="229" height="39" valign="top">
<p class="tableheader">Vessel/flight no. and date</p>
<p class="datatopsection">Text Line 1 </p>
</td>
<td width="165" valign="top">
<p class="tableheader">Port/airport of loading</p>
<p class="datatopsection">Text Line 1 </p>
</td>
<td width="226" rowspan="2" valign="top">
<p class="tableheader">Country of origin of goods</p>
<blockquote>
<blockquote>
<p class="datatopsection">UK</p>
</blockquote>
</blockquote>
</td>
</tr>
<tr>
<td height="38" valign="top">
<p class="tableheader">Port/airport of discharge</p>
<p class="datatopsection">Text Line 1 </p>
</td>
<td valign="top">
<p class="tableheader">Place of delivery</p>
<p class="datatopsection">Text Line 1 </p>
</td>
</tr>
<tr>
<td height="44" colspan="2" valign="top">
<p class="tableheader">Transport information/notify party</p>
<p class="datatopsection">Text Line 1 </p>
</td>
<td valign="top">
<p class="tableheader">Terms of delivery and payment</p>
<p class="datatopsection">Text Line 1 </p>
</td>
</tr>
<tr>
<td height="2"></td>
<td></td>
<td></td>
</tr>
</table></td>
</tr>
<!-- End of table containing shipping details -->


</table>


Cheers for any help you can give, Mark

the tree
10-24-2006, 04:50 AM
style="border-bottom: none;"^ might be the quick sollution. But in the long term:

Why tables for layout is stupid (http://hotdesign.com/seybold/) Why avoiding tables (for layout) is important (http://davespicks.com/essays/notables.html) Tables or CSS: choosing a layout (http://evolt.org/article/Tables_or_CSS_Choosing_a_layout/25/21429/) Why go table free? (http://www.workingwith.me.uk/tablefree/why/) Tables vs. CSS: A fight to the death (http://www.sitepoint.com/article/tables-vs-css/) Why Tables Are Bad (For Layout) Compared to Semantic HTML + CSS (http://www.phrogz.net/CSS/WhyTablesAreBadForLayout.html) The layout is dead, long live the layout (http://www.westciv.com/style_master/house/good_oil/dead_layout/)

abz
10-24-2006, 05:33 AM
to save you pasting that into every table, then you deciding later you want them to have a different border after all, then put this in the header:


<style type="text/css">
<!--

table{
border-bottom:none;
}

-->
<style>