Why is my complete table in bold? - html

Question

Good day,
I have the following table in html which is entirely displayed in bold. What I don't understand is that I have set the property font-weight to normal in my train_timetable_table element:
Have I missed to add a new element to my CSS configuration which would only show the first row in bold (identified in my example below by * I would like this row in bold *)
I hope that my question is clear enough and hopefully will save some time for future searches.
Many thanks for your time and your help to solve this matters.
Best wishes
/* Page entière (utilisé pour avoir une couverture globale en couleur) */
body {
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
}
/* Affichage de l'en-tête */
#header {
font-family:Arial;
text-align:center;
position: relative;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
color:black;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
width:1000px;
height:80px;
}
/* Affichage de la barre de navigation */
#nav {
font-family:Arial;
position: relative;
line-height:50px;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
height:434px;
width:60px;
float:left;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
/* Affichage des données essentielles (section) */
#section {
font-family:Arial;
font-size: 100%;
float:left;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
padding-top: 5px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 10px;
height:434px;
width:870px;
}
/* Affichage de la barre de pied d'écran (version de domooaweb) */
#footer {
font-family:Arial;
font-size: 60%;
text-align:center;
background-color:#005580; /*night mode*/
background-color:#ccffcc; /*day mode*/
color:black;
clear:both;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
height:12px;
width:1000px;
}
#validity {
font-family:Arial;
font-size: 100%;
color:black;
position:fixed;
top: 110px;
left: 640px;
width:350px;
}
#reserved {
position:fixed;
top: 250px;
left: 200px;
color:black;
font-family:Arial, sans-serif;
font-size:18px;
}
#home_automation_tab
{
position: fixed;
height: 350px;
width: 900px;
top: 140px;
left: 140px;
}
#train_station img {
position: fixed;
top: 160px;
left: 140px;
z-index: 2;
}
#weather_img img {
position: fixed;
top: 160px;
left: 140px;
z-index: 2;
}
#emergency_img img {
position: fixed;
top: 160px;
left: 140px;
z-index: 2;
}
/* Affichage du logo */
#logo img {
position: fixed;
top: 12px;
left: 5px;
z-index: 2;
}
/* Affichage de l'icône météo */
#meteo_icon img{
position: fixed;
top: 12px;
left: 935px;
z-index: 2;
}
/* Affichage des prévisions météorologiques (températures) */
.meteoforecast_temperature{
font-family: Arial, Helvetica, sans-serif;
font-size: 26px;
font-weight: 900;
color: black;
}
/* Affichage des prévisions météorologiques (jour) */
.meteoforecast_day{
font-family: Arial, Helvetica, sans-serif;
font-size: 22px;
color: black;
}
/* Affichage des prévisions météorologiques (condition) */
.meteoforecast_condition {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
color: black;
}
/* Affichage de la météo dans le monde (scroller) */
#worldwide_meteo {
font-family:Arial;
font-size: 18px;
color:black;
top: 150px;
left: 145px;
width: 800px;
position: fixed;
}
/* Affichage de l'image d'erreur 404 (page non trouvée) */
#err404 img{
position: fixed;
top: 180px;
left: 180px;
}
/* Affichage de l'image de la météo mondiale */
#ww_meteo img{
position: fixed;
top: 200px;
left: 165px;
}
/* Affichage des icônes météo mondiale */
Marquee img {
vertical-align:middle
}
/* Table pour horaires de train (lundi-samedi) */
#table_train_timetable1
{
position: fixed;
top: 290px;
left: 139px;
z-index: 2;
}
/* Table pour prévisions météo 3 jours */
#table_forecast_3days
{
position: fixed;
top: 290px;
left: 139px;
z-index: 2;
}
.train_timetable_table
{
border: 1px solid black;
color: black;
border-color:gray;
font-weight:normal;
}
.train_timetable_table td
{
font-family:Arial, sans-serif;
font-size:14px;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
font-weight:normal;
}
.train_timetable_table th
{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
}
.train_timetable_table .title
{
font-weight:bold;
color:black;
border-color:gray;
}
.train_timetable_table .tablerows
{
vertical-align:top;
font-weight:normal;
}
.weather_forecast_table
{
border: 1px solid black;
}
.useful_numbers_table
{
border: 1px solid black;
color:black;
border-color:gray;
}
.temps_parcours_table
{
border: 1px solid black;
color: black;
border-color:gray;
}
.temps_parcours_table td
{
font-family:Arial, sans-serif;
font-size:14px;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
}
.temps_parcours_table th
{
font-family:Arial, sans-serif;
font-size:14px;
font-weight:normal;
padding:5px 5px 5px 5px;
border-style:solid;
border-width:1px;
overflow:hidden;
word-break:normal;
border-color:gray;
}
.temps_parcours_table .title
{
font-weight:bold;
color:black;
border-color:gray;
}
h2
{
position: fixed;
top: 100px;
left: 140px;
color:black;
}
progress[value] {
/* Reset the default appearance */
-moz-appearance: none;
appearance: none;
/* leave defaults in for other browsers */
background-size: 35px 20px, 100% 100%, 100% 100%;
color:purple;
}
progress::-webkit-progress-bar {
/* ici les styles généraux pour Webkit */
background-color: purple;
}
progress[value]::-webkit-progress-value {
background-color: purple;
}
<!DOCTYPE html>
<html>
<head>
<title>Domuob | home</title>
<meta http-equiv="refresh" content="360">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/mystyle_day.css" />
</head>
<body>
<div id="header">
<h1></h1>
<div id="section">
<h2>Horaires de train</h2>
<div id="train_station">
<img src="assets/pictures/zoo.png" alt="" style="width:850px;height:97px;">
</div>
<div id="table_train_timetable1">
<table class="train_timetable_table" style="width:840px">
<colgroup>
<col style="width: 210px">
<col style="width: 210px">
<col style="width: 210px">
<col style="width: 210px">
</colgroup>
<tr>
<th class="title" colspan="4"><img src="assets/icons/logo_s.png" alt ="" style="width:15px;height:15px;">** I would like this row in bold **</th>
</tr>
<tr>
<td class="tablerows"><b>05:36 05:51♦</b></td>
<td class="tablerows"><b>06:06 06:21♦ 06:36 06:51♦</b></td>
<td class="tablerows"><b>07:06 07:21♦ 07:36 07:51♦</b></td>
<td class="tablerows"><b>08:06 08:21♦ 08:36 08:51♦</b></td>
</tr>
<tr>
<td class="tablerows"><b>09:06 09:21♦ 09:36 09:51♦</b></td>
<td class="tablerows"><b>10:06 10:21♦ 10:36 10:51♦</b></td>
<td class="tablerows"><b>11:06 11:21♦ 11:36 11:51♦</b></td>
<td class="tablerows"><b>12:06 12:21♦ 12:36 12:51♦</b></td>
</tr>
</table>
</div>
<div id="validity">
<p align="right">Horaires valables du 11.12.2016 au 09.12.2017</p>
</div>
</div>
<div id="footer"> Duobweb version 0.0.7 </div>
</body>
</html>

Answer 1

Because you are using <b> tag everywhere in your table that's why it’s showing bold everywhere. Try to change that with <span> or something else.

Answer 2

Since you have added <b> Bold tag around the contents of Each cell, it is overriding the CSS property you set in the CSS File:
.train_timetable_table
{
border: 1px solid black;
color: black;
border-color:gray;
font-weight:normal;
}
Remove the <b> tag around each cell values.

Answer 3

because, by default b tag have font-weight: bold property.
Insert this code,if want remove affect font-weight:
.train_timetable_table .tablerows b {
font-weight: normal;
}