Table issues

Neodude1123201 · Jan 27, 2009

This is the site im meant to make for TAFE,Yet THIS is the closest i can get:

Now i have everything sorted EXCEPT The spaced between the Tables? Any ideas?

Here is the HTML Source:

<html>
<head>
<title>Insert Title here</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<body bgcolor="#999999">
<td>
<tr>
<table>
<td width="780" height="75" background="images/bg.jpg" >
<logo>Â Your Company Name</logo>
</tr>
</td>
</table>
<table>
<tr>
<td>
<td width="780" height="20" bgcolor="FFCC67" >
<center><a href="#">Home</a>|
<a href="">Company</a>|
<a href="">Services</a>|
<a href="">Products</a>|
<a href="">Clients</a>|
<a href="">Downloads</a>|
<a href="">Site Map</a>|
<a href="#">Contact Us</a></center>
</tr>
</td>
</table>
<table>
<td width="160" height="580" bgcolor="#CCCCCC" >
<center> Lorum Ipsem
<td width="620" height="580" align=center valign=top bgcolor="#FFFFF">
<p><center><img src="images/main.jpg" align="texttop"></center></p>
<text><h1>Welcome To Company Website!</h1></text>
</table>

Now the Thing is,I have to do it all by hand so im not allowed to use a HTML Editor....

Daeva · Jan 27, 2009

Here is what I got. I don't have your images, but I tried to match colors as best I could. It works in FF 3, IE 7, and passes w3 validation. None of this was done using an editor, except for my trusty textpad

. You were missing three key elements to make your border woes dissapear:
1.) border="0"
2.) cellpadding="0"
3.) cellspacing="0"

Hope this helps!

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">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us" lang="en-us" dir="ltr">
 <head>
  <title>Insert Title here</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" />
  <style type="text/css">
   @media screen {
    BODY
    {
      background-color: #898989;
      color: #efefef;
      font-family: Arial, Verdana, Sans-Serif;
      margin: 0px;
    }
    #mainTable
    {
      display: block;
      width: 90%;
      margin: 0px auto;
      height: auto;
      max-width: 1200px;
      min-width: 1024px;
    }
    #mainTable TH
    {
      line-height: 90px;
      height: 90px;
      width: 100%;
      min-width: 1024px;
      max-width: 1280px;
      color: #aec3e5;
      text-align: left;
      vertical-align: middle;
      background: #577abc url('images/bg.jpg') no-repeat left;
    }
    #mainTable TH H1
    {
      margin: 0px;
      padding: 0px;
      width: 100%;
      text-indent: 20px;
    }
    UL#navigation
    {
      display: block;
      list-style-type: none;
      margin: 0px 30%;
      width: 600px;
      height: 20px;
      text-align: center;
      padding: 0px;
    }
    UL#navigation LI
    {
      float: left;
      clear: none;
      max-width: 120px;
      margin: 0px 2px 0px 2px;
      color: navy;
    }
    UL#navigation A
    {
      color: #3e3530;
    }
    #leftCol
    {
      background-color: #CCCCCC;
      color: #232323;
      text-align: left;
      width: 200px;
      max-width: 200px;
      min-width: 140px;
      min-height: 300px;
      max-height: 600px;
      height: 100%;
    }
    #contentCol
    {
      background-color: #ffffff;
      color: #121212;
      width: 800px;
      max-width: 950px;
      padding: 3px 5px 3px 5px;
      height: 400px;
    }
    #companyNewsHeader
    {
      text-align: left;
      text-indent: 10px;
      margin: 8px auto 0px auto;
      padding: 0px;
      color: #444537;
      font-size: 95%;
    }
    .contentHeader
    {
      background: #ffffff url('images/main.jpg') no-repeat top center;
      padding-top: 130px;
      color: #4e76be;
      display: block;
    }
    .mainContent
    {
      color: #232323;
      background-color: transparent;
      font-family: Verdana, Arial, Sans-Serif;
    }
   }
  </style>
 </head>
 <body>
  <table cellpadding="0" cellspacing="0" border="0" id="mainTable">
   <thead>
    <tr>
      <th colspan="2" valign="middle" align="center">
       <h1>Your Company Name</h1>
      </th>
    </tr>
    <tr>
      <td colspan="2" valign="top" align="center" style="text-align: center; background-color: #FFCC67;">
       <ul id="navigation">
        <li><a href="index.html" target="_self">Home</a>Â |Â </li>
        <li><a href="company.html" target="_self">Company</a>Â |Â </li>
        <li><a href="services.html" target="_self">Services</a>Â |Â </li>
        <li><a href="products.html" target="_self">Products</a>Â |Â </li>
        <li><a href="clients.html" target="_self">Clients</a>Â |Â </li>
        <li><a href="siteMap.html" target="_self">Site Map</a>Â |Â </li>
        <li><a href="contactus.html" target="_self">Contact Us</a></li>
       </ul>
      </td>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td colspan="1" valign="top" align="left" id="leftCol">
        <h3 id="companyNewsHeader">Company News</h3>
        <span class="newsStuff">
        </span>
       </td>
       <td colspan="1" valign="top" align="left" id="contentCol">
        <h2 class="contentHeader">Welcome to Company Website!</h2>
        <span class="mainContent">Text</span>
       </td>
     </tr>
   </tbody>
  </table>
 </body>
</html>

Not sure what you're using this for, but you should always use lists for links because it is semantically correct, and it's easier for search engines to pick up. If you turn the css off on this page, it looks fine if you view it from a mobile phone also.

Neodude1123201 · Jan 27, 2009

Basically it's for an assignment,so i feel like im cheating just copying and pasting yours SO I'll read through your code and compare it too mine and see if i can find what mine is missing

Thanks HEAPS!

EXCELLENT! I Simply had to add this line to below the <table> line:

<table cellpadding="0" cellspacing="0" border="0">

And it works great!

Table issues

Neodude1123201

Bogan

Daeva

In Runtime

Neodude1123201

Bogan

Similar threads