Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

HTML Table Formatting in WordPress

Posted on 2011-03-10
14
Medium Priority
?
647 Views
Last Modified: 2012-05-11
I'm working on someone's existing WordPress managed site.  I want to create some tables using regular old HTML.

All is good, except that WordPress is ignoring some of the syntax.  in the following example, the alignment syntax is ignored.

Any one have any ideas about compelling WordPress to behave?
<table border="0" cellpadding="10" width="760">
<tbody>
<tr>
<td width="170" align="left" valign="top" bgcolor="#68b14d"><span style="color: #ffffff;">Sales Education</span></td>
<td width="400" align="left" valign="top" bgcolor="#68b14d"><span style="color: #ffffff;">Description</span></td>
<td width="50" align="center" valign="top" bgcolor="#68b14d"><span style="color: #ffffff;">Type</span></td>
<td width="50" align="right" bgcolor="#68b14d"><span style="color: #ffffff;">Size</span></td>
</tr>
<tr>
<td align="center" valign="top"><a href="http://vederosoft.com/wp-content/uploads/2011/03/Vedero-Software-EILS-2.docx"></a><a href="http://vederosoft.com/wp-content/uploads/2011/03/Prospecting-Question-List.pdf"><img class="size-full wp-image-360" title="Prospecting-Question-List-Thumbnail" src="http://vederosoft.com/wp-content/uploads/2011/03/Prospecting-Question-List-Thumbnail.jpg" alt="" width="115" height="150" /></a></td>
<td align="left" valign="top"><em>How to you qualify a Demand Response Prospect?</em>
This one page PDF contains ten (10) essential questions for you to use when qualifying DR prospects.</td>
<td align="center" valign="top">pdf</td>
<td align="right" valign="top">520 Kb</td>
</tr>
</tbody>
</table>

Open in new window

0
Comment
Question by:William_Anglin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
14 Comments
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35102914
It is probably being defined in the style.css file. Look inside the style.css file for the table tags and remove their styles.
0
 

Author Comment

by:William_Anglin
ID: 35103123
Hmmm...

I can get to an editor and open "style.css", but it only has a bunch of includes in it.  WordPress hides all it's content so I can't get to the includes.  They don't show up in the Media Library as I would have expected from the source code.

For example, I can't navigate to library/media/css/

Has anyone out there developed a custom site within the WordPress framework?
/*
Theme Name:	Vedero
*/

/* Reset Browser Defaults */
@import url( 'library/media/css/reset.css' );

/* Apply base theme styles and colors */
@import url( 'library/media/css/base.css' );

/* Basic 2 Column Layout */
@import url( 'library/media/layouts/1col-new.css' );

/* Stylistic CSS Styles */
@import url( 'library/media/css/screen.css' );

/* Custom Styles */
@import url( 'library/media/css/custom.css' );

/* These empty css selectors are temporarily here for compatiability with the WordPress theme repository checklist. */
.aligncenter {} .alignleft {} .alignright {} .wp-caption {} .wp-caption-text {}

Open in new window

0
 
LVL 10

Expert Comment

by:c_a_n_o_n
ID: 35103214
This might be off base a bit, but there is one, incredible WordPress plugin that is highly flexible for tables.
http://wordpress.org/extend/plugins/wp-table-reloaded/

The last few versions have been more than sufficient for my needs.
0
Flash Sale! Good things come in big bundles

Save over 50% on our fully managed dedicated server bundle for Labor Day. Plus FREE Guardian Backups, FREE Advanced DDoS Protection and FREE Plesk Onyx Web Pro Edition.

 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 2000 total points
ID: 35103218
If you have an FTP browser, you can get to the files from there. It isn't Wordpress hiding the files. It is the author of the theme to attempt to keep people from "Mucking Up" his design.

