Jump to content

Table Spacing


Primal
 Share

Recommended Posts

I am writing a website for a company and I want to put a link to the parent company in the left hand corner and a link to a French version in the other corner. I have tried using the text-align, cellspacing, and cellpadding attributes but they don't do what I want. I would paste a picture but I can't figure out how to upload one.

Link to comment
Share on other sites

I took out the code when I discovered it didn't work, and the website isn't on the Internet yet. It's that new.

Link to comment
Share on other sites

PRIMAL,I'm not following the image you posted. I have a page with images on both sides of the header, but I am not certain if it is what you need. Anyway, have a look at this code to see how I have done it on another site.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"><html>      <head>  <title></title>  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>  <meta name="Author" content="Jim Haslip, jlhaslip@yahoo.ca"/>  <meta name="Keywords" content=""/>  <meta name="Description" content=""/>  <meta http-equiv="expires" content="0"/><style type="text/css" >body { margin:0; padding:0; background-color: #eecccc;  }.left { float:left; margin-left:10em; }.right { float:right; margin-right:10em; }h1 { margin-left:auto; margin-right:auto; text-align:center; padding:0; font-size:3em; }img { margin:0; padding:0; }#content { margin-left:3em; margin-right:3em; background-color: #ee9999; }#footer { margin-left:auto; margin-right:auto; text-align:center; padding:.5em; }hr { width:60%; }.test { margin-top: 1.5em; }.test:first-letter { float:left; font-size: 3em; font-weight: normal; }span { text-transform:uppercase; }#content { margin-left:auto; margin-right:auto; text-align:center; padding:.5em; padding-top:.5em; width:800px;}</style>        </head><body><div id="container"><!-- start container div -->     <div id="hdr">     <a name="top"></a>        <a href="sample.html" class="left" title="left">        <img src="logo.gif" alt="alt title" height="50" width="50"/></a>        <a href="sample.html" class="right" title="right">        <img src="logo.gif" alt="alt title" height="50" width="50"/></a>        <h1>Heading Here</h1>     </div><!-- end hdr div here -->           <hr />    <div id="content"><!-- page content starts below this comment -->         <!-- Insert page content between the div tags here -->          <div class="test" style=" background-color: #cc6666; "><span>This is an example of a DROP-CAP formatting and text-transform:uppercase </span>in the first line of a div.  Page content here .          <span>Page content</span> here . <span>Page content here</span> .          <span>Page</span> content here . <span>Page</span> content here .           Page content here . Page content here . Page content here . Page content here .            Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here .</div>          <div class="test" style=" background-color: #cc6666; "> <span>This is an example of a DROP-CAP formatting and text-transform:uppercase </span>in the first line of a div.  Page content here .          <span>Page content</span> here . <span>Page content here</span> .          <span>Page</span> content here . <span>Page</span> content here .           Page content here . Page content here . Page content here . Page content here .            Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here .</div>          <div class="test"> <span>This is an example of a DROP-CAP formatting and text-transform:uppercase </span>in the first line of a div.  Page content here .          <span>Page content</span> here . <span>Page content here</span> .          <span>Page</span> content here . <span>Page</span> content here .           Page content here . Page content here . Page content here . Page content here .            Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here .</div>         <!-- page content ends above this comment -->     </div><!-- end content div -->           <hr />     <div id="footer">          <a href="sitemap.html" title="this link goes to the map for the site">  sitemap  </a>          <a href="mailto:jlhaslip@yahoo.ca?subject=What_Subject">  Web Master  </a>  Copyright 2004 - 2006.            <a href="index.html">   Home Page  </a>          <a href="#top">   Top of this Page  </a>            <a href="http://validator.w3.org/check?uri=referer">  valid-xhtml1.0  </a>     </div>     <!-- end footer div --></div><!-- end container div --></body></html>

Float the first one left, the second one right, and centre the text header. This sample also shows drop caps, if you need or want that...

Link to comment
Share on other sites

That's sort of it; it could work but I think I might try to make the whole top line a picture and do an image map of it. I'll try again with the picture. Sorry it's so huge.untitled1mm1.jpg

Link to comment
Share on other sites

Play with the margins and paddings to have the spacing you want.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml-strict.dtd"><html>      <head>  <title></title>  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/>  <meta name="Author" content="Jim Haslip, jlhaslip@yahoo.ca"/>  <meta name="Keywords" content=""/>  <meta name="Description" content=""/>  <meta http-equiv="expires" content="0"/><style type="text/css" >body { margin:0; padding:0; background-color: #eecccc;  }.left { float:left; margin-left:1em; }.right { float:right; margin-right:1em; }h1 { margin-left:auto; margin-right:auto; text-align:center; padding:0; font-size:3em; }img { margin:0; padding:0; border-style: none }#content { margin-left:auto; margin-right:auto; text-align:center; padding:.5em; padding-top:.5em; width:750px; background-color: #ee9999; }hr { width:60%; }.test { margin: 1.0em; text-align:left; background-color: #cc6666; }.test:first-letter { float:left; font-size: 3em; font-weight: normal; }span { text-transform:uppercase; }#footer { margin-left:auto; margin-right:auto; text-align:center; padding:.5em; }</style>        </head><body><div id="container"><!-- start container div -->     <div id="hdr">     <a name="top"></a>        <a href="sample.html" class="left" title="left">        <span>The Cybernet Homepage</span></a>        <a href="sample.html" class="right" title="right">        <span>Francais Ici</span></a>        <h1>Heading Here</h1>     </div><!-- end hdr div here -->           <hr />    <div id="content"><!-- page content starts below this comment -->         <!-- Insert page content between the div tags here -->          <div class="test" ><span>This is an example</span> of a 'drop cap' formatting and text-transform:uppercase in the first line of a div.  Page content here .          <span>Page content</span> here . <span>Page content here</span> .          <span>Page</span> content here . <span>Page</span> content here .           Page content here . Page content here . Page content here . Page content here .            Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content  here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here . Page content here . Page content here . Page content here .           Page content here .</div>           <!-- page content ends above this comment -->     </div><!-- end content div -->           <hr />     <div id="footer">          <a href="sitemap.html" title="this link goes to the map for the site">  sitemap  </a>          <a href="mailto:jlhaslip@yahoo.ca?subject=What_Subject">  Web Master  </a>  Copyright 2004 - 2006.            <a href="index.html">   Home Page  </a>          <a href="#top">   Top of this Page  </a>            <a href="http://validator.w3.org/check?uri=referer">  valid-xhtml1.0  </a>     </div>     <!-- end footer div --></div><!-- end container div --></body></html>

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...