In most wordpress.com themes, when you create an html table the background of each cell is transparent unless you specify otherwise. But in a few of the newer themes (Autofocus, Beach, Bold Life, Clean Home, Dark Wood, Esquire, Motion, Mystique, Nuntius, Parament, Retro-fitted, Strange Little Town, Titan, Triton Lite), tables have a colored background by default.
This may be good for a table full of data but undesirable when you use a table for another purpose, for instance to position a group of images.
To eliminate the default colors, you need to write each opening td tag this way:
<td style="background:transparent;">
In Clean Home, Nuntius and Strange Little Town, in particular, you need this (because the default is bg color plus cell borders):
<td style="border:none;background:transparent;">
In Nuntius, Retro-fitted and Triton Lite you must add the same styling to the opening table tag as well.
Of course if you have the paid CSS upgrade you can get rid of the colors etc. once for all, by adding the respective coding in your CSS editor; for example:
In Beach
.entry-content th {border:none;}
.entry-content tr:nth-child(2n+1) td, .entry-content tr:hover td {background:transparent;}
In Clean Home
.hentry th, .hentry td, .hentry tr:nth-child(2n+1) td, .hentry tr:hover td {background:transparent;border:none;}
In Dark Wood
table th, table tr td {background:transparent;}
In Motion
table th, table td, table tr.even td, table tr:hover td {background:transparent;border:none;}
In Titan
table th, table tr td {background:transparent;}
(Related issue: Overriding default table borders)
https://wpbtips.wordpress.com/
I have noticed that inserting images without tables usually messes up the alignment. Image don’t necessarily insert one next to each other. In order to fix that, it is important to have tables (or use gallery code). Is there an html or div code which can fix this problem so I don’t have to use tables? There are times when I don’t want to use table nor do I want to use gallery.
Posted by AA | February 13, 2011, 07:08Oh I can’t answer that, because “this problem” can be various different problems – including the theme you’re using. So I need something more specific: maybe a link to a post with the problem you’re thinking of, or an exact description of what you’ve tried, what you expected and what turned up.
Posted by Panos | February 13, 2011, 07:26Panos, re-this, just so you know, the email alert I received ends up with Page Not Found. Just thought some setting may have gone astray (although I assume it could be my end). I found the page using er er …my common sense. Cheers, J
Posted by Julia Matcham | February 13, 2011, 14:33Hi Panos
I too was the same thing: the link found in the e-mail gave me the message: Page not found.
Franco
Posted by putignanonelmirino | February 13, 2011, 15:44Thank you both for your concern. I think I know why it happened (although it shouldn’t happen): the post was written ten days ago and set to Private; to publish it, I changed the date and the status then clicked Update. Seems I should have updated after each action.
Posted by Panos | February 14, 2011, 02:07CSS! Impressed…
Of course, nothing but your best—
Quest
to be
cher
(ished) ɛst
Posted by Tess | February 14, 2011, 20:25(Now some visitors who don’t have the special privileges you deserve will wonder how you did that!)
Posted by Panos | February 15, 2011, 03:57
Posted by Tess | February 16, 2011, 14:31Speaking of which, is the greek e intentional or not?
Posted by Panos | February 17, 2011, 01:15Yes. Seemed apt.
http://en.wikipedia.org/wiki/International_Phonetic_Alphabet
Posted by Tess | February 17, 2011, 15:16Thought so (that’s why I didn’t mess with it)!
Posted by Panos | February 18, 2011, 03:23Thanks. Very useful stuff.
Posted by Netty Gritty | February 18, 2011, 07:31You’re welcome, NG, as usual!
Posted by Panos | February 18, 2011, 23:02Thanks for your help in the forums. :) Have a great weekend.
Posted by laavventura | February 26, 2011, 08:47Same to you!
Posted by Panos | February 26, 2011, 20:00Panos, I need you help please.
I use Headlines (premium theme) with have a colored background by default, as follows:
.entry table { width: 100%; border: 1px solid #e6e6e6; margin-bottom: 20px; }
.entry table tr.alt-table-row { background: #f9f9f9; }
.entry table th { padding: 6px 0 3px 0; background: #EEEEEE; border: 1px solid #e6e6e6; text-shadow: 1px 1px 0 #fff; box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff; }
.entry table td { padding: 6px 0 3px 10px; border: 1px solid #e6e6e6; }
And then I eliminate the default colors by:
.entry table { width: auto; border: none; margin-bottom: 0; }
.entry table tr.alt-table-row { background: transperent; }
.entry table th { padding: 0; background: transparent; border: none; text-shadow: none; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; }
.entry table td { padding: 0; border: none; }
Finally, except for the background color, everything changed. In fact my problem is how to change the background color.
How should I change the default code?
Thank you.
Posted by Om Kicau | March 14, 2011, 19:35Of course you understand that I cannot test things directly, as I don’t have access to that theme.
But if you copied the above from your actual CSS, you’ve got a typo: you’ve written transperent instead of transparent.
Posted by Panos | March 14, 2011, 20:56Okey Panos…
No, that I write here directly. In the original CSS is transparent”.
Well, thank you for your answer.
So far I can learn a lot about wp.com from your blog.
GBU.
Posted by Om Kicau | March 15, 2011, 00:00Then try each one of these instead:
background:transparent !important;
background:none;
background:tnone !important;
Then maybe give me a link to a post or page with a table, so I can check its CSS.
Posted by Panos | March 15, 2011, 00:47I’ve tried all three. The table can not be changed as I want.
I made a test page here: http://omkicau.com/test/
I lock with password “123” (without quotes).
Thank you.
Posted by Om Kicau | March 15, 2011, 10:11Oh you mean you can’t add your own bg colors to each cell? That has nothing to do with the CSS of the theme or your customizing it.
a) All the quotes in your table code must be straight ones;
b) bgcolor= is obsolete;
c) you don’t need separate span tags.
In all, your first table row should be so:
<tr>
<td valign="top" style="width:205px;color:#fff;background-color:#f00;font-weight:bold;">1</td>
<td valign="top" style="width:205px;color:#000;background-color:#0f0;">2</td>
<td valign="top" style="width:205px;color:#fff;background-color:#00f;">3</td>
</tr>
Posted by Panos | March 15, 2011, 10:39(Sorry, I put green instead of yellow in the second cell, but you get the point.)
Posted by Panos | March 15, 2011, 10:45@Panos:
Very clear. Ah, it’s like magic.
Every person who do not know the secret, would feel very amazed. Once out, usually just say, oh it’s easy.
But for me, knowledge is knowledge, everything is extraordinary. Panos might just say, “things that I give just tips. ” But for me, it is very useful knowledge.
You are a kindhearted person.
Thank you for your help, Panos.
Posted by Om Kicau | March 15, 2011, 14:40So it wasn’t a CSS problem after all, it was your using outdated table HTML. You’re welcome, and thank you for your kind words.
Posted by Panos | March 15, 2011, 22:55Hi Panos, I have been reading through your replies, and it looks like you might have the answer I need. Basicaly I am looking to put a 2 column grid on the lightword theme page. Nothing fancy I just want to have a picture on the left and the text about the picture on the right.
Every time I make a table it shows white on screen (even though in the editor it looks black). I know I must be as thick as two short planks but I have been driven mad by this and it is time to admit I just can’t make something so simple work.
The page in question is http://www.cruxterminatus.org/?page_id=38
If you could spare some time to help me out, it would be awesome. Again I am sorry for asking such a stupid question (if there are any 5 year olds out there that know the answer, please feel free!)
Many thanks for any help
Posted by Don | March 23, 2011, 17:34@Don: For starters check point 1 here:
https://wpbtips.wordpress.com/comment-guidelines/
So I can’t use the theme you’re using and test things myself.
But I can see that your CSS includes this:
table td {
background-color: #F5F5F5;
}
table td, table th {
border-right: 1px solid #FFFFFF;
padding: 0.9em 0.8em;
text-align: left;
}
So I guess you need to modify your CSS. Try changing this:
background-color: #F5F5F5;
to this:
background-color: none;
and this:
border-right: 1px solid #FFFFFF;
to this:
border: none;
Posted by Panos | March 24, 2011, 14:47