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 8 of 8

Thread: Table Question

  1. #1
    Regular Coder
    Join Date
    May 2010
    Posts
    207
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Table Question

    I have tabulated data of beverages with price and beverage. I need to position the price at far right. I don't know if I am doing it right with tables, I used mant td. Below is my code.

    Code:
    <table  cellspacing="0" cellpadding="0">
    			<tr>
    			    <td align="right"> <span class="menu_name"> Classic Drinks</span></td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>	
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >80z</td><td>&nbsp;&nbsp;</td><td >120z</td>
    			</tr>
    			
    			<tr>
    			<td >Classic Drinks</td>
    			  <td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>	
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >&nbsp;</td><td >&nbsp;</td><td >&nbsp;</td>
    				<td >200.00</td><td>&nbsp;&nbsp;</td><td >300.00</td>
    			</tr>
    		</table>

    Below is what I want to achieve
    Code:
    Classic Drink                                       80z             120z
    Regular Brew                                       68.00           168.00
    Decaf                                             178.00            98.00
    Last edited by Anishgiri; 02-21-2013 at 01:28 AM.

  • #2
    Regular Coder
    Join Date
    Aug 2012
    Posts
    120
    Thanks
    0
    Thanked 25 Times in 25 Posts
    <!DOCTYPE html>
    <head>
    <style type="text/css">
    td{text-align:center}
    </style>
    </head>

    <body>

    <table border="1" width="400px">
    <th>Classic Drinks</th>
    <th></th>
    <th>80oz</th>
    <th>120oz</th>

    <tr>
    <td width="25%">Regular Brew</td>
    <td width="25%"></td>
    <td width="20%">68.00</td>
    <td width="20%">168.00</td>
    </tr>

    <tr>
    <td width="25%">Decaf</td>
    <td width="25%"></td>
    <td width="20%">178.00</td>
    <td width="20%">98.00</td>
    </tr>

    </table>
    </body>

    </html>

    Hope this helps
    1 Corinthians 15:3-4 / Ephesians 2:8-9 - What or Who are you living for?

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    The table has three columns - not four or eleven.

    So the HTML needs to look like this to properly define all the semantic parts of the table:

    Code:
    <table>
    <col class="col1">
    <col class="col2">
    <col class="col3">
    <thead>
    <th>Classic Drinks</th>
    <th>80oz</th>
    <th>120oz</th>
    </thead>
    <tbody>
    <tr>
    <td>Regular Brew</td>
    <td>68.00</td>
    <td>168.00</td>
    </tr>
    <tr>
    <td>Decaf</td>
    <td></td>
    <td>178.00</td>
    <td>98.00</td>
    </tr>
    </tbody>
    </table>
    How you want the table to look is defined in CSS - not in HTML.
    So everything else about the table will be in your external CSS file and not in the HTML at all.

    For example the CSS might look like this:

    Code:
    table {border: 1px #000 solid; width:400px;}
    .col1 {width:200px; text-align:left;}
    .col2, .col3 {width:25%;text-align:right;margin-right:25px;}
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #4
    Regular Coder
    Join Date
    May 2010
    Posts
    207
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by felgall View Post
    The table has three columns - not four or eleven.

    So the HTML needs to look like this to properly define all the semantic parts of the table:

    Code:
    <table>
    <col class="col1">
    <col class="col2">
    <col class="col3">
    <thead>
    <th>Classic Drinks</th>
    <th>80oz</th>
    <th>120oz</th>
    </thead>
    <tbody>
    <tr>
    <td>Regular Brew</td>
    <td>68.00</td>
    <td>168.00</td>
    </tr>
    <tr>
    <td>Decaf</td>
    <td></td>
    <td>178.00</td>
    <td>98.00</td>
    </tr>
    </tbody>
    </table>
    How you want the table to look is defined in CSS - not in HTML.
    So everything else about the table will be in your external CSS file and not in the HTML at all.

    For example the CSS might look like this:

    Code:
    table {border: 1px #000 solid; width:400px;}
    .col1 {width:200px; text-align:left;}
    .col2, .col3 {width:25%;text-align:right;margin-right:25px;}
    Below I change the margin right from 25px to 45px. It did not change the layout. I also change from margin right to left, it did not change the layout. Why is that so? I know putting a span style inside a td or th with margin properties will move the text. But it seems that is not the correct approach.
    Code:
    .col2, .col3 {width:25%;text-align:right;margin-right:25px;}

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    Could you show the code that includes the classes? Changing a class that isn't connected to anything won't do anything.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #6
    Regular Coder
    Join Date
    May 2010
    Posts
    207
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I use your code. I change the margin to left with 55px. It did not change anything.

    Code:
    <html>
    <head>
        <style type="text/css">
         
       table {border: 1px #000 solid; width:400px;}
    .col1 {width:200px; text-align:left;}
    .col2, .col3 {width:25%;text-align:right;margin-left:55px;}
         
            
       </style>
     
    </head>
    <body >
    <table>
    <col class="col1">
    <col class="col2">
    <col class="col3">
    <thead>
    <th>Classic Drinks</th>
    <th>80oz</th>
    <th>120oz</th>
    </thead>
    <tbody>
    <tr>
    <td>Regular Brew</td>
    <td>68.00</td>
    <td>168.00</td>
    </tr>
    <tr>
    <td>Decaf</td>
    <td>178.00</td>
    <td>98.00</td>
    </tr>
    </tbody>
    </table>
    
    </body>
    </html>
    Last edited by Anishgiri; 02-22-2013 at 12:59 AM.

  • #7
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Apparently the text-align and margin only work for a class defined on the col tag in some browsers (I had it working in Opera when I first suggested it). So you'll need to move the classes to the individual td tags rather than being able to allocate the class to the entire column in one go. Of the CSS properties you want only the width can be set for the entire column via col but there's little point in keeping those tags when you need the classes on all the tds anyway..

    Code:
    <html>
    <head>
        <style type="text/css">
         
       table {border: 1px #000 solid; width:400px;}
    .col1 {width:200px; text-align:left;}
    .col2, .col3 {width:25%;text-align:right;margin-left:55px;}
         
            
       </style>
     
    </head>
    <body >
    <table>
    
    <thead>
    <th class="col1">Classic Drinks</th>
    <th class="col2">80oz</th>
    <th class="col3">120oz</th>
    </thead>
    <tbody>
    <tr>
    <td class="col1">Regular Brew</td>
    <td class="col2">68.00</td>
    <td class="col3">168.00</td>
    </tr>
    <tr>
    <td class="col1">Decaf</td>
    <td class="col2">178.00</td>
    <td class="col3">98.00</td>
    </tr>
    </tbody>
    </table>
    
    </body>
    </html>
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #8
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    I just changed the classes to apply them to the TD and it worked the way you want it to (using FF18).
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls


  •  

    Posting Permissions

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