They Deprecated in Html 5 ?

novice2022 · 2022-06-22T18:20:38+00:00

Hi, Got Fire Fox v101.01. This working fine: <table border="10" cellspacing="5" cellpadding="20" bordercolor = "red" bgcolor = "white"> But I read th...

They Deprecated in Html 5 ?

ginerjm

CSS. And a loop for each row's output code

novice2022

ginerjm

With pure html5 only. How to do ?

NogDog

Note that by definition, "deprecated" does not mean "not supported" -- it means that at some point in the future it will not be supported; so it's a warning that you should stop using it now so that it doesn't break later.

novice2022

NogDog

Ok. Thanks.
Out of these, which one you know, are deprecated ....

bgcolor
background
bordercolor
caption
colgroup

coothead

novice2022
With pure html5 only. How to do ?

Like this perhaps...

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>The tr element</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
   background-color: #f9f9f9;
   font: normal 1em / 1.5em  sans-serif;
 }
th, td {
   padding: 0.5em 0.75em;
 }
tr th:nth-of-type(1), 
tr th:nth-of-type(2),
tr td:nth-of-type(1),
tr td:nth-of-type(2) {
   background-color:#f00;
   animation: colorchange 9s  ease-in-out infinite;
 }
tr th:nth-of-type(3),
tr td:nth-of-type(3) {
   background-color:#ff0;
 }
@keyframes colorchange {
   0% {
       background-color:#f00;
  }  

33.3% {
       background-color:#090;
       color: #fff;
  } 
66.6% {
       background-color:#00f;
       color: #fff;
  }
 }
</style>

</head>
<body>

<h1>The tr element</h1>

<table>
 <thead>
  <tr>
    <th scope="col">ISBN</th>
    <th scope="col">Title</th>
    <th scope="col">Price</th>
  </tr>
 </thead>
 <tbody>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
  <tr>
    <td>5869207</td>
    <td>My first CSS</td>
    <td>$49</td>
  </tr>
 </tbody>
</table>

</body>
</html>

coothead

novice2022

coothead

That is very very cool. Indeed!
More than I expected.
However, are you sure it's not css and pure html 5 ?
I am trying to memorise the code. memorising html5 not that hard but css is. I new at css. Basic level.

NogDog

novice2022 sure it's not css and pure html 5

It's 2022. If you want to control how browsers display your HTML, use CSS. Period.

Sempervivum

novice2022

Is bordercolor, caption, colgroup deprecated ?

Out of these, which one you know, are deprecated ....
bgcolor
background
bordercolor
caption
colgroup

This site will tell you exactly:
https://validator.w3.org

novice2022

Sempervivum

But I do not have a website. Working on localhost.
Now what ?

EDIT:
Ok. Found it:
https://validator.w3.org/#validate_by_input+with_options

Sempervivum

Fine. You have to provide a complete document for checking, including doctype, html, head, etc.
Snippets will not work.

novice2022

Sempervivum

I did provide a complete code.
But, it does not detect this line is incorrect:

#gt0-#gt2:hover {background-color: orange; color: red;}

Nor suggests any correction, which I was expecting. That is my big issue. WHich I need help here:
https://forum.webdeveloper.com/d/400062-how-to-change-text-colour-in-a-table-via-colgroup/8

See for yourself on this link:
https://validator.w3.org/nu/#textarea

Here is the full code I am testing:

<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<style>

th:hover {background-color: black; color: gold;}
tr:hover {background-color: silver; color: white;}

#gt0-#gt2:hover {background-color: orange; color: red;}

</style>

</head>
<body>

<table border="20" width="100%" cellspacing="5" cellpadding="20" color="red" bgcolor="orange">
<caption>Caption</caption>
<colgroup>
    <col span="3" style="background-color:white; color:green; font-family:courier; font-size:50%">
    <col span="3" style="background-color:black; color:blue; font-family:verdana; font-size:40%">
	<col span="3" style="color:red; font-family:arial; font-size:10%">
</colgroup>
 <thead>
 <tr>
   <th colspan="3">GOOD</th><th colspan="3">BAD</th><th colspan="3">NEUTRAL</th>
 </tr>
 </thead>
 <tbody>
 <tr>
 <td>Title</td><td>FIRST NAME</td><td>SURNAME</td><td>Title</td><td>FIRST NAME</td><td>SURNAME</td><td>Title</td><td>FIRST NAME</td><td>SURNAME</td>
  </tr>
  <tr>
   <td id="gt0">Mr</td><td id="gf0">Muhammad</td><td id="gs0">Ali</td><td id="bt0">Mr</td><td id="bf0">Adolph</td><td id="bs0">Hitler</td><td id="nt0">Mr</td><td id="nf0">Mohandas</td><td id="ns0">Ghandi</td>
  </tr>
  <tr>
   <td id="gt1">Mr</td><td id="gf1">Mike</td><td id="gs1">Tyson</td><td id="bt1">Mr</td><td id="bf1">Winston</td><td id="bs1">Churchill</td><td id="nt1">Mr</td><td  id="nf1">Crocodile</td><td id="ns1">Dundee</td>
  </tr>
  <tr>
   <td id="gt2">Mr</td><td id="gf2">Malcolm</td><td id="gs2">X</td><td id="bt2">Mr</td><td id="bf2">Joseph</td><td id="bs2">Stalin</td><td id="nt2">Mr</td><td id="nf2">Napolean</td><td id="ns2">Bonaparte</td>
  </tr>
 </tbody>
  <tfoot>
  <tr>
   <td colspan="3">GOOD</td><td colspan="3">BAD</td><td colspan="3">NEUTRAL</td>
  </tr>
 </tfoot>
</table>

</body>
</html>

@coothead

Why is that ?

Sempervivum

novice2022
I see. The validator detects syntax errors only. And from the view of syntax it considers #gt0-#gt2 as a valid selector, although I'm a bit surprised that # is permitted inside a selector. I would have expected that it's reserved as it's the leading character for an ID.
However from the view of semantics or logic it makes no sense as there is no element in the HTML matching.

novice2022

Sempervivum

Mmm.
Still scratching my head.
It seems I cannot shorten it then to make it work on my two browsers and would have to stick to the longest way ...

#gt0:hover {background-color: orange; color: red;}
#gt1:hover {background-color: orange; color: red;}
#gt2:hover {background-color: orange; color: red;}

Let's continue this issue here:
https://forum.webdeveloper.com/d/400062-how-to-change-text-colour-in-a-table-via-colgroup/10

novice2022

Sempervivum

Do close this thread.

Thanks!