Solved

FP2002 or DW3 : Creating Fixed Width Table with Percentage

Posted on 2004-04-15
18
270 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Introduction In this tutorial, I'll explain how to create an animated progress meter in a wireframe prototype developed using Axure RP 7.0 - a leading prototyping tool for designing web sites and software. (For more information about Axure and gett…
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 automatically show related posts at the bottom of a blog post in WordPress. This will be demonstrated using a Windows 8 PC. Plugin “Yet Another Related Posts Plugin” will be used. Go to your…
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…

751 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