[SOLVED] Tables (HTML5) - Here We Go Again!!!

For general web development questions that are not specifically related to CSS HTML Validator. This includes (but is not limited to) general HTML, CSS, Accessibility, JavaScript, and SEO questions.
Post Reply
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

[SOLVED] Tables (HTML5) - Here We Go Again!!!

Post by paulp575 »

Trying to do an HTML5 document where I have 2 tables.
I'd like the first table to have NO borders and the second table will have a 1px border black.

Here's my CSS:

Code: Select all

    table.FIRST, td.FIRST
    {
      BORDER: none;
      PADDING: 3px;
    }

    table.SECOND, th.SECOND, td.SECOND
    {
      BORDER: 1px solid #000000;
      BORDER-COLLAPSE: collapse;
      PADDING: 3px;
    }
Here's my HTML code for the first table:

Code: Select all

<table class="FIRST FLOAT-RIGHT">
  <tr><td>(content, content, content)</td></tr>
</table>
Here's my HTML code for the second table:

Code: Select all

<table class="SECOND WIDTH100P">
  <tr><th>(header content)</th></tr>
  <tr><td>(content, content, content)</td></tr>
</table>
While this gives me the outside borders on the second table, there are no no borders between the cells of the second table.

What did I do wrong? Why did they make this so complicated? It used to be you just used the border CSS property. Now you can't do that!
Last edited by paulp575 on Sun Jul 25, 2021 11:47 am, edited 1 time in total.
paulp575
User avatar
Albert Wiersch
Site Admin
Posts: 3783
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Tables (HTML5) - Here We Go Again!!!

Post by Albert Wiersch »

Hi Paul,

You used this selector list:

Code: Select all

table.SECOND, th.SECOND, td.SECOND
But you don't have class="SECOND" in the "th" and "td" elements.

But instead of adding class="SECOND" attributes to all the "th" and "td" elements, you could just change the selector list to:

Code: Select all

table.SECOND, table.SECOND th, table.SECOND td
Then you don't have to add all those class="SECOND" attributes.

I should also probably mention that class names like "FIRST" and "SECOND" that are based on where a table is on a page are probably not good CSS class names because they refer to HTML page structure... Consider using something like "bordered-cells" as a better class name than "SECOND".

I hope this helps and does want you want. Please let me know if you have any more questions.
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
paulp575
Rank IV - Intermediate
Posts: 170
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Tables (HTML5) - Here We Go Again!!!

Post by paulp575 »

That worked - thank you!
paulp575
Post Reply