[SOLVED] Table Border (HTML5)
-
- Rank IV - Intermediate
- Posts: 170
- Joined: Tue Aug 09, 2005 1:20 pm
- Location: Spokane WA
- Contact:
[SOLVED] Table Border (HTML5)
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?
If I'm understanding the latest HTML5 specification, 1 and 0 (zero) are allowed.
So which is it?
Last edited by paulp575 on Sun Jun 13, 2021 6:36 pm, edited 1 time in total.
paulp575
- Albert Wiersch
- Site Admin
- Posts: 3783
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Table Border (HTML5)
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?
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?
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
-
- Rank IV - Intermediate
- Posts: 170
- Joined: Tue Aug 09, 2005 1:20 pm
- Location: Spokane WA
- Contact:
Re: Table Border (HTML5)
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.
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
- Albert Wiersch
- Site Admin
- Posts: 3783
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Table Border (HTML5)
I think something like this will do what you want.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.
Code: Select all
table, th, td { border: 1px solid gray; }
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
-
- Rank IV - Intermediate
- Posts: 170
- Joined: Tue Aug 09, 2005 1:20 pm
- Location: Spokane WA
- Contact:
Re: Table Border (HTML5)
That doesn't seem to work.
I placed this in the stylesheet:
Since it's a short web page (still in draft mode with several pieces missing), here's my code:
I don't capitalize any of my HTML tags, but the classes are all capitalized so I can easily spot them.
Thanks,
I placed this in the stylesheet:
I did that thinking it would place a 1px solid black border around the able as well as all the cells. Nope.*.TABLE, *.TR, *.TH, *.TD
{
BORDER: 1px solid #000000;
}
Since it's a short web page (still in draft mode with several pieces missing), here's my code:
Hmmm, I think the problem is I didn't capitalize the word table in both places.<!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 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>
I don't capitalize any of my HTML tags, but the classes are all capitalized so I can easily spot them.
Thanks,
paulp575
- Albert Wiersch
- Site Admin
- Posts: 3783
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Table Border (HTML5)
Hello,
Please try putting this in the stylesheet:
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.
Please try putting this in the stylesheet:
Code: Select all
TABLE, TR, TH, TD
{
BORDER: 1px solid #000000;
}
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
-
- Rank IV - Intermediate
- Posts: 170
- Joined: Tue Aug 09, 2005 1:20 pm
- Location: Spokane WA
- Contact:
Re: Table Border (HTML5)
Okay - I placed the following into the stylesheet:
I tried this:
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.
And then in the HTML5 webpage I used the following:*.TABLE, *.TR, *.TH, *.TD
{
BORDER: 1px solid #000000;
}
All it did was to place a 1px solid black border around the entire table. No borders amongst the cells.<table class="WIDTH100P TABLE HEADER-BACKGROUND-IMAGE">
I tried this:
And changed the HTML to this:*.TABLE-1PX-SOLID-BORDER, *.TR-1PX-SOLID-BORDER, *.TH-1PX-SOLID-BORDER, *.TD-1PX-SOLID-BORDER
{
BORDER: 1px solid #000000;
}
Which removed the border surrounding the table.<table class="WIDTH100P TABLE-1PX-SOLID-BORDER HEADER-BACKGROUND-IMAGE">
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
- Albert Wiersch
- Site Admin
- Posts: 3783
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Table Border (HTML5)
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:
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:
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".
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;
}
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;
}
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial
-
- Rank IV - Intermediate
- Posts: 170
- Joined: Tue Aug 09, 2005 1:20 pm
- Location: Spokane WA
- Contact:
Re: Table Border (HTML5)
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):
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):
And the HTML code looks like this:TABLE.BORDER-1PX-SOLID-BLACK, TABLE.BORDER-1PX-SOLID-BLACK TH, TABLE.BORDER-1PX-SOLID-BLACK TD
{
BORDER: 1px solid #000000;
}
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?<table class="WIDTH100P BORDER-1PX-SOLID-BLACK HEADER-BACKGROUND-IMAGE">
paulp575
- Albert Wiersch
- Site Admin
- Posts: 3783
- Joined: Sat Dec 11, 2004 9:23 am
- Location: Near Dallas, TX
- Contact:
Re: Table Border (HTML5)
Great!
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).
Albert Wiersch, CSS HTML Validator Developer • Download CSS HTML Validator FREE Trial