Solved

FP2002 or DW3 : Creating Fixed Width Table with Percentage

Posted on 2004-04-15
18
267 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
  • 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
 
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 400 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
Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Now that Expression Web 4.0 (http://www.microsoft.com/expression/products/Upgrade.aspx) is free if you buy or have the full version of Expression Web 3.0, now is the best time to  migrate from FrontPage to Expression Web (http://www.frontpage-to-exp…
This guide will walk you through the essential considerations and tech stack for building scalable websites. Know how to grow your business the smart way!
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…

863 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

Need Help in Real-Time?

Connect with top rated Experts

22 Experts available now in Live!

Get 1:1 Help Now