Solved

HTML Table Formatting in WordPress

Posted on 2011-03-10
14
606 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
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
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 500 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
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

743 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

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now