Need help? Check out our Support site, then


html tables not displaying as expected...

  1. Let me preface this by saying I'm using the version of WordPress that does NOT require a "hosting service", so I don't have access to any plugins.

    I'm trying to build an html table, but it's not showing up like it should. I tried creating a table in Word, then pasting it in (using the "Paste from Word" icon in WordPress). It "somewhat" displays, but not as it was in Word, and it's missing
    the vertical bar separating the two columns.

    I also tried using the format shown http://www.w3schools.com/html/html_tables.asp with no luck either (same issue).

    Is there any way to properly format in html table in the non-hosted version of WordPress so that the vertical bars separating each column show up?

    If you go to the following URL, you'll see what I'm talking about:

    http://andykelsall.wordpress.com/88-2/

    Thanks,

    Andy

    The blog I need help with is andykelsall.wordpress.com.

  2. Here's the html code if that helps:

    <table width="100%" border="3" cellspacing="0" cellpadding="3"><colgroup><col width="80*" /> <col width="35*" /></colgroup><br /> <tbody><br /> <tr valign="TOP"><br /> <td width="25%"><strong>Software/OS</strong></td><br /> <td width="30%"><strong>Level of experience</strong></td><br /> </tr><br /> <tr valign="TOP"><br /> <td width="25%"><span style="color: #000000;">Word 2003</span></td><br /> <td width="30%"><span style="color: #000000;">Intermediate</span></td><br /> </tr><br /> <tr valign="TOP"><br /> <td width="25%"><span style="color: #000000;">Excel 2003</span></td><br /> <td width="30%"><span style="color: #000000;">Intermediate</span></td><br /> </tr><br /> <tr valign="TOP"><br /> <td width="25%"><span style="color: #000000;">Widows XP/ Win7</span></td><br /> <td width="30%"><span style="color: #000000;">Intermediate</span></td><br /> </tr><br /> <tr valign="TOP"><br /> <td width="25%"><span style="color: #000000;">OpenOffice Writer</span></td><br /> <td width="30%"><span style="color: #000000;">Intermediate</span></td><br /> </tr><br /> <tr valign="TOP"><br /> <td width="25%"><span style="color: #000000;">OpenOffice Calc</span></td><br /> <td width="30%"><span style="color: #000000;">Intermediate</span></td><br /> </tr><br /> <tr valign="TOP"><br /> <td width="25%"><span style="color: #000000;">Unix</span></td><br /> <td width="30%"><span style="color: #000000;">basic-to-intermediate</span></td><br /> </tr><br /> <tr valign="TOP"><br /> <td width="25%"><span style="color: #000000;">Linux (Ubuntu)</span></td><br /> <td width="30%"><span style="color: #000000;">basic</span></td><br /> </tr><br /> </tbody><br /> </table><br />

  3. Your code has looots of issues.

    a) Commands such as border="3", cellpadding="3" and valign="TOP" are deprecated and don't work in newer themes.
    b) Specifying a vertical alignment is superfluous anyway, as the content of all the cells has the same height.
    c) Some commands are contradictory: total width 100%, but column width 80 and 35, and row width 25% plus 30% don't make sense.
    d) The span tag is used to style part of the content of a block, not the whole block: if you want to change the color of the text in one cell, you don't add span tags, you add the style attribute to the opening td tag.
    e) And if you want to change the color in all the cells, you don't add the same command twenty times, you add the style attribute to the opening table tag.

    Moreover, some of the newer themes have peculiar defaults: to format a table correctly you need to examine the CSS of the theme, so that you are aware of what the theme imposes, therefore what you do or do not need to change. In 2010 the defaults are:
    table: 100% width, 1px light grey border around
    
each cell: top and bottom padding 6px, left and right padding 24px, 1px light grey border above only.

    So start by pruning down your table to basic coding only (just the plain table, tbody, tr and td tags, no extras), then tell us what exactly you'd like to change.

  4. justpi, thanks for your feedback. Maybe I didn't explain myself too well. I tried copying / pasting code from a Word doc, as well as code I found on the w3schools.com website, and neither one created the vertical bar that separates the columns of info.

    I can tweak the cell sizes and positioning later. I'd just like the table here to appear as it does in, say, a Word doc, where each column is clearly separated by a vertical bar.

    I don't have access to CSS because I don't have the Pro version of WordPress. Is there a way to do what I want without having to upgrade to the Pro version?

    Thanks,

    Andy

  5. Maybe I didn't explain myself too well!

    1) You can style your table anyway you like, but not the way you're trying. Don't copypaste code from Word, and don't use the code found in that website: much of it doesn't work.
    2) I didn't say anything about upgrades, I said you need to examine the CSS of your theme so that you can know "what you do or do not need to change"; you don't need the upgrade to do that, and I even spared you the trouble by mentioning what your defaults are.
    3) Those defaults say that your theme automatically creates a thin border around the table, and a thin border above each cell; so if you only want the borders you've got on your page at the moment, just with an additional vertical line to separate the two columns, you only need to add a left border to each right-column cell - nothing else. In all:

    <table>
    <tbody>
    <tr>
    <td><strong>Software/OS</strong></td>
    <td style="border-left:1px solid #e7e7e7;"><strong>Level of experience</strong></td>
    </tr>
    <tr>
    <td>Word 2003</td>
    <td style="border-left:1px solid #e7e7e7;">Intermediate</td>
    </tr>
    <tr>
    <td>Excel 2003</td>
    <td style="border-left:1px solid #e7e7e7;">Intermediate</td>
    </tr>
    <tr>
    <td>Widows XP/ Win7</td>
    <td style="border-left:1px solid #e7e7e7;">Intermediate</td>
    </tr>
    <tr>
    <td>OpenOffice Writer</td>
    <td style="border-left:1px solid #e7e7e7;">Intermediate</td>
    </tr>
    <tr>
    <td>OpenOffice Calc</td>
    <td style="border-left:1px solid #e7e7e7;">Intermediate</td>
    </tr>
    <tr>
    <td>Unix</td>
    <td style="border-left:1px solid #e7e7e7;">basic-to-intermediate</td>
    </tr>
    <tr>
    <td>Linux (Ubuntu)</td>
    <td style="border-left:1px solid #e7e7e7;">basic</td>
    </tr>
    </tbody>
    </table>
  6. Justpi, thanks for the code. I still need to tweak it a bit to get a thicker border all around (in between the cells), but I'm getting there. I'm poking around now for the code for that.

  7. You're welcome.
    Whatever you do, do it with the style attribute. If you have more questions, shoot.

Topic Closed

This topic has been closed to new replies.

About this Topic