Solved

HTML Table Formatting in WordPress

Posted on 2011-03-10
14
636 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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 
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
 

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

729 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