Go Back   CodingForums.com > :: Client side development > HTML & CSS

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 01-08-2013, 07:12 PM   PM User | #1
odandezemaar
New to the CF scene

 
Join Date: Jan 2013
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
odandezemaar is an unknown quantity at this point
Fixed width TD

Hello,

I would like to get a table (width = 99% of the page)
Inside that table there can be 5 TD's each 20% of the table's width.
When I only have 2 TD's the are stretched to 50% each. What am I doing wrong?

Thank you very much!

Frank.

Code:
<table width="99%" cellpadding="5" cellspacing="10" style="text-align:left;">
	<TR>
		<td valign="top" style="width:20%;background-color:#ffffff;border:solid 1px #7c9ba7;">
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="100%" align="left" style="padding-bottom:2px;"><B>naam</B></a></td>
				</tr>
				<tr>
					<td width="100%" align="left" style="padding-bottom:2px;">adres</td>
				</tr>
				<tr>
					<td width="100%" align="left" style="padding-bottom:12px;">postcode</td>
				</tr>
				<tr>
					<td width="100%" align="left">Doei!</td>
				</tr>
			</table>
		</td>
		<td valign="top" style="width:20%;background-color:#ffffff;border:solid 1px #7c9ba7;">
			<table width="100%" cellpadding="0" cellspacing="0" border="0">
				<tr>
					<td width="100%" align="left" style="padding-bottom:2px;"><B>naam</B></a></td>
				</tr>
				<tr>
					<td width="100%" align="left" style="padding-bottom:2px;">adres</td>
				</tr>
				<tr>
					<td width="100%" align="left" style="padding-bottom:12px;">postcode</td>
				</tr>
				<tr>
					<td width="100%" align="left">Doei!</td>
				</tr>
			</table>
		</td>
	</tr>
</table>
odandezemaar is offline   Reply With Quote
Old 01-08-2013, 07:52 PM   PM User | #2
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,392
Thanks: 18
Thanked 351 Times in 350 Posts
sunfighter is on a distinguished road
I would not recommend putting a table inside of a table.
td's fill out the table width wise unless you give them a width. If you have two td's they will be 50% width. Only way that changes is if you over load one with more content than the td can take.

Start with this:
Code:
<table width="200px" border="1">
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
Than change it ti this
Code:
<table width="200px" border="1">
<tr>
<td>text</td>
<td>a lot more text than you really need</td>
</tr>
</table>
And than to this
Code:
<table width="200px" border="1">
<tr>
<td width="100px">text</td>
<td>a lot more text than you really need</td>
</tr>
</table>
What your trying to do:

Code:
<table width="99%" border="1" cellpadding="5" cellspacing="10" style="text-align:left;">
<tr>
	<td  align="left" style="padding-bottom:2px;"><B>naam</B></td>
	<td  align="left" style="padding-bottom:2px;"><B>naam</B></td>
</tr><tr>
	<td  align="left" style="padding-bottom:2px;">adres</td>
	<td  align="left" style="padding-bottom:2px;">adres</td>
</tr><tr>
	<td  align="left" style="padding-bottom:12px;">postcode</td>
	<td  align="left" style="padding-bottom:12px;">postcode</td>
</tr><tr>
	<td  align="left">Doei!</td>
	<td  align="left">Doei!</td>
</tr>
</table>

Last edited by sunfighter; 01-08-2013 at 07:58 PM.. Reason: added What your trying to do:
sunfighter is offline   Reply With Quote
Old 01-09-2013, 03:59 PM   PM User | #3
odandezemaar
New to the CF scene

 
Join Date: Jan 2013
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
odandezemaar is an unknown quantity at this point
Thank you for your reply!

The "problem" is: I don't know the amount of TD's. It can be 1 to 5.
When there are only 2 TD's, I would like to fill only 40% of the page.
odandezemaar is offline   Reply With Quote
Old 01-10-2013, 03:37 PM   PM User | #4
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,392
Thanks: 18
Thanked 351 Times in 350 Posts
sunfighter is on a distinguished road
Quote:
Originally Posted by odandezemaar View Post
Thank you for your reply!

The "problem" is: I don't know the amount of TD's. It can be 1 to 5.
When there are only 2 TD's, I would like to fill only 40% of the page.
My answer was to try and explain how to use tables correctly. I'm not sure you should be using tables. I think your trying to use tables to make a layout and if that is correct you should look into using <div>'s to do that for you. Otherwise you might need to style five tables and pick which one to show based on the number of <td>'s you are showing.

Why not please your complete code and we'll take a look at it.
sunfighter is offline   Reply With Quote
Old 01-14-2013, 02:01 PM   PM User | #5
odandezemaar
New to the CF scene

 
Join Date: Jan 2013
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
odandezemaar is an unknown quantity at this point
Hello Sunfighter,