If you can't get to the imported files, you could always use the CSS hack and add it to the style.css file.
The hack is to add !important to the end of a style. Here is an example:
table {
	border-width: 1px !important;
	border-spacing: 4px;
	border-style: ridge !important;
	border-color: gray !important;
	border-collapse: separate !important;
	background-color: white !important;
    width: 100% !important;
}
th {
	border-width: 1px !important;
	padding: 5px !important;
	border-style: outset !important;
	border-color: gray !important;
	background-color: white !important;
	-moz-border-radius: 14px 14px 14px 14px !important;
}
td {
	border-width: 1px !important;
	padding: 5px !important;
	border-style: outset !important;
	border-color: gray;
	background-color: white !important;
	-moz-border-radius: 14px 14px 14px 14px !important;
}

Open in new window


Add that to the style.css to see if tit does anything.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35103236
I have used http://wordpress.org/extend/plugins/wp-table-reloaded/

It caused too many W3C Validation errors, so I booted it.
0
 

Author Comment

by:William_Anglin
ID: 35104798
I tried wp-table-reloaded.  Interesting, but now I have even less control of the table formatting.

I also tried the CSS hack and it seems to have absolutely no affect.  But I think that's the way to go, so we're makin' progress.

Below is the code in the style.css.....then a line break.....then the HTML code in the page (aka post) where I am trying to do some simple table formatting.

Should I be tweaking the syntax in the HTML?  If so, how?

Arrrrg!!!  I just want WordPress to pay attention to my bloody tags man.  Then I can die happy.
/*
Theme Name:	Vedero
*/

/* Reset Browser Defaults */
@import url( 'library/media/css/reset.css' );

/* Apply base theme styles and colors */
@import url( 'library/media/css/base.css' );

/* Basic 2 Column Layout */
@import url( 'library/media/layouts/1col-new.css' );

/* Stylistic CSS Styles */
@import url( 'library/media/css/screen.css' );

/* Custom Styles */
@import url( 'library/media/css/custom.css' );

/* These empty css selectors are temporarily here for compatiability with the WordPress theme repository checklist. */
.aligncenter {} .alignleft {} .alignright {} .wp-caption {} .wp-caption-text {}


table {
	border-width: 1px !important;
	border-spacing: 4px;
	border-style: ridge !important;
	border-color: gray !important;
	border-collapse: separate !important;
	background-color: white !important;
    width: 100% !important;
}
th {
	border-width: 1px !important;
	padding: 5px !important;
	border-style: outset !important;
	border-color: gray !important;
	background-color: white !important;
	-moz-border-radius: 14px 14px 14px 14px !important;
}
td {
	border-width: 1px !important;
	padding: 5px !important;
	border-style: outset !important;
	border-color: gray;
	background-color: white !important;
	-moz-border-radius: 14px 14px 14px 14px !important;
}

_____________________________________________________

