I have lots of HTML data tabled pages (that I don't want to have to recreate) that I need to put into Wordpress.

The Wordpress CSS is overriiding the formatting within the HTML tables.

Is there a quick easy way that I can stop this from happening? (Without having to edit every single page and date contained within)

Can I put a code in the table tag that will get W/Press to ignore the formatting in the table and let the HTML take precedence?

If so, what code do I need and how do I define the class in the CSS?

Thanks guys, I appreciate your help.

Code:

<table style='add the elements here;'>

for eg:-

Code:

<table style='width:100px;height:200px;color:#fff;'>

this should over ride the code
or else you could define a class to tables which would be easier than changing styles in each table tag.

The Css:-

Code:

<style>
table.haha{
width:Xpx;
height:Xpx;
border:1px solid #000000;
}
</style>

The Code:-

Code:

<table class=haha>
<tr><td>....</table>

Thanks Black Cat, I'll give this a go.

Okay, I'm being a bit thick lol. It looks like I'll have to recreate all the tables and then all the contents.... or do I?

I have one big table on the HTML pages, some columns are merged into other colums, and there is text and audio file links as the table data. Some of the text is in a different format e.g. size, strong/bold, etc depending where on the table the text is situated.

I'm thinking that by the time I set up and place the classes etc, I may as well start from scratch, create a new table template and then work on the tedious task of re adding the data and formatting it as I go along to reflect the CSS style sheet.

I just wanna copy and paste the HTML code, but looks like it won't let me!

Hi Sophie,

I think you can try to override the wordpress CSS by adding some more codes to it.

If you can provide me the wordpress CSS here, I can give you some codes to add there which can override the default CSS and won't mess with your HTML tables.

Brilliant! Thanks ankillien!

So, I need the CSS for the body/content.php in wordpress, right?

Sorry, I'm a bit of a CSS dum-dum lol. However, I have now got the Sams Teach Yourself CSS in 24 Hours book, but the trouble is, I need to learn in 5 minutes lol as I'm running behind. Oh, and the book was published in 2002 - which is very outdated by now, I imagine!

Yes, you can post the CSS codes here or just give me a link to the wordpress site and I'll grab the CSS code myself

Thanks ankillien. The site is not live, so I'll post the CSS here. I'm still not sure which one you need, so I'll post both the ones I think are relevant.

Main Index Template (index.php)

Code:


<?php get_header(); ?>
<div class="colmask rightmenu">
  <div class="colleft">
    <div class="col1">
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <h2 class="posttitle"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'r755'), the_title_attribute('echo=0')); ?>">
          <?php the_title(); ?>
          </a></h2>
        <div class="postinfo">
          <?php the_time(__('l j M Y', 'r755')) ?>
          <?php _e('by','r755');?>
          <?php the_author(); ?>
          | <a href="<?php comments_link(); ?>">
          <?php comments_number(__('No Comments','r755'), __('1 Comment','r755'), __('% Comments','r755'), '', __('Comments off','r755')); ?>
          </a>
          <?php edit_post_link(__('Edit','r755'), '[ ', ' ]'); ?>
          <br />
          <?php _e('Filed under:','r755');?>
          <?php the_category(', '); ?>
          <?php the_tags(__('Tags:', 'r755') . ' ', ', ', '<br />'); ?>
        </div>
        <div class="entry">
          <!-- Excerpt With Thumbnail Layout/ -->
          <?php $use_excerpts = get_option('r755_use_excerpts'); ?>
          <?php if ($use_excerpts == "true") {?>
          <?php if (  (function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) : ?>
          <a title="<?php printf(__('Permanent Link to %s', 'r755'), the_title_attribute('echo=0')); ?>" href="<?php the_permalink(); ?>">
          <?php the_post_thumbnail(array(150,150), array('class' => 'alignleft')) ?>
          </a>
          <?php else : ?>
          <?php $thumbnail = get_post_meta($post->ID, 'thumbnail', true); //If post does not have a thumbnail (WP 2.9+), it gets the value from the custom field, "thumbnail"
   if ($thumbnail) { //if the user set a custom field named thumbnail ?>
          <a title="<?php printf(__('Permanent Link to %s', 'r755'), the_title_attribute('echo=0')); ?>" href="<?php the_permalink(); ?>"><img src="<?php echo bloginfo('template_url'); ?>/thumb.php?src=<?php echo $thumbnail; ?>&amp;h=150&amp;w=150&amp;zc=1&amp;q=75" alt="<?php the_title(); ?>" class="alignleft" /></a>
          <?php } ?>
          <?php $exthumb = get_post_meta($post->ID, 'exthumb', true); //Cuntom field for a remote hosted thumbnail (e.g. YouTube video screenshon). Gets the value from the custom field, "exthumb"
    if ($exthumb) { //if the user set a custom field named exthumb ?>
          <a title="<?php printf(__('Permanent Link to %s', 'r755'), the_title_attribute('echo=0')); ?>" href="<?php the_permalink(); ?>"><img src="<?php echo $exthumb; ?>" alt="<?php the_title(); ?>" class="alignleft" width="150" height="150" /></a>
          <?php } ?>
          <?php endif ; ?>
          <?php the_content_limit(1000, "Read More &rarr;"); ?>
          <br class="clearFloat" />
          <?php } else  { ?>
          <!-- /Excerpt With Thumbnail Layout -->
          <!-- Normal Layout/ -->
          <?php the_content(__('Read the rest of this entry &raquo;', 'r755')); ?>
          <br class="clearFloat" />
          <!-- /Normal Layout -->
          <?php } ?>
        </div>
      </div>
      <?php endwhile; ?>
      <?php if(function_exists('wp_page_numbers')) : ?>
      <?php wp_page_numbers() ?>
      <?php else : ?>
      <div class="alignleft">
        <?php next_posts_link(__('&laquo; Older Entries', 'r755')) ?>
      </div>
      <div class="alignright">
        <?php previous_posts_link(__('Newer Entries &raquo;', 'r755')) ?>
      </div>
      <br />
      <?php endif; ?>
      <?php else: ?>
      <h2>
        <?php _e('Not Found', 'r755'); ?>
      </h2>
      <p>
        <?php _e('Sorry, but you are looking for something that isn’t here.', 'r755'); ?>
      </p>
      <?php endif; ?>
    </div>
    <?php get_sidebar(); ?>
  </div>
</div>
<?php get_footer(); ?>


Page Template (page.php)

Code:


<?php get_header(); ?>
<div class="colmask rightmenu">
  <div class="colleft">
    <div class="col1">
      <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
      <div <?php post_class() ?> id="post-<?php the_ID(); ?>">
        <h2 class="posttitle"><a href="<?php the_permalink(); ?>" rel="bookmark" title="<?php printf(__('Permanent Link to %s', 'r755'), the_title_attribute('echo=0')); ?>">
          <?php the_title(); ?>
          </a></h2>
        <div class="entry">
          <?php the_content(__('Read the rest of this entry &raquo;', 'r755')); ?>
        </div>
        <?php wp_link_pages(array('before' => '<p><strong>' . __('Pages:', 'r755') . '</strong> ', 'after' => '</p>', 'next_or_number' => 'number')); ?>
        <div class="printinfo">
          <?php $copyright_name = get_option('r755_copyright_name'); ?>
          <?php _e('Printed from:', 'r755'); ?>
          <?php the_permalink(); ?>
          .<br />
          &copy; <?php echo $copyright_name; ?> <?php echo date('Y') ?>. </div>
      </div>
      <?php comments_template('', true); ?>
      <?php endwhile; else: ?>
      <h2>
        <?php _e('Not Found', 'r755'); ?>
      </h2>
      <p>
        <?php _e('Sorry, but you are looking for something that isn’t here.', 'r755'); ?>
      </p>
      <?php endif; ?>
    </div>
    <?php get_sidebar(); ?>
  </div>
</div>
<?php get_footer(); ?>


Sorry, double post.

Hi,

Actually, this is not what I need. I needed the code from the style.css file. But no problem, I can get it myself.

Can you tell me if you are using the default wordpress theme or you have installed an external theme??

Sorry about that! My brain's not in gear today!!

The theme I'm using is: R755 4.1.0 by varometro

Here's the Style Sheet (style.css)

Code:


/*
Theme Name: R755
Theme URI: http://www.varometro.net/blog/r755_theme/
Description: R755 is a minimalist wordpress theme built from scratch with two basic principles: content comes first and the smallest possible size. Valid XHTML (strict), Valid CSS with no hacks, simple and clean code, lightweight, Wordpress 2.7+ compatible, threaded comments, microformats, sticky-post, SEO, options page, printer friendly, post thumbnails (WP 2.9+), enhanced archives template, localization supported.
Version: 4.1.0
Author: varometro
Author URI: http://www.varometro.net/blog
Tags: blue, white, light, two-columns, fixed-width, right-sidebar, threaded-comments, sticky-post, theme-options, microformats

The CSS, XHTML and design is released under GPL: http://www.opensource.org/licenses/gpl-license.php
*/

/*===== o0o: STRUCTURE =====*/
html {
font-size:100%;
}
html,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6 {
border:0;
outline:0;
margin:0;
padding:0;
}
body {
margin:0;
padding:0;
border:0;         /* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
text-align:center;
font-size:81.25%;
color:#111;
font-family:Arial, Helvetica, sans-serif;
line-height:1.6em;
}
#fixed {
margin:0 auto;
width:780px;        /* you can use px, em or % */
text-align:left;
background:#fff;
}
#header {
clear:both;
float:left;
width:100%;
background:url(images/default.jpg) right no-repeat;
border-bottom:solid 1px #eaeaea;
height:200px;
padding:0
}
.colmask {
position:relative;   /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%;         /* width of whole page */
overflow:hidden;   /* This chops off any overhanging divs */
}
.colright, .colmid, .colleft {
float:left;
width:100%;
position:relative;
}
.col1, .col2, .col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
.rightmenu .colleft {
right:30%;         /* right column width */
background:#fff;   /* left column background colour */
border-right:solid 1px #eaeaea;
}
.rightmenu .col1 {
width:66%;         /* left column content width (left column width minus left and right padding) */
left:32%;         /* (right column width) plus (left column left padding) */
}
.rightmenu .col2 {
width:26%;         /* right column content width (right column width minus left and right padding) */
left:36%;         /* (right column width) plus (left column left and right padding) plus (right column left padding) */
font-size:1em;
line-height:1.6em;
}
#footer {
clear:both;
float:left;
width:100%;
border-top:solid 1px #eaeaea;
font-size:1em;
line-height:1.2em;
padding-bottom:20px;
}

