Forums
This topic is locked
When I have a table it looks different in browser?
Posted 12 May 2006 20:36:35
1
has voted
12 May 2006 20:36:35 Thin Lizzy posted:
<font face='Arial'>Attached is a html page that has the first line the right size. Small but in a browser it falls apart?</font id='Arial'> <pre id=code><font face=courier size=2 id=code> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style11 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
-->
</style>
</head>
<body>
<div align="center">
<table width="1048" border="1" cellpadding="0" cellspacing="0" bordercolor="#CC0033">
<col width="131" span="8" />
<tr height="34">
<td><p class="style11">Account Owner</p></td>
<td><p class="style11">Account Name</p></td>
<td><p class="style11">Billing Street</p></td>
<td><p class="style11">Billing City</p></td>
<td><p class="style11">Billing State/Province</p></td>
<td><p class="style11">Billing Zip/Postal Code</p></td>
<td><p class="style11">Agent Code</p></td>
<td><p class="style11">Status</p></td>
</tr>
<tr height="34">
<td height="34" width="131">Christopher Hoehne</td>
<td width="131">IDAHO INSURANCE, INC.</td>
<td width="131">1117 CLEVELAND BLVD</td>
<td width="131">CALDWELL</td>
<td width="131">ID</td>
<td width="131">83605</td>
<td width="131">ID7510</td>
<td width="131">Active</td>
</tr>
<tr height="51">
<td height="51" width="131">Christopher Hoehne</td>
<td width="131">SVANCARA, ROBERT J. AGENCY</td>
<td width="131">840 E. ALAMEDA RD, STE B</td>
<td width="131">POCATELLO</td>
<td width="131">ID</td>
<td width="131">83201</td>
<td width="131">ID3426</td>
<td width="131">Active</td>
</tr>
<tr height="51">
<td height="51" width="131">Christopher Hoehne</td>
<td width="131">CONQUEST INSURANCE AGENCY, INC</td>
<td width="131">P. O. BOX 69</td>
<td width="131">BLACKFOOT</td>
<td width="131">ID</td>
<td width="131">83221</td>
<td width="131">ID3276</td>
<td width="131">Active</td>
</tr>
<tr height="34">
<td height="34" width="131">Christopher Hoehne</td>
<td width="131">SCHEDLER-MACK INSURANCE</td>
<td width="131">P. O. BOX 1549</td>
<td width="131">COEUR D'ALENE</td>
<td width="131">ID</td>
<td width="131">83816</td>
<td width="131">ID3697</td>
<td width="131">Active</td>
</tr>
</table>
</div>
</body>
</html>
</font id=code></pre id=code>
Replies
Replied 15 May 2006 20:52:03
15 May 2006 20:52:03 Joss R replied:
Hi there:
my guess is that you've only applied your style to the top row of cells. You might also want to rename that top row of cells from 'td' to 'th' - table header.
Take out the size etc and change your style to this:
<pre id=code><font face=courier size=2 id=code>th {font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: left; margin: 4px; padding: 4px;} </font id=code></pre id=code>
Better yet would be to strip out all sizing from your html and apply this css, which is based on the table you posted above:
<pre id=code><font face=courier size=2 id=code> table {
width: 1048px;
border: 1px solid #CC0033;
}
th {font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: left; margin: 4px; padding: 4px;}
tr, td { font-size: 10px; padding: 4px; margin: 4px; height:34px; }</font id=code></pre id=code>
Then all your tables on your site will look the same. If you need to make them different, then add id's to the tables:
<pre id=code><font face=courier size=2 id=code>table#accounts</font id=code></pre id=code>
and style that table independently whatever way you wish.
using CSS for table styling will help keep your site much easier to maintain, and future changes will only involve a couple of lines of coding.
HTH
my guess is that you've only applied your style to the top row of cells. You might also want to rename that top row of cells from 'td' to 'th' - table header.
Take out the size etc and change your style to this:
<pre id=code><font face=courier size=2 id=code>th {font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: left; margin: 4px; padding: 4px;} </font id=code></pre id=code>
Better yet would be to strip out all sizing from your html and apply this css, which is based on the table you posted above:
<pre id=code><font face=courier size=2 id=code> table {
width: 1048px;
border: 1px solid #CC0033;
}
th {font-family: Arial, Helvetica, sans-serif; font-size: 10px; text-align: left; margin: 4px; padding: 4px;}
tr, td { font-size: 10px; padding: 4px; margin: 4px; height:34px; }</font id=code></pre id=code>
Then all your tables on your site will look the same. If you need to make them different, then add id's to the tables:
<pre id=code><font face=courier size=2 id=code>table#accounts</font id=code></pre id=code>
and style that table independently whatever way you wish.
using CSS for table styling will help keep your site much easier to maintain, and future changes will only involve a couple of lines of coding.
HTH