you're reading:
Borders, Html & inline css codes, Tables, Themes

Overriding default table borders

http://wpbtips.wordpress.com/

In most wordpress.com themes, when you create an html table the cell borders are invisible unless you specify otherwise. In some of the newer themes, however (Blogum, Bouquet, Brand New Day, Chateau, Choco, Comet, Coraline, Dusk to Dawn, Duster, Enterprise, Fresh & Clean, Fusion, Greyzed, Imbalance 2, iNove, Liquorice, Manifest, Matala, Monochrome, Neutra, Next Saturday, Nishita, Notepad, Piano Black, Pink Touch 2, Selecta, Shaan, Skeptical, Splendio, Structure, Suburbia, Sundance, Sunspot, The Morning After, Twenty Eleven, Twenty Ten, Vertigo, Wu Wei, zBench), tables will automatically show up with visible cell borders – even if you write <table border="0"> in the code. That’s fine when you wish to present data in a grid, but not necessarily fine when you use a table for another purpose (such as arranging image/text combinations).

To override these default borders, you need to write the opening table tag and each opening td tag this way:

<table style="border:none;">
<td style="border:none;">

Of course if you have the paid CSS upgrade you can get rid of the borders once for all, by adding the appropriate code in your CSS editor. In Choco or Twenty-Ten, for example, you would add this:
#content table, #content tr td {border:none;}

(Related issue: Overriding default table colors; post includes themes with default colors and borders.)

http://wpbtips.wordpress.com/

Please don’t paste code in comments – see comment guidelines.
About these ads

Discussion

