Table Cell sizes

Posted on 2011-04-28
Last Modified: 2012-05-11
The outcome I am looking for is to have the content of the middle of 3 cells always be centered between the content of the outer 2 cells.

My initial thought was to just create a 1 row 3 cell table with align left, center, right respectfully.  However the auto widths aren't staying tight to the content like I would hope.

The last and middle cells text will always be the same, but the first cell will change depending on a  number of situations.

The possible text for the first cell will be:
Chat - Debate Room
1 member chatting - Join!
x,xxx members chatting - Join!

This is the current html that isn't cutting it:

<div class="postwallrightlinks">
    	<table cellspacing="0" cellpadding="0">
                	<td align="left"><a title="Chat Now!" href="/Chat.htm">Chat - Debate Room</a></td>
                    <td align="center"><a title="Blog" href="/Blog.htm">Blogs</a></td>
                    <td align="right"><a title="Go to My 10 I Believe Question" href="/AdminPage_EditProfile.aspx">Go to My 10 I Believe Questions</a></td>

Open in new window

Question by:RDurish
    LVL 82

    Expert Comment

    by:Dave Baldwin
    Unless you use fixed widths, table cells adjust to the content.  They're supposed to.
    LVL 2

    Accepted Solution


    your solution is -
    <table width="99%" border="0" cellspacing="0" cellpadding="0">
    <td style="width:33%; text-align:left"><a title="Chat Now!" href="/Chat.htm">Chat - Debate Room</a></td>
    <td style="width:33%; text-align:center"><a title="Blog" href="/Blog.htm">Blogs</a></td>
    <td style="width:33%; text-align:right"><a title="Go to My 10 I Believe Question" href="/AdminPage_EditProfile.aspx">Go to My 10 I Believe Questions</a></td>
    I am a web designer in India any design  work pls call me - +91 9953958553 or mail me -, facebook - shoabf
    LVL 3

    Expert Comment

    your code seems fine, only need to give "width="100%" in the table.

    please let me know if it doesn't work for you.


    Author Closing Comment

    Not a big percentage fan. But by making all the cells the same size it worked thanks for the suggestion!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Do You Know the 4 Main Threat Actor Types?

    Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    760 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

    15 Experts available now in Live!

    Get 1:1 Help Now