38 users online (0 members and 38 guests)  

Thread: Tables


  Results 1 to 7 of 7

Related

  1. Help with Tables!!!!    Forum: HTML Forum
    Replies: 1
  2. Replies: 2
  3. css for tables    Forum: CSS Forum
    Replies: 1
  4. Replies: 2
  5. help with tables!    Forum: HTML Forum
    Replies: 2
  1. #1
    Reverb's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Location
    Auckland, New Zealand
    Posts
    3

    Tables

    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/ ??
    Last edited by Reverb; 12-29-2003 at 04:22 AM.

  2. #2
    coothead's Avatar
    bald headed old fart

    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    732
    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...
    1. css.somepeople
    2. w3schools


    cthead

  3. #3
    Reverb's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Location
    Auckland, New Zealand
    Posts
    3
    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.

  4. #4
    Enigma's Avatar
    Senior Member

    Status
    Offline
    Join Date
    Nov 2000
    Posts
    426
    Can you give us a link to what you have so far?

  5. #5
    Reverb's Avatar
    New User

    Status
    Offline
    Join Date
    Dec 2003
    Location
    Auckland, New Zealand
    Posts
    3
    My site isnt up, i wanna finish it before putting it up.

  6. #6
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Talking

    Quote 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.

  7. #7
    PoDuck's Avatar
    New User

    Status
    Offline
    Join Date
    Jan 2004
    Posts
    4
    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>



Tags for this Thread