Thank you for your reply! (Sorry for my late reaction, but I'm busy with completing our baby room)

A friend of me also told me to use div's, but I'm not very familiar with that.

What I'm trying to do is to display all the customers ("relaties" in Dutch) in blocks. I would like to give a block a 150 px. So in that case, the amount of blocks at one row depends on the width of the page (resolution).

If that is not possible, I would like to set a counter to 5, and after 5 blocks I start with a new row.

This is my code till now:

PHP Code:
<?
$select 
"SELECT * FROM relaties ORDER BY id";
$query mysql_query($select);

if(
mysql_num_rows($query) == 0)
{
    echo 
"<div class=\"titel\">Empty</div>";
    echo 
"<div class=\"bericht\">No relations yet.</div>";
}
else
{
    echo 
"<P>";
    echo 
"<div class=\"titel\" style=\"text-align:left;\">relaties</div>";
    echo 
"<div class=\"bericht\" style=\"text-align:left;\">";
    echo 
"<table width=\"99%\" cellpadding=\"5\" cellspacing=\"10\" style=\"text-align:left;\"><TR>";
    
    while(
$list mysql_fetch_object($query))
    {
        
$j++;
        
?>
        <td valign="top" style="width:20%;background-color:#ffffff;background-image:url('afbeeldingen/bgbuttons.gif');background-repeat:repeat-y;border:solid 1px #7c9ba7;">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="100%" align="left" style="padding-bottom:2px;"><a href="index.php?pag=relaties&actie=edit&id=<? echo $list->id;?>"><B><? echo $list->Naam;?></B></a></td>
                </tr>
                <tr>
                    <td width="100%" align="left" style="padding-bottom:2px;"><? echo $list->Adres;?></td>
                </tr>
                <tr>
                    <td width="100%" align="left" style="padding-bottom:12px;"><? echo $list->Postcode;?></td>
                </tr>
                <tr>
                    <td width="100%" align="left">(Tarief: € <? echo number_format($list->tarief2',''');?>)</td>
                </tr>
            </table>
        </td>
        <?
        
        
if($j == 0)
            echo 
"</tr><tr>";
    }
    
    echo 
"</tr></table>";
    echo 
"</div>";
}
?>
odandezemaar is offline   Reply With Quote
Old 01-14-2013, 07:28 PM   PM User | #6
linek98
New Coder

 
Join Date: Dec 2012
Location: England
Posts: 18
Thanks: 0
Thanked 4 Times in 4 Posts
linek98 is an unknown quantity at this point
Use divs like this:
Code:
<div id="main">
  <div style="width: 20%; float: left;">
    <div class="row">
      <table>
        <tr>
          <td>11111</td>
          <td>22222</td>
          <td>33333</td>
          <td>44444</td>
          <td>55555</td>
        </tr>
      </table>
    </div>
  </div>
</div>
Where div of id "main" is your main storage div which will determine entire width of your listing.
First child div
Code:
<div style="width: 20%; float: left;">
Is the one we want to modify according to number of rows displayed (what you want to modify is just width property).
Div of "row" class is to make tables display below each other.

So basically what you want to do is check how many rows your SQL statement returned with mysql_num_rows function and calculate width of each div.
PHP Code:
<?
$select 
"SELECT * FROM relaties ORDER BY id";
$query mysql_query($select);

$count mysql_num_rows($query);
if(
$count == 0)
{
    echo 
"<div class=\"titel\">Empty</div>";
    echo 
"<div class=\"bericht\">No relations yet.</div>";
}
else
{
    
$width floor(100 / (floor($count 5) + 1));
    echo 
"<P>";
    echo 
"<div class=\"titel\" style=\"text-align:left;\">relaties</div>";
    echo 
"<div class=\"bericht\" style=\"text-align:left;\">";
    echo 
"<div id=\"main\">";
    echo 
'<div style="width: '.$width;.'%; float: left;background-color:#ffffff;background-image:url("afbeeldingen/bgbuttons.gif");background-repeat:repeat-y;border:solid 1px #7c9ba7;">';
    
    while(
$list mysql_fetch_object($query))
    {
        
$j++;
        
?>
        
          <div class="row">
            <table width="100%" cellpadding="0" cellspacing="0" border="0">
                <tr>
                    <td width="100%" align="left" style="padding-bottom:2px;"><a href="index.php?pag=relaties&actie=edit&id=<? echo $list->id;?>"><B><? echo $list->Naam;?></B></a></td>
                </tr>
                <tr>
                    <td width="100%" align="left" style="padding-bottom:2px;"><? echo $list->Adres;?></td>
                </tr>
                <tr>
                    <td width="100%" align="left" style="padding-bottom:12px;"><? echo $list->Postcode;?></td>
                </tr>
                <tr>
                    <td width="100%" align="left">(Tarief: € <? echo number_format($list->tarief2',''');?>)</td>
                </tr>
            </table>
          </div>
        <?
        
        
if($j == 0)
          echo 
'</div><div style="width: '.$width;.'%; float: left;background-color:#ffffff;background-image:url("afbeeldingen/bgbuttons.gif");background-repeat:repeat-y;border:solid 1px #7c9ba7;">';
    
    }
    
    echo 
"</div></div>";
    echo 
"</div>";
}
?>
It should do it's job but I did it on the fly so there might be some problems/typos. I'm still not sure about calculation of $width variable.
linek98 is offline   Reply With Quote
Old 01-15-2013, 04:23 PM   PM User | #7
sunfighter
Senior Coder

 
Join Date: Jan 2011
Location: Missouri
Posts: 2,392
Thanks: 18
Thanked 351 Times in 350 Posts
sunfighter is on a distinguished road
@linek98 The idea was to eliminate tables altogether and use divs instead. Not put a table in a div.

@odandezemaar your last post works so we'll leave it like that. Only problem I ran into was your not defining $j.
So this might help you:
Code:
....
else
{
	$j=0;  // ADD THIS HERE
    echo "<P>";
....
sunfighter is offline   Reply With Quote
Old 01-15-2013, 04:46 PM   PM User | #8
COBOLdinosaur
Regular Coder

 
COBOLdinosaur's Avatar
 
Join Date: Jul 2002
Location: Canada
Posts: 293
Thanks: 0
Thanked 18 Times in 18 Posts
COBOLdinosaur is an unknown quantity at this point
Actually I not sure that a table is not appropriate. The data appears to be tabular and so a table is correct. However it is easier to control dimensions with divs so another way to do it might be div tags styled as table cells
__________________
100% standards compliant code is 100% correct 100% of the time.
one of my toys from my repository and perhaps some help getting help

Cd&
COBOLdinosaur is offline   Reply With Quote
Old 01-15-2013, 05:28 PM   PM User | #9
linek98
New Coder

 
Join Date: Dec 2012
Location: England
Posts: 18
Thanks: 0
Thanked 4 Times in 4 Posts
linek98 is an unknown quantity at this point
I believe you should always use tables on data displayed in tabular form (there might be some exceptions but very few in my opinion). I think that divs acting like tables are misleading.
linek98 is offline   Reply With Quote
Old 01-15-2013, 06:53 PM   PM User | #10
COBOLdinosaur
Regular Coder

 
COBOLdinosaur's Avatar
 
Join Date: Jul 2002
Location: Canada
Posts: 293
Thanks: 0
Thanked 18 Times in 18 Posts
COBOLdinosaur is an unknown quantity at this point
Quote:
divs acting like tables are misleading.
Then we need to remove about 70% of the CSS and 90% of the scripting from the Internet because the only stuff that is not "misleading" are plain old text documents like we did 15 years ago. All formatting and presentation enhancement change the character of the page. Limiting what properties you have in your toolkit is like giving a chef nothing but a frying pan and a knife.

Floats are not natural behavior, using percentages is "misleading" because that is not the real size. What nonsense.
__________________
100% standards compliant code is 100% correct 100% of the time.
one of my toys from my repository and perhaps some help getting help

Cd&
COBOLdinosaur is offline   Reply With Quote
Old 01-15-2013, 08:37 PM   PM User | #11
linek98
New Coder

 
Join Date: Dec 2012
Location: England
Posts: 18
Thanks: 0
Thanked 4 Times in 4 Posts
linek98 is an unknown quantity at this point
What I meant is making div acts EXACTLY like tables. Why use divs when you want to display data of your users in columns like name, e-mail, status, etc? Using tables is easier and makes more sense.
linek98 is offline   Reply With Quote
Old 01-15-2013, 08:47 PM   PM User | #12
COBOLdinosaur
Regular Coder

 
COBOLdinosaur's Avatar
 
Join Date: Jul 2002
Location: Canada
Posts: 293
Thanks: 0
Thanked 18 Times in 18 Posts
COBOLdinosaur is an unknown quantity at this point
Except that a div styled as a cell is not s redefinition of the div, it is a merging of properties of the td and div. The hybrid has some qualities of each. It is much easier to control height and width of a div, but easier to manage data positioning inside a table like structure.

Properties are not put in the standard without heavy lobbying from developers, manufacturers, and user groups who present use cases. The properties are there because if they were not there would need to be another tag that has the properties that result from applying display:table-cell to existing tags.

Cd&
__________________
100% standards compliant code is 100% correct 100% of the time.
one of my toys from my repository and perhaps some help getting help

Cd&
COBOLdinosaur is offline   Reply With Quote
Old 01-19-2013, 02:34 PM   PM User | #13
odandezemaar
New to the CF scene

 
Join Date: Jan 2013
Posts: 4
Thanks: 0
Thanked 0 Times in 0 Posts
odandezemaar is an unknown quantity at this point
Thank you very much for your help, with that help I realized it!
odandezemaar is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 10:48 PM.


Advertisement
Log in to turn off these ads.