Need help? Check out our Support site, then


Table spreading across two columns in Twenty Ten

  1. I saved a draft of my post, http://kddidit.wordpress.com/2013/04/29/web-coding-cre…ter-share-link/

    I'm using a table in my post and when I preview it, it spreads across the entire screen---and beyond, crossing over both columns and off the screen. I recently switched to Twenty Ten from Digg 3 and have been having all sorts of weird issues with Twenty Ten.

    I'm using the same table coding as I've used for previous tables, so I'm feeling very clueless.

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

  2. Paste your code here so we can take a look at what's going on. Use the bactick ` before and after the code: backtick code backtick

    On US keyboards it's the lowercase of the tilde ~ next to the 1 ! key. (a backward apostrophe.

  3. <table style="border-width:1px; border-style:solid; border-color: black; padding: 5px; border-collapse:collapse; vertical-align:top; font: Verdana; font-size: 16px; line-height: 18px; color: #004A3E;">
    	<tr><td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;">Create a link your readers can click to share via Twitter</td>
    		<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;"><a href="http://twitter.com/share?text=Good%20info%20in%20this%20amazing%20blog!&url=http://kddidit.wordpress.com/2013/04/01/april-2013-hodgepodge/">Click to share on Twitter</a></td></tr>
    	<tr><td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;">What the code looks like</td>
    		<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;">Below is a sample of the code you would copy and paste into a post so your readers can share it  on Twitter. Explore the following breakdown of the code to see where to insert your own information.<br/><hr/><br/><span style="color: green;"><a href="http://twitter.com/share?text=<span style="#E7571E"><span style="color: #E7571E;">Good</span>%20<span style="color: #E7571E;">info</span>%20<span style="color: #E7571E;">in</span>%20<span style="color: #E7571E;">this</span>%20<span style="color: #E7571E;">amazing</span>%20<span style="color: #E7571E;">blog!</span></span>&url=<span style="color: #E7571E;">http://kddidit.wordpress.com/2013/04/01/april-2013-hodgepodge/</span>"><span style="color: #E7571E;">Click to share on Twitter</span></a></span></td>
    	</tr>
    	<tr bgcolor="#99cc98">
    		<th width="25%" style="border-width:1px; border-style:solid; border-color: black; padding: 5px; border-collapse:collapse; vertical-align:top;">The Code</th>
    		<th style="border-width:1px; border-style:solid; border-color: black; padding: 5px; border-collapse:collapse; vertical-align:top;">The Analysis</th>
    	</tr>
    	<tr>
    		<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;"><span style="color: green;"><a href="http://twitter.com/share?text=</span></td>
    		<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;">This is the base address to Twitter, indicating this is a Tweet.</td>
    	</tr>
    <tr>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;"><span style="color: green;"><span style="color: #E7571E;">Good</span>%20<span style="color: #E7571E;">info</span>%20<span style="color: #E7571E;">in</span>%20<span style="color: #E7571E;">this</span>%20<span style="color: #E7571E;">amazing</span>%20<span style="color: #E7571E;">blog!</span></td>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;">This part is the message that will appear in the Tweet. You must use <code style="color:#27687C; font-weight: 600; font: monospace;">%20</code> between each word in your message IF you want a space between the words.
    		<blockquote>Good info in this amazing blog!</blockquote>
    		If you were to skip the <code style="color:#27687C;	font-weight: 600; font:monospace;">%20</code>s, the message would look like this:
    		<blockquote>Goodinfointhisamazingblog!</blockquote>
    		Keep in mind that the 140-character limit counts the <code style="color:#27687C;	font-weight: 600; font: monospace;">%20</code>s as one character.
    	</td>
    </tr>
    <tr>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;"><span style="color: green;">&url="</span></td>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;">This tells Twitter to include the web address that follows.</td>
    </tr>
    <tr>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;"><span style="color: #E7571E;">http://kddidit.wordpress.com/2013/04/01/april-2013-hodgepodge/</span></td>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;">This is the web address where the information lives that you want your readers to share. The address will be different for every post or webpage.</td>
    </tr>
    <tr>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;"><span style="color:  green";>"></span></td>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;">
    		Indicates the end of the link information.</td>
    </tr>
    <tr>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;"><span style="color: #E7571E;">Click to share on Twitter</span></td>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;">This is the link text that shows on your webpage. You choose the text you want to use; just be sure to include <em>Twitter</em> or <em>tweet</em> in there somewhere so your readers know what will happen when they click it!
    	</td>
    </tr>
    <tr>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;"><span style="color: green";></a></span></td>
    	<td style="border-width:1px; border-style:solid; border-color: black; padding: 5px;">This bit of code ends the link.</td>
    </tr>
    <tr>
    	<td colspan="2" style="border-width:1px; border-style:solid; border-color: black; padding: 5px;"><center><a href="http://twitter.com/share?text=Good%20info%20in%20this%20amazing%20blog!&url=http://kddidit.wordpress.com/2013/04/01/april-2013-hodgepodge/">Click to see how it looks</a></center></td>
    </tr>
    </table>
  4. It is the long lines of code you are showing without spaces that is making the table too wide for the theme.
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;"><a href="http://twitter.com/share?text=Good%20info%20in%20 this%20amazing%20blog!&url=http://kddidit.wordpress.com/2013/04/01/april-2013-hodgepodge/">Click to share on Twitter</a></td>
    note the space I added so the line will break after "in%20"
    You'll also need to add a space in the next row.

    Otherwise you could experiment with making the font much smaller for the code you are explaining. But that would be harder to read.

  5. I'll try playing with the code, but I'm definitely NOT changing font size. It's supposed to be readable *grin*

    I'm surprised that the code is creating these problems...ah well, live and learn. Thanks very much, Kathy

  6. It is because you do not have any line breaks in the code you are showing. The td is filling in all the information you are giving it without line breaks and it is too wide for your theme. Even specifying column width does not over-ride the width of the unbroken text you want there.
    <col style="width:50%;" /> <col style="width:50%;" /> "

    Perhaps there is a way to parse the code you are talking about with line breaks so it will fit the width of your theme.

    I do understand that you want the text easily readable. But you also need the table to fit the width of your theme. So you need some line breaks in both columns to make it work.

    Here is the all of the code I used to make it display within your theme's width:

    <table style="border-width:1px;border-style:solid;border-color:black;padding:5px;border-collapse:collapse;vertical-align:top;font:Verdana;font-size:16px;line-height:18px;color:#004a3e;"><col style="width:50%;" /> <col style="width:50%;" />
    <tbody>
    <tr>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">Create a link your readers can click to share via Twitter</td>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;"><a href="http://twitter.com/share?text=Good%20info%20in%20 this%20amazing%20blog!&url=http://kddidit.wordpress.com/2013/04/01/april-2013-hodgepodge/">Click to share on Twitter</a></td>
    </tr>
    <tr>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">What the code looks like</td>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">Below is a sample of the code you would copy and paste into a post so your readers can share it on Twitter. Explore the following breakdown of the code to see where to insert your own information.
    
    <hr />
    
    <span style="color:green;"><a href="http://twitter.com/share?text=<span style="color:#e7571e;">Good</span>%20<span style="color:#e7571e;">info</span>%20<span style="color:#e7571e;">in</span>%20<span style="color:#e7571e;">this
    </span>%20<span style="color:#e7571e;">amazing</span>%20<span style="color:#e7571e;">blog!
    </span>&url=<span style="color:#e7571e;">http://kddidit.wordpress.com/2013/04/01/april-2013-hodgepodge/</span>">
    <span style="color:#e7571e;">Click to share on Twitter</span></span></td>
    </tr>
    <tr bgcolor="#99cc98">
    <th style="border-width:1px;border-style:solid;border-color:black;padding:5px;border-collapse:collapse;vertical-align:top;" width="25%">The Code</th>
    <th style="border-width:1px;border-style:solid;border-color:black;padding:5px;border-collapse:collapse;vertical-align:top;">The Analysis</th>
    </tr>
    <tr>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;"><span style="color:green;"><a href="http://twitter.com/share?text=</span></td>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">This is the base address to Twitter, indicating this is a Tweet.</td>
    </tr>
    <tr>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;"><span style="color:green;"><span style="color:#e7571e;">Good</span>%20<span style="color:#e7571e;">info</span>%20<span style="color:#e7571e;">in</span>%20<span style="color:#e7571e;">this</span>%20
    <span style="color:#e7571e;">amazing</span>%20<span style="color:#e7571e;">blog!</span></span></td>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">This part is the message that will appear in the Tweet. You must use <code style="color:#27687c;font-weight:600;font:monospace;">%20</code> between each word in your message IF you want a space between the words.
    <blockquote>Good info in this amazing blog!</blockquote>
    If you were to skip the <code style="color:#27687c;font-weight:600;font:monospace;">%20</code>s, the message would look like this:
    <blockquote>Goodinfointhisamazingblog!</blockquote>
    Keep in mind that the 140-character limit counts the <code style="color:#27687c;font-weight:600;font:monospace;">%20</code>s as one character.</td>
    </tr>
    <tr>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;"><span style="color:green;">&url="</span></td>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">This tells Twitter to include the web address that follows.</td>
    </tr>
    <tr>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;"><span style="color:#e7571e;">http://kddidit.wordpress.com/2013/04/01/april-2013-hodgepodge/</span></td>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">This is the web address where the information lives that you want your readers to share. The address will be different for every post or webpage.</td>
    </tr>
    <tr>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">"></td>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">Indicates the end of the link information.</td>
    </tr>
    <tr>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;"><span style="color:#e7571e;">Click to share on Twitter</span></td>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">This is the link text that shows on your webpage. You choose the text you want to use; just be sure to include <em>Twitter</em> or <em>tweet</em> in there somewhere so your readers know what will happen when they click it!</td>
    </tr>
    <tr>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;"></td>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">This bit of code ends the link.</td>
    </tr>
    <tr>
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;" colspan="2"><a href="http://twitter.com/share?text=Good%20info%20in%20this%20amazing%20blog!&url=http://kddidit.wordpress.com/2013/04/01/april-2013-hodgepodge/">Click to see how it looks</a></td>
    </tr>
    </tbody>
    </table>
  7. By the way, you don't need three different properties for the borders. Instead of this:
    <td style="border-width:1px;border-style:solid;border-color:black;padding:5px;">
    you write:
    <td style="border:1px solid #000;padding:5px;">

  8. Yeah, that's what I do when I'm not using WordPress.com. It's pretty irritating having to do it with WordPress.

  9. Yeah, that's what I do when I'm not using WordPress.com. It's pretty irritating having to do it with WordPress.

  10. Sorry? Having to do what?

  11. I use the table shorthand (and lots of other shorthand codes) when I'm working in CSS and HTML. I stopped using shorthand code in WordPress because I ran into problems. Problems like not working.

  12. I wondered about that, but considered that if I ever switch between the text editor/visual editor sometimes the code gets changed. I've not seen it happen with "width, type, color, or padding" on table boders, but I've had strange changes happen. br tags get removed, or appear where they were not there, line height disappears, gremlins!!
    Do you switch from one editor to the other?
    Happens to me especially when I am at my job and someone interrupts me so I press the wrong button…

  13. I stopped using shorthand code in WordPress because I ran into problems. Problems like not working.

    "border:1px solid #000" is standard inline CSS, it doesn't vanish or change if you switch to Visual, and it works. Can you remember which particular shorthand code didn't work for you?

  14. The only editor switching I do is from Espresso to WordPress. And I've been extremely pleased with Espresso as it doesn't change my code at all in the four years or so that I've been using it. Unlike Dreamweaver.

  15. Yes, that had been my assumption the first few times I used it. When the table shorthand code (as I mentioned earlier) didn't work---over and over and over, it didn't work, I decided it must be because I'm using the WordPress.com.

    I never bothered to see if I could do box rounding or font in shorthand. Too much trouble to go back and forth playing with it.

    Margin and padding do seem to work in shorthand---yeah!

  16. I just uploaded another post that uses a table and I had forgotten how annoying it is that I can no longer have color in my table cells. Is there a reason for that??

    The post is at http://kddidit.wordpress.com/2013/05/02/upcoming-publi…s-for-may-2013/. And my code shows that I am assigning color. Color which doesn't appear in Twenty Ten that used to appear in Digg 3. What's the deal with that??

  17. http://kddidit.wordpress.com/2013/05/02/upcoming-publications-for-may-2013/
    a quick look shows you are using code like this:
    <tr bgcolor="#CEFBC1">
    where this would work:
    <tr style="background-color:#CEFBC1;"> etc…

  18. Er...duh...thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic