Tables

**Reverb** · 12-29-2003, 02:42 AM

Hey, im wondering how to make my tables look like these tables on this page, http://www.warp9ltd.net.nz/store/ .
I dont know how to make them have a single thin line border. Iv'e tried for ages but i still cant get it right.How would i go about making my tables look like the tables on http://www.warp9ltd.net.nz/store/ ??

**coothead** · 12-29-2003, 11:34 AM

Hi there Reverb,

Try this example...

Code:

 
<html>
<head>

<style type="text/css">
<!--
table
    {
     width:200px;
     height:200px;
     border: solid 1px #000000;
     position:absolute;
     left:200px;
     top:200px;
    }
//-->
</style>

</head>
<body>

<table><tr>
<td>this is a table with a 1px solid border</td>
</tr></table>

</body>
</html>

If you want to learn more about 'C.S.S.'
then these two sites are worth visiting...

css.somepeople
w3schools

cthead

**Reverb** · 12-29-2003, 07:57 PM

Hey, that gives me the thin line border, but it still doesnt look like the tables on that page, my background-header image has a gap around it, like, the border isnt touching the header like on that site. How do i do that? i want the table to look like those tables on that site.

**Enigma** · 12-31-2003, 12:20 AM

Can you give us a link to what you have so far?

**Reverb** · 12-31-2003, 12:26 AM

My site isnt up, i wanna finish it before putting it up.

**Android** · 12-31-2003, 08:38 AM

Originally Posted by Reverb

My site isnt up, i wanna finish it before putting it up.

That's kind of like asking us to tune up a car over the telephone, isn't it?

It looks to me like they're using spacer gifs to achieve the layout. Not sure, though. It's alot of code to wade through to see what they're doing just to guess how you can do it too......
Off the bat, I would use CSS positioning and use margins to shift things the way you want, but it's not easy for cross-browser compatability.

**PoDuck** · 01-02-2004, 07:36 PM

Although there is nothing displaying the copyright, they are using osCommerce. I have a bit of experience with this script, and I can tell you that the way they get their borders is to nest tables with visible borders inside cells with invisible borders and cell padding. This code will give you a very similar layout to what they have. It uses 4 tables, and not just one. Maybe that is what your problem is.

HTML Code:

<html>
<head>
<style type="text/css">
<!--
td.header {
	background-color: #0099CC;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
}
table.info {
	border: 1px solid #999999;
}
td.mainbox {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	background-color: #F8F8F8;
	padding: 5px;
}
-->
</style>
</head>
<body>
<table width="100%" border="0" cellspacing="10" cellpadding="0">
  <tr>
    <td valign="top"> 
      <table width="150" border="0" cellpadding="0" cellspacing="0" class="info">
        <tr> 
          <td class="header">Categories</td>
        </tr>
        <tr> 
          <td class="mainbox">Other text goes here.<br />
            <br />
            Links, info or whatever go here.</td>
        </tr>
      </table>
    </td>
    <td width="100%" valign="top"><font size="2" face="Arial, Helvetica, sans-serif">You 
      may want text on top of the main section like on the page you showed.</font>
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="info">
        <tr>
          <td class="header">Main Section of page</td>
        </tr>
        <tr>
          <td class="mainbox">Here is where the bulk of your page will go.</td>
        </tr>
      </table>
    </td>
    <td width="150" valign="top">
	  <table width="150" border="0" cellpadding="0" cellspacing="0" class="info">
        <tr>
          <td class="header">Other Categories</td>
        </tr>
        <tr>
          <td class="mainbox">Here you can put other text or categories.</td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</body>
</html>

Thread: Tables

Thread Tools

Related

Help with Tables!!!! Forum: HTML Forum

TABLES- can any one help me stop the text streching the tables. Forum: HTML Forum

css for tables Forum: CSS Forum

Avoiding nested tables or grouping separate tables in chunks Forum: HTML Forum

help with tables! Forum: HTML Forum

Tables

Tags for this Thread