This is my HTML based on Wikipedia, for an episode guide, it's a test page locally:
<table style="width:100%;"><tbody><tr style="color:#fff;"><th style="background:#FFB90F;">Episode</th><th style="background:#FFB90F;">Title</th><th style="background:#FFB90F;">Written by</th><th style="background:#FFB90F;">Directed by</th><th style="background:#FFB90F;">Viewers<br />(millions)<sup id="cite_ref-barb_2-1" class="reference"><a href="#cite_note-barb-2">[2]</a></sup></th><th style="background:#FFB90F;">Original airdate</th></tr><tr class="vevent" style="text-align:center;background:#F2F2F2"><th scope="row" rowspan="1" id="ep1" style="text-align:center">1</th><td class="summary" style="text-align:left">"Monster Drivers"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">6.91m</td><td style="text-align:center">3 July 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-07-03</span>)</span></td></tr><tr class="expand-child"><td class="description" colspan="7" style="border-bottom:solid 3px #FFB90F">
Alastair assesses the true state of London's congested roads by taking to the skies, and thermal-imaging cameras close in on criminals cowering in a wood.</td></tr><tr class="vevent" style="text-align:center;background:#F2F2F2"><th scope="row" rowspan="1" id="ep2" style="text-align:center">2</th><td class="summary" style="text-align:left">"Brat Pack"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">6.91m</td><td style="text-align:center">10 July 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-07-10</span>)</span></td></tr><tr class="expand-child"><td class="description" colspan="7" style="border-bottom:solid 3px #FFB90F">
Alastair investigates bad and dangerous driving by young inexperienced drivers and youngsters trying to escape police capture, as well as the new horse-cam being used in the North East to stop football hooliganism.</td></tr><tr class="vevent" style="text-align:center;background:inherit"><th scope="row" rowspan="1" id="ep3" style="text-align:center">3</th><td class="summary" style="text-align:left">"Crash Test Racers"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">6.55m</td><td style="text-align:center">17 July 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-07-17</span>)</span></td></tr><tr class="vevent" style="text-align:center;background:inherit"><th scope="row" rowspan="1" id="ep4" style="text-align:center">4</th><td class="summary" style="text-align:left">"Highway of Tomorrow"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">6.72m</td><td style="text-align:center">24 July 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-07-24</span>)</span></td></tr><tr class="vevent" style="text-align:center;background:inherit"><th scope="row" rowspan="1" id="ep5" style="text-align:center">5</th><td class="summary" style="text-align:left">"Round the Bend"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">5.36m</td><td style="text-align:center">31 July 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-07-31</span>)</span></td></tr><tr class="vevent" style="text-align:center;background:inherit"><th scope="row" rowspan="1" id="ep6" style="text-align:center">6</th><td class="summary" style="text-align:left">"Danger Ahead"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">5.56m</td><td style="text-align:center">7 August 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-08-07</span>)</span></td></tr></tbody></table>What I am trying to do is convert the inline CSS into classes for between in the head page but I am not sure what will work; I've only just started trying.
This is my new CSS:
<style>
td.summary {
text-align: left;
}
.season7 {
background:#FFB90F;
}
description.season7 {
border-bottom:solid 3px #FFB90F;
}</style><table style="width:100%;"><tbody><tr style="color:#fff;"><th class="season7">Episode</th><th class="season7">Title</th><th class="season7">Written by</th><th class="season7">Directed by</th><th class="season7">Viewers<br />(millions)<sup id="cite_ref-barb_2-1" class="reference"><a href="#cite_note-barb-2">[2]</a></sup></th><th class="season7">Original airdate</th></tr><tr class="vevent" style="text-align:center;background:#F2F2F2"><th scope="row" rowspan="1" id="ep1" style="text-align:center">1</th><td class="summary">"Monster Drivers"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">6.91m</td><td style="text-align:center">3 July 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-07-03</span>)</span></td></tr><tr class="expand-child"><td class="description season7" colspan="7">
Alastair assesses the true state of London's congested roads by taking to the skies, and thermal-imaging cameras close in on criminals cowering in a wood.</td></tr><tr class="vevent" style="text-align:center;background:#F2F2F2"><th scope="row" rowspan="1" id="ep2" style="text-align:center">2</th><td class="summary">"Brat Pack"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">6.91m</td><td style="text-align:center">10 July 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-07-10</span>)</span></td></tr><tr class="expand-child"><td class="description season7" colspan="7">
Alastair investigates bad and dangerous driving by young inexperienced drivers and youngsters trying to escape police capture, as well as the new horse-cam being used in the North East to stop football hooliganism.</td></tr><tr class="vevent" style="text-align:center;background:inherit"><th scope="row" rowspan="1" id="ep3" style="text-align:center">3</th><td class="summary">"Crash Test Racers"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">6.55m</td><td style="text-align:center">17 July 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-07-17</span>)</span></td></tr><tr class="vevent" style="text-align:center;background:inherit"><th scope="row" rowspan="1" id="ep4" style="text-align:center">4</th><td class="summary">"Highway of Tomorrow"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">6.72m</td><td style="text-align:center">24 July 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-07-24</span>)</span></td></tr><tr class="vevent" style="text-align:center;background:inherit"><th scope="row" rowspan="1" id="ep5" style="text-align:center">5</th><td class="summary">"Round the Bend"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">5.36m</td><td style="text-align:center">31 July 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-07-31</span>)</span></td></tr><tr class="vevent" style="text-align:center;background:inherit"><th scope="row" rowspan="1" id="ep6" style="text-align:center">6</th><td class="summary">"Danger Ahead"</td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center"><small><span style="color: #2C2C2C" title="To be announced">TBA</span></small></td><td style="text-align:center">5.56m</td><td style="text-align:center">7 August 2000<span style="display:none"> (<span class="bday dtstart published updated">2000-08-07</span>)</span></td></tr></tbody></table>I have tried using classes with the . to indicate selectors but am not sure how to get the border-bottom to work and the text-align; left for vevent with styles similar to what's at https://en.wikipedia.org/wiki/List_of_Police_Camera_Action!_episodes for the td/tr colors.
It came out yellow for the description in CSS rather than white background, thick yellow border for episode description as I expected it to.
I did use view source in Firefox and Inspect element to get the CSS in Wikipedia but some of the classes weren't found in the page.
This is a sort of clone of Wikipedia's design but not a full clone script.
If anyone could help I would really appreciate it; my basic problem is getting CSS to work without repeated use of text-align in inline css etc.