Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 654
  • Last Modified:

HTML Table Formatting in WordPress

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
William_Anglin
Asked:
William_Anglin
1 Solution
 
jeremyjared74Commented:
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
 
William_AnglinAuthor Commented:
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
 
c_a_n_o_nCommented:
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
jeremyjared74Commented:
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
 
jeremyjared74Commented:
I have used http://wordpress.org/extend/plugins/wp-table-reloaded/

It caused too many W3C Validation errors, so I booted it.
0
 
William_AnglinAuthor Commented:
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
 
William_AnglinAuthor Commented:
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
 
jeremyjared74Commented:
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
 
William_AnglinAuthor Commented:
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
 
jeremyjared74Commented:
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
 
gwkgCommented:
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
 
William_AnglinAuthor Commented:
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
 
Jason C. LevineNo oneCommented:
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!

Tackle projects and never again get stuck behind a technical roadblock.
Join Now