Table Border (HTML5)

Discussion about HTML and XHTML related issues.
Post Reply
paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 61
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Table Border (HTML5)

Post by paulp575 »

The latest version of HTML Validator Pro (v20.02) is giving me an error when using border="1".

If I'm understanding the latest HTML5 specification, 1 and 0 (zero) are allowed.

So which is it?
paulp575

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3471
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Table Border (HTML5)

Post by Albert Wiersch »

Hello,

Are you referring to the "border" attribute when used with the "table" element? UPDATE: Sorry! I see that you are now that I noticed the message subject.

The latest spec (from the "living standard") for "table" is here:
https://html.spec.whatwg.org/multipage/ ... le-element

It does not mention "border" in the allowed attributes (content attributes). If you search the page for "border" it does mention "border" as non-conforming.

The "border" attribute is not mentioned here (for the "img" element) either:
https://html.spec.whatwg.org/multipage/ ... mg-element

I suspect you are looking at an out-of-date specification. What specification are you looking at?
Image
Albert Wiersch

paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 61
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Table Border (HTML5)

Post by paulp575 »

That is about as Greek as you can get.
paulp575

paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 61
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Table Border (HTML5)

Post by paulp575 »

I was pretty sure it was on the w3c site, but am unable to find it not (didn't bookmark it earlier).

What I'd like to do is have a border of 1px not only around the table, but also between the rows, cells, etc.

In the past I've used border="1" (for no border I left the border style out). However, if I put that into CSS as border: 1px solid black it only surrounds the table; no vertical and horizontal lines inside the table.
paulp575

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3471
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Table Border (HTML5)

Post by Albert Wiersch »

paulp575 wrote:
Tue May 12, 2020 6:14 pm
I was pretty sure it was on the w3c site, but am unable to find it not (didn't bookmark it earlier).

What I'd like to do is have a border of 1px not only around the table, but also between the rows, cells, etc.

In the past I've used border="1" (for no border I left the border style out). However, if I put that into CSS as border: 1px solid black it only surrounds the table; no vertical and horizontal lines inside the table.
I think something like this will do what you want.

Code: Select all

table, th, td { border: 1px solid gray; }
Image
Albert Wiersch

paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 61
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Table Border (HTML5)

Post by paulp575 »

That doesn't seem to work.

I placed this in the stylesheet:
*.TABLE, *.TR, *.TH, *.TD
{
BORDER: 1px solid #000000;
}
I did that thinking it would place a 1px solid black border around the able as well as all the cells. Nope.

Since it's a short web page (still in draft mode with several pieces missing), here's my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Eastern Washington ATV Association Home Page">
<meta name="apple-mobile-web-app-title" content="EWATV Home">
<title>EWATV Home Page</title>

<link rel="stylesheet" href="z-EWATV-styles.css">

<!-- Page revisions: May 12, 2020; Initial creation
-->

<!-- Script used for copyright statement -->
<script src="z-copyright.js"></script>

</head>

<body>

<table class="WIDTH100P HEADER-BACKGROUND-IMAGE">
<tr class="TABLE-CELLPADDING-10PX">
<th rowspan="2">
<a href="https://ewatv.org/" target="_blank">
<img src="0-graphics/EWATV-logo-150x110.jpg" alt="EWATV logo" title="EWATV logo image" width="150" height="110">
</a>
</th>
<th class="TEXT-HEADER"><h1>Eastern Washington ATV Association</h1></th>
<th rowspan="2">
<a href="https://www.facebook.com/groups/304440899596976/" target="_blank">
<img src="0-graphics/Facebook-logo-110x110.jpg" alt="Facebook logo" title="Facebook logo image" width="110" height="110">
</a>
</th>
</tr>
<tr>
<td class="TEXT-ALIGN-CENTER TEXT-BOLD TEXT-COLOR-GREEN">
(menu goes here)
</td>
</tr>
</table>
<br><br><br>

<br><br><br>

<div class="TEXT-ALIGN-CENTER TEXT-BOLD TEXT-COLOR-GREEN">
Main Content (including slideshow)
</div>
<br><br><br>

<table class="WIDTH100P TEXT-ALIGN-VERTICAL BACKGROUND-COLOR-FOOTER">
<tr>
<th class="TABLE-CELLPADDING-25PX">
<a href="https://ewatv.org/Privacy-Policy.htm" target="_blank">Privacy Policy</a>
<br><br>

<a href="https://ewatv.org/Terms-of-Service.htm" target="_blank">Terms of Use</a>
<br><br>

<a href="http://ewatv.org/Liability-Waiver.htm" target="_blank">Liability Waiver</a>
</th>
<th>
<script>writeCopyright();</script>
EWATV, PO Box 14031, Spokane Valley WA&nbsp;&nbsp;99214-0031
</th>
<th>
<a href="http://ewatv.org/Site-Map.htm" target="_blank">Site Map</a>
</th>
</tr>
<tr class="TEXT-FOOTER">
<th colspan="3" class="TABLE-CELLPADDING-25PX">
Page last updated: May 12, 2020
</th>
</tr>
</table>

</body>
</html>
Hmmm, I think the problem is I didn't capitalize the word table in both places.

I don't capitalize any of my HTML tags, but the classes are all capitalized so I can easily spot them.

Thanks,
paulp575

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3471
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Table Border (HTML5)

Post by Albert Wiersch »

Hello,

Please try putting this in the stylesheet:

Code: Select all

TABLE, TR, TH, TD
{
BORDER: 1px solid #000000;
}
If you use *.TABLE instead of TABLE, then you will need to use the class="TABLE" attribute with all the elements that you want the border to apply to.
Image
Albert Wiersch

paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 61
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Table Border (HTML5)

Post by paulp575 »

Okay - I placed the following into the stylesheet:
*.TABLE, *.TR, *.TH, *.TD
{
BORDER: 1px solid #000000;
}
And then in the HTML5 webpage I used the following:
<table class="WIDTH100P TABLE HEADER-BACKGROUND-IMAGE">
All it did was to place a 1px solid black border around the entire table. No borders amongst the cells.

I tried this:
*.TABLE-1PX-SOLID-BORDER, *.TR-1PX-SOLID-BORDER, *.TH-1PX-SOLID-BORDER, *.TD-1PX-SOLID-BORDER
{
BORDER: 1px solid #000000;
}
And changed the HTML to this:
<table class="WIDTH100P TABLE-1PX-SOLID-BORDER HEADER-BACKGROUND-IMAGE">
Which removed the border surrounding the table.

Why is this so complicated? All I'm trying to do is to place a border around the table AND between all the rows and cells.
paulp575

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3471
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Table Border (HTML5)

Post by Albert Wiersch »

Hello,

It's not bordering the cells because a class that applies a border also needs to be applied to each cell... which is probably not a good idea because it's unnecessarily bloated and complex.

The easiest thing to do if you want the borders on all tables is:

Code: Select all

TABLE, TR, TH, TD
{
BORDER: 1px solid #000000;
}
But you probably don't want that because there are tables you may not want bordered.

If you want to use a CSS class for better control (recommended), and want to only have to apply a class to the table element and not each and every td or cell element, then trying something like:

Code: Select all

TABLE.borderme, TABLE.borderme TH, TABLE.borderme TD
{
BORDER: 1px solid #000000;
}
Then you just need to add class="borderme" to the table element. The above CSS will also cause the border to apply to all th and td elements in any table with class="borderme".
Image
Albert Wiersch

paulp575
Rank III - Intermediate
Rank III - Intermediate
Posts: 61
Joined: Tue Aug 09, 2005 1:20 pm
Location: Spokane WA
Contact:

Re: Table Border (HTML5)

Post by paulp575 »

Thank you! That worked.

To ensure I know what type of border that tag was, I changed it to (I like very descriptive tags since some day I may not be the one to update):
TABLE.BORDER-1PX-SOLID-BLACK, TABLE.BORDER-1PX-SOLID-BLACK TH, TABLE.BORDER-1PX-SOLID-BLACK TD
{
BORDER: 1px solid #000000;
}
And the HTML code looks like this:
<table class="WIDTH100P BORDER-1PX-SOLID-BLACK HEADER-BACKGROUND-IMAGE">
I tried placing an asterisk and a period in front of the CSS element, but that didn't work. My reason for trying this is in the past the validator always suggested *. in front of CSS tags. Why not this one?
paulp575

User avatar
Albert Wiersch
Site Admin
Site Admin
Posts: 3471
Joined: Sat Dec 11, 2004 9:23 am
Location: Near Dallas, TX
Contact:

Re: Table Border (HTML5)

Post by Albert Wiersch »

paulp575 wrote:
Wed May 13, 2020 4:06 pm
Thank you! That worked.
Great!
paulp575 wrote:
Wed May 13, 2020 4:06 pm
I tried placing an asterisk and a period in front of the CSS element, but that didn't work. My reason for trying this is in the past the validator always suggested *. in front of CSS tags. Why not this one?
There is a recommendation to put a * (asterisk) in front of classes like ".thisCSSclass" (note the period before the classname). This recommendation is not for elements/type selectors.

CSS HTML Validator recommends *.thisCSSclass (adds the "*") instead of .thisCSSclass, but this is just a recommendation and I have thought about removing this recommendation because I'm not sure how useful or helpful it really is. It looks like in this case it may have been more confusing than helpful.

And please note that this is for classes, not type selectors like "table". If you use "table" then it never recommends "*.table" because that is something completely different from "table". Adding "*." in front changes the type selector "table" into the class selector ".table" (the latter begins with a period to indicate it's a class selector but the former ("table") does not begin with a period and is therefore not a classname).
Image
Albert Wiersch

Post Reply