33 thoughts on “Overriding default table borders

  1. “That’s fine…”

    Having a default is fine, disabling a standard html tag is not.

    Posted by George | June 15, 2010, 19:03
  2. Great, thank you.

    Posted by AA | June 15, 2010, 19:05
  3. @AA: Thanks!

    @George: Agree – especially since we’re not talking about an obscure, rarely used, piece of coding but about a versatile tool used for all sorts of purposes.

    Posted by Panos | June 16, 2010, 00:19
  4. Awesome! I found it annoying but this fixed it. For some reason, Firefox on my MAC would not display them.

    Posted by Kim | June 28, 2010, 02:39
  5. @Kim: You’re welcome! I don’t know about your Firefox – maybe it has to do with the version. Mine (latest version, also Mac) does display the borders.

    Posted by Panos | June 28, 2010, 07:02
  6. Thank you very much for the info! Works like a charm!

    Posted by rhonda | July 16, 2010, 20:06
  7. @rhonda: You’re welcome!

    Posted by Panos | July 17, 2010, 04:41
  8. With my Artisteer template, tag is not necessary, just tag is sufficient to make border line invisible.

    Posted by Ken | August 22, 2010, 23:05
  9. @Ken: If you’re using Artisteer, then you’ve got a self-hosted blog. My blog is about wp.com blogs.

    Posted by Panos | August 23, 2010, 18:15
  10. THANK YOU!

    Spent three hours searching to fix this problem, you really helped!

    Posted by Seb Hamilton | October 7, 2010, 18:01
  11. @Seb: You’re welcome!

    Posted by Panos | October 9, 2010, 09:10
  12. Thank you for this solution to WordPress table borders. I was struggling with this formatting for a long time before I found this post.
    I appreciate your help.

    Posted by Neil | October 20, 2010, 22:33
  13. @Neil: You’re welcome!
    You can get rid of the borders once for all if you buy the CSS upgrade; but of course it’s not worth buying it just for that.

    Posted by Panos | October 21, 2010, 04:32
  14. Thankyou!

    I’m running the structure theme and It’s taken me ages to find out how to do this! Such a simple piece of code but for a newbie like me it’s gold dust! Thanks again!

    Posted by Ben | January 14, 2011, 18:05
  15. @Ben: You’re welcome!

    Not at all simple, actually, and in my opinion not good practice when a theme overrides what’s standard in tables and table coding.

    Posted by Panos | January 15, 2011, 16:09
  16. Yeah once I had everything together it did seem like quite a mission just for one post!

    Thanks again though for the hot tip!

    Posted by Ben | January 15, 2011, 16:35
  17. Great, works for me. I’m using iNove theme.

    Thanks

    [Username link removed - P.]

    Posted by Evgeni | May 24, 2011, 09:20
  18. It works! Thank you very much! :)

    [Username link to non wp.com blog removed - P.]

    Posted by Marco P. | July 21, 2011, 08:51
  19. Thank you for the post, put the CSS code in my child style.css and no more borders are shown!

    [Username link to non-wp.com site removed - P.]

    Posted by Wolfgang Fuchs | August 1, 2011, 13:47
  20. You’re not talking about the site linked to your username, are you?

    Posted by Panos | August 1, 2011, 14:09
  21. thank u , it is helpful a lot ;)

    Posted by Anonymous | September 23, 2011, 12:44
  22. You’re welcome, anonymous!

    Posted by Panos | September 23, 2011, 22:23
  23. thx a lot.. very useful ^^

    Posted by Anonymous | October 14, 2011, 05:06
  24. You’re welcome, other anonymous!

    Posted by Panos | October 18, 2011, 11:00
  25. To override these default borders, you need to write the opening table tag and each opening td tag this way:

    Where in the html box would I add this? I have made a custom signature and I have put the code into the html box… I have Chateau by the way….so would I add the above code to my custom signature code? My signature is a PNG file with transparent background.. help!

    Posted by Cosmetic Journey...in the city | November 17, 2011, 03:27
  26. a) I’m not seeing any transparent PNG in any of the posts on your front page. b) This post is about tables: what does a table have to do with a single image? You mean you want to eliminate the border around an image?
    Please insert the image in a post and link to that post so I can see what you’re talking about.

    In the meantime a piece of advice: endless scrolling isn’t user-friendly, plus the more the images on your front page the more the loading time (for a visitor with a slow connection, the browser may even time out before loading all the images and then the visitor will see nice big empty squares instead of some of the images). You should limit the number of posts per page to only a few (in Settings>Reading) and/or use the read-more tag to truncate the posts.

    Posted by Panos | November 17, 2011, 05:28
  27. Thank you for the advice on the endless scrolling. I have fixed that. What I’m trying to do is post a customized signature at the bottom of each blog post. The signature image is a PNG file that should be transparent but my Chateau theme puts a border and drop shadow around this image. I was under the impression from your post that to get rid of the border I have to ” write the opening table tag and each opening td tag “. That is where I am confused. Where do I insert the following code ?? I have pasted the code for a “test signature” below. I don’t want to post the signature image to my blog now with the border but if you want to test the code below in your blog so you can see what I am talking about. Thank you!

    Posted by Cosmetic Journey...in the city | November 17, 2011, 06:14
  28. As you see I can’t see your code – see point 4 here: http://wpbtips.wordpress.com/comment-guidelines/
    That’s why I asked you to publish the thing, so I could see the post and its code myself.

    Anyway, your explanation is clear enough. After inserting the image, switch the editor to HTML and turn this:

    <img ETC ETC

    to this:

    <img style="border:none;-moz-box-shadow:none;-webkit-box-shadow:none;box-shadow:none;" ETC ETC

    Posted by Panos | November 17, 2011, 06:39
  29. Wonderful! Thank you so much for your help!

    Posted by Cosmetic Journey...in the city | November 17, 2011, 07:17
  30. You’re welcome (but I’m still seeing no such PNG on your front page posts).

    Posted by Panos | November 18, 2011, 01:41
  31. Great thank’s a lot for the trick !

    Posted by djpoulet | January 25, 2012, 20:05

Trackbacks/Pingbacks

  1. Pingback: How to make html tables for your WordPress blog « one cool site - February 26, 2011

  2. Pingback: Align Images: HTML Tables for WordPress Blogs « one cool site - March 28, 2011

Author

author's avatar panos (justpi)

 Subject Index

Announcement 22/03/2012: After WP's latest move, this blog will no longer offer active support and assistance. The blog will remain online but commenting on older posts has been disabled.
✶ All theme-related posts are updated up to and including theme 189 in this list, but will not continue to be updated.

Stats

  • 2,466,651 views
  • Views per month:
Safari Icon Firefox - Never Internet Explorer
Note: if you see ads on this site, they are placed by WordPress, not me.
wpbtips.wordpress.com
Mostly on themes, formatting, coding, tweaks and workarounds.
Based on or springing from my contributing in the wp.com forum.
Theme-related posts constantly updated
Premium themes and Annotum not included
%d bloggers like this: