table percents

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

table percents

Post by s.dot »

Code: Select all

<table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td width="49%">data</td>
        <td width="2%">&nbsp;</td>
        <td width="49%">data</td>
    </tr>
</table>
Now I know I shouldn't be using tables for layouts, and I shouldn't have just an &nbsp; in a table cell :P.

But, is it possible using this setup, to get the middle cell to be 1% and the other two cells to be equal in size? 2% seems to be a little too big. I think 1% would work nicely.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
$phpNut
Forum Commoner
Posts: 40
Joined: Tue May 09, 2006 5:13 pm

Post by $phpNut »

Why not do both 50% and use a CSS padding value?
User avatar
Oren
DevNet Resident
Posts: 1640
Joined: Fri Apr 07, 2006 5:13 am
Location: Israel

Post by Oren »

I agree with $phpNut, but if for some reason it has to be like that, then 'auto' should do the trick :wink:
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

The padding goes on the inside of the table cell, but i have a border on the cells so I would need the padding to go on the outside. I'll try the auto.
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
$phpNut
Forum Commoner
Posts: 40
Joined: Tue May 09, 2006 5:13 pm

Post by $phpNut »

Now I know I shouldn't be using tables for layouts, and I shouldn't have just an &nbsp; in a table cell Razz.
So why are you using tables then? Just as a question.
User avatar
s.dot
Tranquility In Moderation
Posts: 5001
Joined: Sun Feb 06, 2005 7:18 pm
Location: Indiana

Post by s.dot »

Easier for me than trying to get div layers to be cross browser compatible. :P
Set Search Time - A google chrome extension. When you search only results from the past year (or set time period) are displayed. Helps tremendously when using new technologies to avoid outdated results.
User avatar
$phpNut
Forum Commoner
Posts: 40
Joined: Tue May 09, 2006 5:13 pm

Post by $phpNut »

Ah shortcut then :?
User avatar
John Cartwright
Site Admin
Posts: 11470
Joined: Tue Dec 23, 2003 2:10 am
Location: Toronto
Contact:

Post by John Cartwright »

Code: Select all

<table width="100%" cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td style="padding-right: 2px;">data</td>
        <td style="padding-left: 2px;">data</td>
    </tr>
</table>
wouldn't work as suggested?
User avatar
$phpNut
Forum Commoner
Posts: 40
Joined: Tue May 09, 2006 5:13 pm

Post by $phpNut »

Why not mess with the cell spacing?

Code: Select all

<table width="100%" cellspacing="5px" cellpadding="0" border="0">
    <tr>
        <td style="border: 2px outset #666;">data</td>
        <td style="border: 2px outset #666;">data</td>
    </tr>
</table>
Admittedly if all the way around, but id does the job.
User avatar
Benjamin
Site Administrator
Posts: 6935
Joined: Sun May 19, 2002 10:24 pm

Post by Benjamin »

Why not a 2 column table with the left column padding set to Xpx?
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post by matthijs »

Maybe not using tables is easier. Of course don't know what the rest of the page/layout is supposed to do, but this works fine:

Code: Select all

<!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" xml:lang="en" lang="en">

<head>
<title>Untitled</title>
<style type="text/css">
<!-- 
#wrapper {}
#main { float:left;width:49.5%;border:1px solid #ddd;}
#sub { float:right;width:49.5%;border:1px solid #ddd;} 
#wrapper p {margin:0;padding:1em;}
-->
</style>
</head>
<body>
<div id="wrapper">
<div id="main">
<p>Data</p>
</div>
<div id="sub">
<p>Data</p>
</div>
</div>
</body>
</html>
Only issue is that below, say 500px window-width, the floated divs fall below eachother. So depending on thekind of layout you'll want to set a min-width or do something else.
Post Reply