WordPress.org

Ready to get started?Download WordPress

Forums

Specifying Column Widths in Tables (7 posts)

  1. robynwright7
    Member
    Posted 1 year ago #

    Hi,

    In the past, I've been able to control the column widths of tables by using the method described here: http://wordpress.org/support/topic/table-borders-and-column-widths?replies=5

    However, the table I am currently working on seems to follow a different style, as it uses the <th> element. I've tried entering width="50"within that element but it doesn't work. Can anyone make any suggestions? I've spent too much time on this! Thanks

    Some of the code is shown here:

    <table class="features" width="813" border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <th>Features</th>
    <th>Description</th>
    <th>Type</th>
    </tr>
    
    <tr>
    <td style="padding: 0; border-top: 1px dotted #333;" colspan="3"></td>
    </tr>
    <tr>
    <td style="padding: 10px 0;" valign="top" width="30%">Auto Attendant Answering</td>
    <td class="yellow" valign="top" width="60%">Set up a telephone number to dial directly to an Auto Attendant. Callers are then presented with predefined options via the Auto Attendant Feature.</td>
    <td class="light-blue" valign="top" width="10%"> S</td>
    </tr>
  2. Krishna
    Volunteer Moderator
    Posted 1 year ago #

    Try this:

    <table class="features" width="813" border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <th style="padding: 10px 0;" align="center" valign="top" width="30%">Features</th>
    <th class="yellow" align="center" valign="top" width="60%">Description</th>
    <th class="light-blue" align="center" valign="top" width="10%">Type</th>
    </tr>
    
    <tr>
    <td style="padding: 0; border-top: 1px dotted #333;" colspan="3"> </td>
    </tr>
    <tr>
    <td style="padding: 10px 0;" valign="top" width="30%">Auto Attendant Answering</td>
    <td class="yellow" valign="top" width="60%">Set up a telephone number to dial directly to an Auto Attendant. Callers are then presented with predefined options via the Auto Attendant Feature.</td>
    <td class="light-blue" align="center" valign="top" width="10%"> S</td>
    </tr>
    </tbody></table>

    This is based on your input. Better have a look at this:
    http://www.w3schools.com/cssref/pr_tab_table-layout.asp

  3. robynwright7
    Member
    Posted 1 year ago #

    Thank you! That worked nicely. If you don't mind, can you answer one more question? I've tried to add cell padding to the left column by changing "cellpadding=0" to cellpadding-1 5, etc., but nothing happens. Here is how it looks (noticed the text at the left column is too close to the edge of the table: http://www.telego.com/features/

    <table class="features" width="813" border="0" cellspacing="0" cellpadding="0">
    <tbody>
    <tr>
    <th style="padding: 10px 0;" align="center" valign="top" width="30%">Features</th>
    <th class="yellow" align="center" valign="top" width="60%">Description</th>
    <th class= align="center" valign="top" width="10%">Type</th>
    </tr>

    <tr>
    <td style="padding: 0; border-top: 1px dotted #333;" colspan="3"></td>
    </tr>
    <tr>
    <td style="padding: 10px 0;" class="light-blue" valign="top" width="30%">Auto Attendant Answering</td>
    <td class="yellow" valign="top" width="60%">Set up a telephone number to dial directly to an Auto Attendant. Callers are then presented with predefined options via the Auto Attendant Feature.</td>
    <td  valign="top" width="10%"> S</td>
    </tr>
    <tr>
    <td style="padding: 0; border-top: 1px dotted #333;" colspan="3"></td>
    </tr>
  4. Krishna
    Volunteer Moderator
    Posted 1 year ago #

    Try to change cellspacing="0" to 10 or so in the <table> at the top only and see if it solves the problem

  5. robynwright7
    Member
    Posted 1 year ago #

    Hi, I tried it in two places, but it didn't seem to help:
    http://www.telego.com/features/

    <p>
    &nbsp;
    <div style="margin: 20px 0 0 0;"><span class="blueH1">The Ins and Outs of</span> <span class="greenH1">TeleGo's Features</span></div>
    
    <table class="features" width="813" border="0" cellspacing="0" cellpadding="10">
    <tbody>
    <tr>
    <th style="padding: 10px 0;" align="center" valign="top" width="30%">Features</th>
    <th class="yellow" align="center" valign="top" width="60%">Description</th>
    <th class= align="center" valign="top" width="10%">Type</th>
    </tr>
  6. Krishna
    Volunteer Moderator
    Posted 1 year ago #

    How about this?

    <table class="features" width="813" cellspacing="0" cellpadding="10" border="0">
    <tbody>
    <tr>
    <th width="30%" valign="top" align="center">Features</th>
    <th class="yellow" width="60%" valign="top" align="center">Description</th>
    <th class="align="center"" width="10%" valign="top">Type</th>
    </tr>
    <tr>
    <td colspan="3" style="padding: 0; border-top: 1px dotted #333;"> </td>
    </tr>
    <tr>
    <td class="light-blue" width="30%" valign="top">Auto Attendant Answering</td>
    <td class="yellow" width="60%" valign="top">Set up a telephone number to dial directly to an Auto Attendant. Callers are then presented with predefined options via the Auto Attendant Feature.</td>
    <td align="center" width="10%" valign="top"> S</td>
    </tr>
    <tr>
    <td colspan="3" style="padding: 0; border-top: 1px dotted #333;"> </td>
    </tr>
    <tr>
    <td class="light-blue" width="30%" valign="top">Live Person Answering</td>
    <td valign="top">Setup a telephone number to ring a specific extension first, or a group to enable sequential or simultaneous rings. This enables your company to have a live person answer the caller, and not an auto attendant.</td>
    <td align="center" valign="top"> S</td>
    </tr>
    </tbody></table>
  7. robynwright7
    Member
    Posted 1 year ago #

    Hi, that worked for the first two columns. I think it will be too much work to do them all that way though. I'll have to have someone fix the .CSS file. Thanks for your help! I really appreciate it. :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.