Table Question

Anishgiri · 02-21-2013, 01:25 AM

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

Brandnew · 02-21-2013, 06:51 AM

<!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

felgall · 02-21-2013, 08:39 AM

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;}

Anishgiri · 02-21-2013, 01:40 PM

Quote:

Originally Posted by felgall

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;}

jerry62704 · 02-21-2013, 02:13 PM

Could you show the code that includes the classes? Changing a class that isn't connected to anything won't do anything.

Anishgiri · 02-22-2013, 12:56 AM

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>

felgall · 02-22-2013, 01:57 AM

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>

jerry62704 · 02-22-2013, 02:13 PM

I just changed the classes to apply them to the TD and it worked the way you want it to (using FF18).