/*===== o0o: TYPO =====*/
/* Typography General */
.post,.page {
padding-bottom:10px;
}
.description {
color:#999;
font-size:1em;
font-weight:400;
padding:7px 0 0 12px;
width:300px;
display:block;
}
.postinfo {
color:#999;
font-size:1em;
line-height:1.25em;
margin:10px 0;
clear:left;
}
.sticky {
padding:0 10px 10px;
border:solid 1px #ccc;
margin-bottom:30px;
background:#f8f8f8;
}
blockquote {
background:url(images/blockquote.gif) top left no-repeat;
margin:10px 40px 10px 20px;
font-style:italic;
padding:3px 3px 3px 40px;
}
pre {
width:100%;
white-space:pre-wrap;
}
code {
font: 12px/20px Consolas, Monaco, 'Lucida Console', monospace  normal;
color: #596878;
}
input,textarea,select {
font-family: Arial, Helvetica, sans-serif;
border:1px solid #ccc;
background:#f8f8f8;
color:#333;
font-size:1em;
}
small {
font-size:1em;
color:#999;
}
.printinfo {
display:none;
}

/* Header styles */
h1,h2,h3,h4 {
font-weight:700;
color:#111;
padding:20px 0 0;
}
#header h1 {
font-weight:700;
font-size:2.4em;
padding:60px 0 0 10px;
}
h1 {
font-size:2em;
}
h2 {
font-size:1.625em;
}
h3 {
font-size:1.375em;
}
.col2 h3 {
font-size:1.25em;
padding:0;
margin:20px 0 0;
}
h4 {
font-size:1em;
}

/* Sidebar */
.col2 ul {
margin:0 0 30px;
padding:0;
}
.col2 ul li ul {
margin:0;
padding:0;
}
.col2 ul li {
list-style:none;
}
.col2 ul li ul li {
list-style:none;
list-style-position:outside;
list-style-image:url(images/arrow.gif);
margin-left:17px;
}
.col2 p {
margin-top:0;
}

/*===== o0o: LINKS =====*/
a,a:visited {
text-decoration:none;
color:#26a;
outline:none;
}
a:hover {
color:#0e4071;
text-decoration:underline;
}
.col2 a:hover {
text-decoration:none;
}
.postinfo a, .postinfo a:visited {
text-decoration:none;
color:#999;
}
.postinfo a:hover {
color:#111;
text-decoration:none;
}
h2.posttitle,h2.posttitle a {
font-size:1.25em;
line-height:1.2em;
color:#111;
font-weight:700;
margin:0;
}
h2.posttitle a:hover {
color:#111;
text-decoration:none;
}
#header a,#header a:hover {
color:#111;
text-decoration:none;
}

/*===== o0o: COMMENTS =====*/
ul.commentlist {
margin:0;
padding:0;
}
ul.children {
margin-left:0.5em;
}
ul.commentlist,ul.children {
list-style-type:none;
}
ul.commentlist li div.vcard img.avatar {
border:1px solid #999;
padding:2px;
margin:4px 5px 0 0;
float:left;
}
ul.commentlist .commentmetadata {
font-size:0.9em;
}
ul.commentlist .comment-author {
padding-top:4px;
border-top:1px dotted #999;
}
ul.commentlist .comment-meta {
padding-bottom:4px;
border-bottom:1px dotted #999;
}
.reply {
margin-bottom:1em;
}
span.says {
display:none;
}
h4#comments,h4#pings {
margin:0 0 1em;
font-size:1.125em;
}
h4#postcomment {
margin:0;
font-size:1.125em;
}
.commentmeta {
border-top:1px dotted #999;
border-bottom:1px dotted #999;
}
.commentmeta li {
font-size:.87em;
}
li.author,li.date {
font-style:italic;
}

/*===== o0o: FORMS =====*/
select {
width:130px;
}
#commentform input {
width:170px;
padding:2px;
margin:5px 5px 1px 0;
}
#commentform {
margin:5px 10px 0 0;
}
#commentform textarea {
width:100%;
padding:2px;
}
#commentform #submit {
margin:0 0 5px auto;
}
div#search{
border:none;
position:relative;
margin-top:25px;
margin-bottom:60px;
}
div#search form#searchform{
position:absolute;
top:0;
width:180px;
height:25px;
border:1px solid #ccc;
background-color:#f8f8f8;
}
div#search form#searchform .searchinput{
position:absolute;
padding-left:2px;
top:5px;
color:#666;
font-size:13px;
width:145px;
border:0;
}
div#search form#searchform .button{
position:absolute;
top:0px;
left:155px;
background:url(images/mag.gif) no-repeat;
height:25px;
width:25px;
border:0;
cursor:pointer;
}

/*===== o0o: IMAGES =====*/
/* Images General */
.alignleft {
float:left;
}
.alignright {
float:right;
}
img {
border:0;
}
img.avatar {
float:left;
padding-right:5px;
}
p img {
max-width:100%;
padding:0;
}
img.alignleft{
margin: 3px 10px 2px 0;
}
img.alignright{
margin: 3px 0 2px 10px;
}
img.alignleft, img.alignright{
padding: 4px;
border: 1px solid #eee;
display: inline;
}
img.centered,.aligncenter,div.aligncenter {
display:block;
margin-left:auto;
margin-right:auto;
}

/* Captions */
.wp-caption {
border:1px solid #ddd;
text-align:center;
background-color:#f8f8f8;
padding-top:4px;
margin:10px;
}
.wp-caption img {
border:0 none;
margin:0;
padding:0;
}
.wp-caption p.wp-caption-text {
color:#666;
font-style:italic;
line-height:17px;
margin:0;
padding:0 4px 5px;
}

/*===== o0o: WIDGETS =====*/
div#calendar_wrap,table#wp-calendar {
width:100%;
}
div#calendar_wrap {
padding:0 15px 0 5px;
}
div#calendar_wrap caption {
font-size:1.1em;
font-weight:700;
padding:0 20px 0 0;
}

/*===== o0o: PLUGINS =====*/
/* Wp Page Numbers */
#wp_page_numbers ul,#wp_page_numbers li,#wp_page_numbers a {
background:#fff;
padding:0;
margin:0;
border:none;
text-decoration:none;
font-weight:400;
font-style:normal;
list-style:none;
text-transform:none;
text-indent:0;
font-variant:normal;
text-align:left;
line-height:12px;
letter-spacing:0;
word-spacing:0;
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
}
#wp_page_numbers {
margin-top:10px;
width:100%;
background:#fff;
}
#wp_page_numbers ul {
width:100%;
}
#wp_page_numbers li {
float:left;
display:block;
margin-bottom:2px;
}
#wp_page_numbers a {
color:#26a;
border:none;
padding:3px;
padding-left:5px;
padding-right:5px;
margin-left:2px;
margin-right:2px;
display:block;
text-decoration:none;
}
#wp_page_numbers li a:hover {
text-decoration:underline;
}
#wp_page_numbers li.space {
padding:6px;
padding-left:2px;
padding-right:2px;
}
#wp_page_numbers li.first_last_page {
font-style:italic;
}
#wp_page_numbers li.active_page a, #wp_page_numbers li.active_page a:hover {
color:#000;
}
#wp_page_numbers li.page_info {
float:left;
display:block;
padding:3px;
padding-left:5px;
padding-right:5px;
margin-right:2px;
color:#000;
font-size:1em;
}

/* Lightsocial */
.lightsocial_container{
margin-top:10px;
margin-bottom:55px;
position:relative;
}
.lightsocial_element {
margin-left:4px;
margin-right:4px;
display:inline;
float:left;
}

/* Flickrss */
ul.flickr li, .col2 ul li ul.flickr li {
list-style:none;
list-style-position:outside;
margin-left:0;
display:inline;
padding-right:5px;
}
ul.flickr {
margin-left:0;
padding-left:0;
}

/*===== o0o: FIXES =====*/
/* Floats */
clearFloat {
clear:both;
}


Thanks so much. x

Hi!

I looked into the CSS but couldn't find anything that can mess with HTML table codes. The calendar widget uses the tables so it can cause trouble.

You can try adding a unique ID or class name to your <table> tag, like this...

Code:

<table id="my-table" class="my-new-table">

I am not sure if this will work. If this doesn't work, there is no short cut to achieve this, I think.

You might need to follow the method Black Cat showed above.

you can use the following to select global elements

table{
td{
tr{
tbody{

but, if you want to select a specific table, lets say it has the id "main" you would use this code

table #main{

or just #main{ should work find usually.

What it's doing is taking my table fonts and making them all tiny in size, and shifting everything all over the place (right instead of left etc).

Also, it won't show audioacrobat code - but I've found a way around this now, so that's now not a problem.

Thanks for your help so far.