?
Solved

FP2002 or DW3 : Creating Fixed Width Table with Percentage

Posted on 2004-04-15
18
Medium Priority
?
272 Views
Last Modified: 2013-12-24
I'm used to setting the table width in pixels instead of percentage. Cuz it is easier to work with. However, now I need to use table that uses width in percentage.

Say I wanna create 1 tab - two images involved (one rounded corner on the left and one on the right)
I will use a table, divided into 4 column in one row. That means there's only 4 cells involved.

In the first column the width=1%, I put in image rounded cornerleft with width size=5pixels
In the second column, width=20%, I can just fill in the cell with background color similar to the color of the rounded corners.
In the third column, width=1%, I inserted the second image rounded cornerright with width size=5pixels
And the fourth column, width=80%, cell color left to white.

When I preview it in browser, it should look good, because I tried it using table with pixels width and it works properly cross browsers but now, using table with width in percentage, it doesn't work at all. There' a gap between the first image and the second column.

What's the problem? Any fast solution?

Regards
Sylvia
0
Comment
Question by:sylviawee
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 5
  • 3
  • +1
18 Comments
 
LVL 12

Expert Comment

by:rcmb
ID: 10831712
Have you verified the cell padding and cell spacing?

Right click on the table and select table properties. In the table properties set the cell padding to 0 and the cell spacing to 0. Also set Borders Size to 0 and uncheck the Show both cells and table borders.

This should correct the problem.

I also recommend setting the fourth column to 78% vice 80% to ensure you do not exceed the width of the window. In you current configuration you will exceed the window by 2%.

RCMB
0
 

Author Comment

by:sylviawee
ID: 10831942
Yes, I've done that...cellpading/spacing/border=0. Here's the code...

<table border="0" cellspacing="1" width="100%">
            <tr>
                        <td width="1%" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="18%" bgcolor="#CCCCCC" valign="top">Hello</td>
                        <td width="1%" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="78%" valign="top">BlankWhiteSpace</td>
            </tr>
</table>

Here how it looks like.
http://dev.otsb.com.my/chat/images/shot.gif

Help me out. Thanks.

0
 
LVL 12

Expert Comment

by:rcmb
ID: 10832058
In your code you have:

<table border="0" cellspacing="1" width="100%">
          <tr>
                    <td width="1%" valign="top">
                    <img src="tableft.gif" width="5" height="29"> </td>
                    <td width="18%" bgcolor="#CCCCCC" valign="top">Hello</td>
                    <td width="1%" valign="top">
                    <img src="tabright.gif" width="5" height="29"></td>
                    <td width="78%" valign="top">BlankWhiteSpace</td>
          </tr>
</table>

On the first line change cellspacing to read cellspacing="0" width="100%"

RCMB
0
Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

 
LVL 12

Expert Comment

by:rcmb
ID: 10832068
Also I see that you have the second cell width at 18% vice your previous setting of 20%

1 + 18 + 1 + 78 = 98

Make your cell widths read 1%, 20%, 1%, 78% so you get 100% utilized

RCMB
0
 
LVL 31

Accepted Solution

by:
seanpowell earned 1200 total points
ID: 10832466
1% is not a good idea for a cell that needs to be 5 pixels wide.
And you should set the padding explicitly to be safe :-)

<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tr>
    <td width="5" valign="top"><img src="tableft.gif" width="5" height="29"></td>
    <td width="20%" bgcolor="#CCCCCC" valign="top" style="padding:5px;">Hello</td>
    <td width="5" valign="top"><img src="tabright.gif" width="5" height="29"></td>
    <td width="80%" valign="top">BlankWhiteSpace</td>
  </tr>
</table>
0
 
LVL 14

Expert Comment

by:hhammash
ID: 10833329
Hi,

Try replacing 100% with the actual size of 100% which is 677 and divide accordingly

<table border="0" cellspacing="0" cellpadding="0" width="677">
  <tr>
    <td width="9" valign="top"><img src="tableft.gif" width="5" height="29"></td>
    <td width="120" bgcolor="#CCCCCC" valign="top" style="padding:5px;">Hello</td>
    <td width="9" valign="top"><img src="tabright.gif" width="5" height="29"></td>
    <td width="531" valign="top">BlankWhiteSpace</td>
  </tr>
</table>

It is more accurate when you specify the width.

Regards
hhammash
0
 
LVL 14

Expert Comment

by:hhammash
ID: 10833393
Hi,

Sorry,  here the columns=667

<table border="0" cellspacing="0" cellpadding="0" width="677">
  <tr>
    <td width="10" valign="top"><img src="tableft.gif" width="5" height="29"></td>
    <td width="116" bgcolor="#CCCCCC" valign="top" style="padding:5px;">Hello</td>
    <td width="10" valign="top"><img src="tabright.gif" width="5" height="29"></td>
    <td width="531" valign="top">BlankWhiteSpace</td>
  </tr>
</table>


Thanks
0
 
LVL 14

Expert Comment

by:hhammash
ID: 10833397
Or just see how it is suitable for you and divide.


0
 

Author Comment

by:sylviawee
ID: 10838526
Hhammash,

Using your suggestion is easier because that is pixel - I'm so used to using pixel width rather than percentage, but I am in a situation that I need to use percentage width. :(

Tried all the above suggestions, still doesn't work.
0
 
LVL 12

Expert Comment

by:rcmb
ID: 10838584
Please paste your table code again.

RCMB
0
 

Author Comment

by:sylviawee
ID: 10838726
Seanpowell,

If TABLE="100%" and two TD with "20%" and "80%" each and another two TD with "5", that would make it more than 100% rite?
0
 

Author Comment

by:sylviawee
ID: 10838751
Table Using Pixels (the best and neat approach)

<table border="0" cellspacing="0" cellpadding="0" width="760">
            <tr>
                        <td width="5" valign="top">
                        <img border="0" src="tableft.gif" width="5" height="29"></td>
                        <td width="150" bgcolor="#CCCCCC" style="border-top-style: solid; border-top-
width: 1 border-top-color: #999999">
                        <p align="center">Customer Service</td>
                        <td width="5" valign="top">
                        <img border="0" src="tabright.gif" width="5" height="29"></td>
                        <td width="5" valign="top">
                        <img border="0" src="tableft.gif" width="5" height="29"></td>
                        <td width="150" bgcolor="#CCCCCC" style="border-top-style: solid; border-top-width: 1 border-top-color: #999999">
                        <p align="center">Customer Service</td>
                        <td width="5" valign="top">
                        <img border="0" src="tabright.gif" width="5" height="29"></td>
                        <td width="5" valign="top">
                        <img border="0" src="tableft.gif" width="5" height="29"></td>
                        <td width="150" bgcolor="#CCCCCC" style="border-top-style: solid; border-top-width: 1 border-top-color: #999999">
                        <p align="center">Customer Service</td>
                        <td width="5" valign="top">
                        <img border="0" src="tabright.gif" width="5" height="29"></td>
                        <td width="600" valign="top">&nbsp;</td>
            </tr>
</table>
0
 

Author Comment

by:sylviawee
ID: 10838756
Table Using Percent - Sean Powell
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="5" style="border-collapse: collapse" bordercolor="#111111">
            <tr>
                        <td width="5" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%" bgcolor="#CCCCCC" valign="top" style="padding:5px">
                        Hello</td>
                        <td width="5" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="5" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%" bgcolor="#CCCCCC" valign="top" style="padding:5px">
                        Hello</td>
                        <td width="5" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="5" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%" bgcolor="#CCCCCC" valign="top" style="padding:5px">
                        Hello</td>
                        <td width="5" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="80%" valign="top">&nbsp;</td>
            </tr>
</table>
0
 

Author Comment

by:sylviawee
ID: 10838758
Table Using Percent - RCMB

<table border="0" cellspacing="0" cellpadding="0" width="100%">
            <tr>
                        <td width="1%" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%%" bgcolor="#CCCCCC" valign="top">Hello</td>
                        <td width="1" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="1%" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%%" bgcolor="#CCCCCC" valign="top">Hello</td>
                        <td width="1" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="1%" valign="top">
                        <img src="tableft.gif" width="5" height="29"> </td>
                        <td width="20%%" bgcolor="#CCCCCC" valign="top">Hello</td>
                        <td width="1" valign="top">
                        <img src="tabright.gif" width="5" height="29"></td>
                        <td width="78%" valign="top">&nbsp;</td>
            </tr>
</table>
0
 

Author Comment

by:sylviawee
ID: 10838770
Have a look at how it look like here...

http://dev.otsb.com.my/chat/images/shot2.gif
0
 
LVL 12

Assisted Solution

by:rcmb
rcmb earned 300 total points
ID: 10841196
Delete your table in html view and replace it with the code below:

<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%">
  <tr>
    <td width="1%"><img border="0" src="tableft.gif" width="5" height="29"></td>
    <td width="20%" bgcolor="#CCCCCC" valign="top">Hello</td>
    <td width="1%" valign="top">
    <img border="0" src="tabright.gif" width="5" height="29"></td>
    <td width="80%" bgcolor="#CCCCCC" valign="top">Hello</td>
  </tr>
</table>

Then take a look - I think you will see the table as you desire.

RCMB
0
 

Author Comment

by:sylviawee
ID: 10866091
RCMB the first cell and the second cell doesn't give a smooth look, it still has that white gap in between.
However, seanpowell's code works on second testing ...

just wanna thank you guys for the effort. case closed!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 10867755
Thanks Sylvia :-)
0

Featured Post

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When deciding to adopt any help desk solutions many factors should be explored before taking decisions. This will change from business to another but in general there are some kind of rule of thumb. Here are some quick tips: Do we need only ticket…
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…
Suggested Courses

719 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question