Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4

Thread: Tables

  1. #1
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts

    Post Tables

    Hi, im having the worst problem with a table. Tables are my weak point. They are so confusing. Here is my messed up coding.

    Code:
    <table width="40%" style="border: solid 1px white" cellspacing="0" cellpadding="0">
    <tr><td colspan="4" bgcolor="#ffffff"><center><b>Suggested Item Price</b></center></td></tr>
    <tr><td><b>Name</b></td><td><b>Price</b></td></tr>
    </table>
    
    <table width="40%" style="border: solid 1px white" cellspacing="0" cellpadding="0">
    <center><tr><td><b>Item 1</b><td>$1.00</td></tr></td>
    </center>
    </table>

    And this is what i'd like for it to look like,


    I hope to learn by this. Thanks everyone.

  • #2
    New Coder sdcomputerz's Avatar
    Join Date
    Feb 2007
    Location
    Hawaii
    Posts
    62
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Id suggest using css instead of tables.
    You can never have nothing, because nothing is still something.
    SD Computerz
    Free Domain Names
    Gaming Lagoon - Buying your game time!

  • #3
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,629
    Thanks
    6
    Thanked 1,002 Times in 975 Posts
    CSS instead of tables? What kind of advice is that?

    1. CSS doesn’t replace tables. It’s there for giving them a style.
    2. Tables are the perfect solution for this kind of content.


    This might give you a start.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    table {
    	width: 300px;
    	border-bottom: 1px solid black;
    	border-top: 1px solid black;
    	margin-top: 10px;
    }
    caption {border: 1px solid black;}
    thead {}
    thead th {margin-bottom: 10px;}
    th {text-align: left;}
    th + th {text-align: right;}
    td + td {text-align: right;}
    </style>
    </head>
    
    <body>
    <table cellspacing="0" cellpadding="0" border="1" rules="groups">
      <caption>Suggested Item Price</caption>
    	<thead>
    		<tr>
    			<th>Name</th>
    			<th>Price</th>
    		</tr>
    	</thead>
    	<tbody>
    		<tr>
    			<td>Item 1 </td>
    			<td>$ 1.00 </td>
    		</tr>
    		<tr>
    			<td>Item 2 </td>
    			<td>$ 2.00 </td>
    		</tr>
    		<tr>
    			<td>Item 3 </td>
    			<td>$ 3.00 </td>
    		</tr>
    	</tbody>
    </table>
    </body>
    </html>
    Unfortunately it’s not so easy to separate the sections visually (to work in all browsers at least). And note: I didn’t optimize it for IE 6. It’s just a suggestion for you to build upon.

  • #4
    Senior Coder
    Join Date
    May 2005
    Posts
    2,137
    Thanks
    96
    Thanked 72 Times in 72 Posts
    Excellent, this looks like it would work. If I have any problems ill let you know. Thanks so much

    I am going to play with it to learn how to do it.
    Last edited by masterofollies; 06-04-2007 at 03:21 AM. Reason: learning


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •