remove space between rows in tables
-
I have set cellpadding and cellspacing and borders to “0” but i still get spacing between rows…is the only way to remove these to upgrade to CSS?
The blog I need help with is: (visible only to logged in users)
-
Hi there. The cellpadding and cellspacing attributes no longer work in html5, so that might be your problem.
See this post on tables for WordPress.com. You might find something that works there: http://wpbtips.wordpress.com/2013/04/09/table-coding-for-wordpress-com-users/
If you’re willing to post your table’s code here I can also try to help you figure it out. You have to use the code button above the text box to post code in the forums (or post it between backticks), or it won’t display here correctly.
-
Thank you i appreciate the help! Below is one of the tables:
<table width=”100%” border=”0″ align=”left” cellpadding=”0″ cellspacing=”0″>
<tr><span style=”color:#ffffff;”> DATE</span></span></td>
<span style=”color:#ffffff;”> MEET</span></span></td>
</tr>
<tr><span style=”color:#ffffff;”>10/24-10/25 <span style=”color:#000000;”>2014 Marlins October Qualifier <img src=”https://fflytest.files.wordpress.com/2014/09/reg-button3-e1411220609295.jpg” width=”91″ height=”27″ alt=”” /></td>
</tr>
<tr><span style=”color:#ffffff;”>11/8-11/9 <span style=”color:#000000;”>2014 Maura Marden Freestyle Frenzy 
</tr>
</table> -
Add
style="padding: 0px;"to every td-tag (to the td-tag itself, not to the style attribute in the span-tag). That should do the trick. E.g., `<tr><span style=”color: #ffffff;”>DATE <span style=”color: #ffffff;”>MEET You can also remove the cellpadding and cellspacing attributes as they make absolutely no difference.
-
Just that second bit again. It didn’t post correctly:
<tr> <td style="padding: 0px;" align="left" valign="top" bgcolor="#272B6C" width="136"><span style="color: #ffffff;"><span style="font-size: 9pt; line-height: 100%; font-family: Verdana, sans-serif;">DATE</span></span></td> <td style="padding: 0px;" align="left" valign="top" bgcolor="#272B6C"><span style="color: #ffffff;"><span style="font-size: 9pt; line-height: 100%; font-family: Verdana, sans-serif;">MEET</span></span></td> <td style="padding: 0px;" align="left" valign="top" bgcolor="#272B6C"></td> </tr> -
That’s a big help, thank you! The padding is removed…but do you know how do i get rid of the space between each row? (*looks like white lines breaking up my tables because they are colored tables).
-
To create your own HTML tables see here > http://wpbtips.wordpress.com/2013/04/09/table-coding-for-wordpress-com-users/
Another good reference link is http://www.w3schools.com/html/html_tables.asp
-
thank you…i just added
<td style=”border:none;background:transparent;”> and that gets rid of the gray border between rows, but if i try to combine it in the tags i added to get rid of cell padding it doesn’t work …how can you get both features to work simultaneously? I need no background row colors and no padding? so both of the following td style tags together?<td style=”border:none;background:transparent;”>
-
Try this:
<td style="padding: 0; border: none; background: transparent;">Without knowing the theme you’re using I’m limited in my ability to test how it will actually appear for you, so if that doesn’t work, please let me know which theme you’re using.
By the way, both the valign and bgcolor attributes are also no longer supported in html5, so they might also not work. According to w3schools Timethief linked above you should rather use vertical-align and background-color, both of them values of the style attribute.
http://www.w3schools.com/tags/att_td_valign.asp
http://www.w3schools.com/tags/att_td_bgcolor.asp -
That seemed to have worked where there wasn’t a background color, but where i am using valign and bgcolor in addition to <td style=”padding: 0; border: none; background: transparent;”>. I’m must not be putting it all together correctly because when i add it all to the td style tag, i lose the colors. The theme is oxygen. Can you help? thanks.
-
I’m confused. First you say
I need no background row colors
and then you say
when i add it all to the td style tag, i lose the colors
I’m going to assume you want the blue and grey backgrounds as you specifically added them, but you don’t want the dividing line between rows, nor spaces between rows. Try this:
<table style="width:100%;border:none;"> <col style="width:29%;" /> <col style="width:31%;" /> <col style="width:40%;" /> <tr> <td style="padding:0;background-color:#272B6C;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;">DATE</span></td> <td style="padding:0;background-color:#272B6C;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;">MEET</span></td> <td style="padding:0;background-color:#272B6C;border:none;vertical-align:top;text-align:left;"> </td> </tr> <tr> <td style="padding:0;background-color:#656363;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;">10/24-10/25</span></td> <td style="padding:0;background-color:#CBC7C7;border:none;vertical-align:top;text-align:left;"><span style="font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;color:#000000;">2014 Marlins October Qualifier</span></td> <td style="padding:0;background-color:#CBC7C7;border:none;vertical-align:top;text-align:left;"><img src="https://fflytest.files.wordpress.com/2014/09/reg-button3-e1411220609295.jpg" width="91" height="27" alt="" /></td> </tr> <tr> <td style="padding:0;background-color:#656363;border:none;vertical-align:top;text-align:left;"><span style="color:#ffffff;font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;">11/8-11/9</span></td> <td style="padding:0;background-color:#CBC7C7;border:none;vertical-align:top;text-align:left;"><span style="font-size:9pt;line-height:100%;font-family:Verdana, sans-serif;color:#000000;">2014 Maura Marden Freestyle Frenzy</span></td> <td style="padding:0;background-color:#CBC7C7;border:none;vertical-align:top;text-align:left;"><img src="https://fflytest.files.wordpress.com/2014/09/reg-button3-e1411220609295.jpg" width="91" height="27" alt="" /></td> </tr> </table>I have removed all code that are no longer supported in html5. I’ve also removed all unnecessary code, for example where you had one span-tag nested inside another where one span-tag would do. In fact, I think it’s possible to tidy up this code even more, but this is all I have time for right now. I’ve added the alignment values, though it should be left and top-aligned by default.
You’ll notice the background:transparent value is not there. If you add that it cancels out the background-color value, which is what caused the problem described in your last reply.
Also note the column width is now set once-off at the very start (not in every row) and expressed as a percentage (I calculated off the width values you had in your original code), not in pixels as you had it originally. This means the column width will automatically adjust according to screen size. If you’d prefer fixed widths, just substitute the percentages with your original pixel values.
All this according to the instructions provided here: http://wpbtips.wordpress.com/2013/04/09/table-coding-for-wordpress-com-users/
I don’t have access to the image file you link to as your blog is private, so I can’t see how the image displays in the table.
-
-
- The topic ‘remove space between rows in tables’ is closed to new replies.
WordPress.com Forums 