html making table borders invisible

Question

I use Drupal 6 with theme summertime. Also I use FCKeditor. In order to align content I wanted to create a table with invisible borders. First I tried FCKEditor table properties and I gave 0 to border size in order to make borders invisible. But it did not work. I looked up the source and non working code was like below (Why giving border="0" did not work?) :

<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
    <tbody>
        <tr>
            <td>
            <h2 class="rtecenter"><a href="http://mydomain.com/url"&gt;&lt;strong&gt;Content </strong></a></h2>
            </td>
            <td><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
        </tr>
    </tbody>
</table> 

Then I tried:

<table width="468" cellspacing="0" cellpadding="0" style="border: medium hidden ; width: 468px; height: 201px;">

Table borders are now invisible but cell borders are still visible. How can I make it totally invisible. Thanks.

Answer 1

The border attribute should be specified on the cell level, eg <td style="border: 0;">. Of course, this should be made in CSS using:

table td { border: 0; }

But I see that in your case that might be difficult.

Answer 2

It should be done like this:

<table width="468" cellspacing="0" cellpadding="0" border="0" style="width: 468px; height: 201px;">
<tbody>
    <tr>
        <td style="border: 0">
        <h2 class="rtecenter"><a href="http://mydomain.com/url"&gt;&lt;strong&gt;Content </strong></a></h2>
        </td>
        <td style="border: 0"><img src="/sites/mydomain.com/files/sample.jpg" alt="" /></td>
    </tr>
</tbody>

Answer 3

There are probably borders set in the CSS. Drupal core's system.css sets some borders on table headers and body that can be a pain to override.

You can add a custom CSS file to the theme so you avoid editing its CSS directly. Simply add the path to your added .css file in the theme's .info file.

Then try adding:

tbody,
thead,
thead th,
tr.even,
tr.odd {
  border: 0;
}

Don't forget to turn off CSS aggregation and clear your cache.