Solved

FP2002 or DW3 : Creating Fixed Width Table with Percentage

Posted on 2004-04-15
18
269 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
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 
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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

In this short web based tutorial, I wanted to show users how they can still use the powers of FrontPage in conjunction with Expression Web 3.  Even though Microsoft eliminated the use of Web components, we can still use them with FrontPage and edit …
Objective of This Article In 1990’s, when I was a budding software professional, I had a lot of confusion about which stream or technology, I had to choose to build my career. In those days, I had lot of confusion like whether to choose System so…
The purpose of this video is to demonstrate how to insert an Iframe into WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Open Page or Post…
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…

830 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