<table border="0" cellpadding="10" width="760">
<tbody>
<tr>
<td width="170" align="left" valign="top" bgcolor="#68b14d"><span style="color: #ffffff;">Sales Tools</span></td>
<td width="400" align="left" valign="top" bgcolor="#68b14d"><span style="color: #ffffff;">Description</span></td>
<td width="50" align="center" valign="top" bgcolor="#68b14d"><span style="color: #ffffff;">Type</span></td>
<td width="50" align="right" bgcolor="#68b14d"><span style="color: #ffffff;">Size</span></td>
</tr>
<tr>
<td align="center" valign="top"><a href="http://vederosoft.com/wp-content/uploads/2011/03/Vedero_Demand_Response_Data_Sheet.pdf"><img class="size-full wp-image-346 aligncenter" title="Vedero DR Datasheet Thumbnail" src="http://vederosoft.com/wp-content/uploads/2011/03/Vedero-DR-Datasheet-Thumbnail.jpg" alt="" width="115" height="150" /></a></td>
<td align="left" valign="top"><em>Use this data sheet to send to a prospect after your first discussion about demand response</em>
This one page datasheet defines the Automated Demand Response solution and concisely sets out the value proposition.</td>
<td align="center">pdf</td>
<td align="right">928 Kb</td>
</tr>
<tr>
<td align="center" valign="top"><a href="http://vederosoft.com/wp-content/uploads/2011/03/Vedero_February-2011.ppt"><img class="size-full wp-image-343 aligncenter" title="Vedero_February 2010 Thumbnail" src="http://vederosoft.com/wp-content/uploads/2011/03/Vedero_February-2011-Thumbnail.jpg" alt="" width="150" height="112" /></a></td>
<td align="left" valign="top"><em>Use this presentation when first discussing demand response with your prospect.</em>
This fifteen (15) page PowerPoint provides an overview of the company, the demand response solution and concludes with two customer success stories.</td>
<td align="center" valign="top">ppt</td>
<td align="right" valign="top">5 Mb</td>
</tr>
</tbody>
</table>
&nbsp;
<table border="0" cellpadding="10" width="760">
<tbody>
<tr>
<td width="170" align="left" valign="top" bgcolor="#68b14d"><span style="color: #ffffff;">Sales Education</span></td>
<td width="400" align="left" valign="top" bgcolor="#68b14d"><span style="color: #ffffff;">Description</span></td>
<td width="50" align="center" valign="top" bgcolor="#68b14d"><span style="color: #ffffff;">Type</span></td>
<td width="50" align="right" bgcolor="#68b14d"><span style="color: #ffffff;">Size</span></td>
</tr>
<tr>
<td align="center" valign="top"><a href="http://vederosoft.com/wp-content/uploads/2011/03/Prospecting-Question-List.pdf"><img class="size-full wp-image-360 aligncenter" title="Prospecting-Question-List-Thumbnail" src="http://vederosoft.com/wp-content/uploads/2011/03/Prospecting-Question-List-Thumbnail.jpg" alt="" width="115" height="150" /></a></td>
<td align="left" valign="top"><em>How to you qualify a Demand Response Prospect?</em>
This one page PDF contains ten (10) essential questions for you to use when qualifying DR prospects.</td>
<td align="center" valign="top">pdf</td>
<td align="right" valign="top">520 Kb</td>
</tr>
</tbody>
</table>

Open in new window

0
 

Author Comment

by:William_Anglin
ID: 35104904
Also relevant.  There are *no* other tables in this website.  So it isn't likely there are any table formatting bits within the CSS includes.

0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35106077
then the default WordPress styles are being applied. You should try adding some styling to the style.css file. It will show up if the other stylesheets aren't using the table selectors.
0
 

Author Comment

by:William_Anglin
ID: 35132849
Do you have a good reference for "table selector" syntax?

Because, I am still at a loss.  Editing style.css will work...but my trial and error approach to getting a simple valign=top doesn't work.  

That syntax is being ignored.  All variants I have tried are being ignored.


0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35133810
Here is a link to the W3C which is the World Wide Consortium (they set the web standards):
http://www.w3schools.com/html/html_tables.asp

Here is a good css style example for tables:
http://www.elated.com/articles/styling-tables-with-css/
0
 
LVL 31

Expert Comment

by:gwkg
ID: 35144070
You say the valign=top is being ignored... what is happening instead?

You can debug the css in Google Chrome browser by right clicking the cell and choosing Inspect Element.

Firefox also has a plugin to do the same thing: http://getfirebug.com/

It could also be your <!DOCTYPE
0
 

Author Comment

by:William_Anglin
ID: 35152336
Here's the page:

http://vederosoft.com/our-partners/tpc/

The password is tpc!6622

If you inspect it...you can see that I've tried using valign within the <TR> tag and also within the <TD> tags.  Both are ignored.  Alignment is "MIDDLE" instead.

I've tried inspecting it in Chrome and it doesn't give me a clue where "MIDDLE" is being enforced.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 36508863
This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0

Featured Post

WordPress Tutorial 3: Plugins, Themes, and Widgets

The three most common changes you will make to your website involve the look (themes), the functionality (plugins), and modular elements (widgets).

In this article we will briefly define each again, and give you directions on how to install them.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question