Get ready for BLACK FRIDAY shopping starting in

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> &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;style type="text/css"&gt;
&lt;!--
.style11 {font-family: Arial, Helvetica, sans-serif; font-size: 10px; }
--&gt;
&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div align="center"&gt;
&lt;table width="1048" border="1" cellpadding="0" cellspacing="0" bordercolor="#CC0033"&gt;
&lt;col width="131" span="8" /&gt;
&lt;tr height="34"&gt;
&lt;td&gt;&lt;p class="style11"&gt;Account Owner&lt;/p&gt;&lt;/td&gt;
&lt;td&gt;&lt;p class="style11"&gt;Account Name&lt;/p&gt;&lt;/td&gt;
&lt;td&gt;&lt;p class="style11"&gt;Billing Street&lt;/p&gt;&lt;/td&gt;
&lt;td&gt;&lt;p class="style11"&gt;Billing City&lt;/p&gt;&lt;/td&gt;
&lt;td&gt;&lt;p class="style11"&gt;Billing State/Province&lt;/p&gt;&lt;/td&gt;
&lt;td&gt;&lt;p class="style11"&gt;Billing Zip/Postal Code&lt;/p&gt;&lt;/td&gt;
&lt;td&gt;&lt;p class="style11"&gt;Agent Code&lt;/p&gt;&lt;/td&gt;
&lt;td&gt;&lt;p class="style11"&gt;Status&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr height="34"&gt;
&lt;td height="34" width="131"&gt;Christopher Hoehne&lt;/td&gt;
&lt;td width="131"&gt;IDAHO INSURANCE, INC.&lt;/td&gt;
&lt;td width="131"&gt;1117 CLEVELAND BLVD&lt;/td&gt;
&lt;td width="131"&gt;CALDWELL&lt;/td&gt;
&lt;td width="131"&gt;ID&lt;/td&gt;
&lt;td width="131"&gt;83605&lt;/td&gt;
&lt;td width="131"&gt;ID7510&lt;/td&gt;
&lt;td width="131"&gt;Active&lt;/td&gt;
&lt;/tr&gt;
&lt;tr height="51"&gt;
&lt;td height="51" width="131"&gt;Christopher Hoehne&lt;/td&gt;
&lt;td width="131"&gt;SVANCARA, ROBERT J. AGENCY&lt;/td&gt;
&lt;td width="131"&gt;840 E. ALAMEDA RD, STE B&lt;/td&gt;
&lt;td width="131"&gt;POCATELLO&lt;/td&gt;
&lt;td width="131"&gt;ID&lt;/td&gt;
&lt;td width="131"&gt;83201&lt;/td&gt;
&lt;td width="131"&gt;ID3426&lt;/td&gt;
&lt;td width="131"&gt;Active&lt;/td&gt;
&lt;/tr&gt;
&lt;tr height="51"&gt;
&lt;td height="51" width="131"&gt;Christopher Hoehne&lt;/td&gt;
&lt;td width="131"&gt;CONQUEST INSURANCE AGENCY, INC&lt;/td&gt;
&lt;td width="131"&gt;P. O. BOX 69&lt;/td&gt;
&lt;td width="131"&gt;BLACKFOOT&lt;/td&gt;
&lt;td width="131"&gt;ID&lt;/td&gt;
&lt;td width="131"&gt;83221&lt;/td&gt;
&lt;td width="131"&gt;ID3276&lt;/td&gt;
&lt;td width="131"&gt;Active&lt;/td&gt;
&lt;/tr&gt;
&lt;tr height="34"&gt;
&lt;td height="34" width="131"&gt;Christopher Hoehne&lt;/td&gt;
&lt;td width="131"&gt;SCHEDLER-MACK INSURANCE&lt;/td&gt;
&lt;td width="131"&gt;P. O. BOX 1549&lt;/td&gt;
&lt;td width="131"&gt;COEUR D'ALENE&lt;/td&gt;
&lt;td width="131"&gt;ID&lt;/td&gt;
&lt;td width="131"&gt;83816&lt;/td&gt;
&lt;td width="131"&gt;ID3697&lt;/td&gt;
&lt;td width="131"&gt;Active&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</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

Reply to this topic