Need with with tables and html on my beginner wordpress site
-
Hi all. I am starting to learn WordPress and am having an issue when trying to use a table. What is happening is when I create a table in my HTML editor, Dreamweaver, everything looks good. The images center and I have no issues. However, when I go and paste the html code, and update my site, the table renders incorrectly. Like the images inside the table are no longer centered liked they were before. As you can see, now there are margins above a couple of the images on the right. An example of my problem is here: http://joejstarhp.wordpress.com/test/ . I really do not know what is going on that causes the table to be messed up? Is it the CSS maybe? Any help is much appreciated.
Joe
The blog I need help with is: (visible only to logged in users)
-
Yes it’s the CSS: some of the newer themes have weird defaults for tables. The table defaults in 2011 aren’t designed for what you’re trying to do, they are designed for rows of data separated by horizontal lines. If you have the paid Custom Design upgrade you can override those defaults once for all. If not, you can override them by adding inline CSS to each opening td tag of the table code. I can show you if you wish, but why don’t you use the gallery feature instead?
http://en.support.wordpress.com/images/gallery/
http://gammagirl.wordpress.com/2008/07/27/not-the-official-wordpresscom-gallery-faq/ -
Thank you for the reply! That is great information to know. If you can show me, I would greatly appreciate it!
I would much rather see how to fix this because I also have a custom theme I created using a program called Artisteer and the SAME exact thing happens. I originally wanted to upload that theme, but I guess you can’t load up custom themes on WordPress.com. The problem has been really annoying me as I do not know how to fix.
I also intend to use WordPress more so as a CMS and not blog, and in doing so use HTML and not the gallery and not the built in WYSIWYG. I also tried a plugin, “Raw Html” but that was no help. I guess it wasn’t a help because it was the CSS messing things up and not HTML editor in WordPress like I originally thought.
-
No, the HTML editor is fine. Here’s what the CSS of 2011 specifies for tables: full-column width, only bottom border for the table, only top border for each cell, vertically aligned baselines, cellpadding 6px 10px 6px 0px (top, right, bottom, left).
What exactly do you want? Each image centered in its cell both vertically and horizontally? With borders around each image or not? If yes, the default grey of the theme or a different color?
-
Exactly, I am looking for both vertical and horizontal centering! I would probably change the border to 2px all around too. Color change for the pixels would be cool too. However, the vertical and horizontal centering is more important to learn.
I just pulled up the CSS style sheet of 2011 theme in Notepad++. What lines are you looking at and will need to be changed to get the table to behave properly?
-
I also tried a plugin, “Raw Html” but that was no help. I guess it wasn’t a help because it was the CSS messing things up and not HTML editor in WordPress like I originally thought.
Means you are way in the wrong forum and should be making friends over at WordPress.ORG
You should address your questions to WordPress.ORG the keepers of the software you are using: http://wordpress.org/support/
The Themes can also have differences between the .ORG themes and the .COM theme versions you see here.
Panos knows much better than I – but there could be differences between themes with the same name –
-
No, the OP has a wp.com blog. And it is the CSS of Twenty Ten which is messing up the tables.
In the newer themes, as Panos says, the designers add styling to tables so that plain normal html coding is over-ridden by the CSS of the themes. They add borders, padding, and alignment as well as the styling for images. a big mess if one wants only a simple table.
Dreamweaver, long long ago used to generate html code as well as work as a site design program. I used it way back a few times just experimentally. What it is now, I don’t know…
-
Auxclass – Thanks for the info. The “raw html” has been uninstalled and was not the problem. Whether I use the 2011 theme locally or at wordpress.com, the results are the same. It is a CSS issue. Thanks though!
Panaghiotisadam- Like I mentioned in my previous reply, I went looking at the CSS locally. I think the lines that need editing are 23 – 33:
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}I assume vertical-align is the problem?
-
-
Oh and here is the code dreamweaver generates for the simple table:
<body>
<table width="600" border="0">
<tr>
<td><div align="center"><img src="http://img35.imageshack.us/img35/5012/6223126976634daeec48t.jpg" width="210" height="210" /></div></td>
<td><div align="center"><img src="http://img28.imageshack.us/img28/525/5910287886eb9936ae11t.jpg" width="225" height="151" /></div></td>
</tr>
<tr>
<td><div align="center"><img src="http://img696.imageshack.us/img696/7262/4365015890933f3f743et.jpg" width="250" height="250" /></div></td>
<td><div align="center"><img src="http://img198.imageshack.us/img198/8813/280975128812c049ee64t.jpg" width="170" height="214" /></div></td>
</tr>
<tr>
<td><div align="center"><img src="http://img806.imageshack.us/img806/3590/2303055757f549ed9d4bt.jpg" width="215" height="132" /></div></td>
<td><div align="center"><img src="http://img571.imageshack.us/img571/751/6838950230271c9acct.jpg" width="200" height="160" /></div></td>
</tr>
</table>
</body>
</html>It is definitely the CSS overriding it.
-
But I didn’t read this closely enough:
…I also intend to use WordPress more so as a CMS and not blog,…
And uploading custom themes et al…
Could be the OP needs or is using wp.org…
-
-
For centering each image in its own cell, you need (in style=””) to align=horizontal:center; and align= verical:middle;.
getting rid of or adding the borders also needs to be addressed to over-ride the css of your theme.
-
1tess- The weird thing is if you copy my html code and paste in Notepad++ or just notepad and open with firefox, it displays the table correctly. So I am thinking I maybe don’t need the “(in style=””) to align=horizontal:center; and align= verical:middle;.” in each individual cell? I am thinking if I can change the CSS file to render properly then it will be show up correctly.
-
1) To display code here correctly you need to paste it between backticks. But you don’t need to that for the code of a published page: we can see your sourcecode.
2) The code you get from Dreamweaver is outdated. Your table should be like that:
`<table style=”width:600px;border:none;”>
<tr>
<td style=”text-align:center;vertical-align:middle;border:2px solid #ddd;padding:16px 0 10px;”>
<img style=”width:210;height:210;” src=”http://img35.imageshack.us/img35/5012/6223126976634daeec48t.jpg” />
</td>
<td style=”text-align:center;vertical-align:middle;border:2px solid #ddd;padding:16px 0 10px;”>
<img style=”width:225;height:151;” src=”http://img28.imageshack.us/img28/525/5910287886eb9936ae11t.jpg” />
</td>
</tr>
ETC ETC’
Note: you only need to specify the dimensions of the images if you want to display downsized versions of them.
You can replace the #ddd with a different hex code; palettes and hex codes here:
http://www.december.com/html/spec/color.html3) As for changing the table CSS of the theme, if you’re talking about your self-hosted blog you must post in the wp.org forum.
-
- The topic ‘Need with with tables and html on my beginner wordpress site’ is closed to new replies.
WordPress.com Forums 