I want to generate an email including some table data and use PLQL to send this to company members. So far I am using some HTML templates and Oracles UTL_mail. I did send emails to a Gmail web interface and to Outlook. As the style seems okay in Gmail, I guess that it is an Outlook issue. I am a complete beginner when it comes to HTML and I am open to any suggestions and workarounds so that the table looks somewhat smooth for Outlook, too.
Below Code will not show any border for Outlook but it does for Gmail and within the W3School-Try-It editor.
utl_mail.send(sender => 'noreply#mycompany.de'
, recipients => 'me#gmail.com,me#mycompany.de'
, subject => 'Test Table'
, message =>
'<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Oracle Table</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
padding: 2em;
}
table.table {
width: 80%;
}
.table th {
text-align: left;
}
table, th, td {
border: 1px solid rgba(3,3,3,0.2);
border-collapse: collapse;
}
th.zelle {
text-align: left;
padding-right: 2rem;
}
td.zelle {
text-align: right;
padding-left: 1rem;
}
img {
width: 200px
}
#media screen and (max-width: 1200px) {
body {
font-size: 150%;
}
table {
width: 100%;
}
table.table {
width: 60%;
font-size: 100%;
}
tr {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0.5em 0;
border: 1px solid rgba(3,3,3,0.2);
border-collapse: collapse;
}
td, th {
flex: 1 1 150px;
border-collapse: collapse;
}
th.zelle {
text-align: left;
padding-right: 1rem;
}
td.zelle {
text-align: right;
padding-left: 1rem;
}
}
</style>
</head> <body> <p> This is a table</p> <br>
<table class="table">
<tr>
<th class="zelle"> Name </th> <th class="zelle"> Sal </th> <th class="zelle"> Dep </th> </tr>
<tr> <td class="zelle"> Smith </td> <td class="zelle"> 3k </td> <td class="zelle"> 12 </td> </tr>
<tr> <td class="zelle"> Miller </td> <td class="zelle"> 3k </td> <td class="zelle"> 10 </td> </tr>
<tr> <td class="zelle"> Johnsen </td> <td class="zelle"> 5k </td> <td class="zelle"> 29 </td> </tr>
</table>
<section>
<p> Best regards, <br> Peter</p>
</section>
</body>
</html>
'
, mime_type => 'text/HTML; charset= utf-8'
);
Debug the code incrementally starting from a minimal representative example and, when that is working, incrementally include extra functionality.
Start without any CSS:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Oracle Table</title>
</head>
<body>
<p> This is a table</p><br />
<table class="table">
<thead>
<tr>
<th class="zelle"> Name </th> <th class="zelle"> Sal </th> <th class="zelle"> Dep </th>
</tr>
</thead>
<tbody>
<tr>
<td class="zelle"> Smith </td> <td class="zelle"> 3k </td> <td class="zelle"> 12 </td>
</tr>
<tr>
<td class="zelle"> Miller </td> <td class="zelle"> 3k </td> <td class="zelle"> 10 </td>
</tr>
<tr>
<td class="zelle"> Johnsen </td> <td class="zelle"> 5k </td> <td class="zelle"> 29 </td>
</tr>
</tbody>
</table>
<section>
<p> Best regards, <br> Peter</p>
</section>
</body>
</html>
Note: I added / to the self-closing tags and added thead and tbody tags; these aren't required (for HTML), just my personal preference.
Test if that displays as expected.
Add in a single CSS statement:
<style>
body {
font-family: Arial, Helvetica, sans-serif;
padding: 2em;
}
</style>
and test.
Add another CSS statement and test and repeat until you find where it breaks.
Related
Trying to build some webpages that contain various tables - e.g. main table that is holding a header - main page and a footer of a page - marked 2 on the picture.
In the main section of this table I have a lot of tables that shows various data for the user - marked 1 on the picture, so I have added specific style for this tables, it looks like this:
.datatable {
border-collapse: collapse; /* hiding double lines between cells */
border: 2px solid white; /* hiding border of a table */
}
.datatable th, td
{
padding: 5px 10px;
border: 1px solid black; /* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
And these tables, classed with .datatable works fine and seems it's ok. when showing it's in browser.
But table which contains this tables (2) with data inside (1) - also have some borders over it's cells. My css doesn't contain any directives referring properties of simple tables, and such tables were showed without any borders (border="0" property of a table tag).
How to fix it? How to control the properties of table 2?
it seems the browser gets the properties of .datatable class and applied it to table or td of the upper-level table (inheritance or some)..
The codepen is here: https://codepen.io/gzbqqfbl-the-encoder/pen/QWqrBxP
Those borders belong to the first td in the first table so something like this (put at the end of the stylesheet to override anything else that might be inserted above)
table:first-child tr td:first-child { border: none;}
Here it is in a snippet:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>Dietonline Service. Результаты расчета потребности в основных пищевых веществах и энергии </title>
<link href="style.css" rel="stylesheet">
<style>
html,
body {
background-color: White;
font-family: rubik, sans-serif, san-serif;
font-size: 14 px;
}
table.datatable {
border-collapse: collapse;
/* hiding double lines between cells */
border: 2px solid white;
/* hiding border of a table */
}
.datatable th,
td {
padding: 5px 10px;
border: 1px solid black;
/* adding a border for th and td */
}
.datatable th {
background-color: #EBECEC;
font-weight: bold;
vertical-align: bottom;
}
.datatable tr:nth-child(odd) {
background-color: #EBECEC;
}
h1,
h2,
h3 {
color: #36CA36
}
a:link {
text-decoration: underline;
color: #36CA36;
}
a:visited {
text-decoration: underline;
color: #36CA36;
}
a:hover {
text-decoration: none;
color: #FB6737;
}
a:active {
text-decoration: underline;
color: #36CA36;
}
table {
border-collapse: collapse;
/* hiding double lines between cells */
border: 0px solid grey;
/* hiding border of a table */
}
table:first-child tr td:first-child {
border: none;
}
</style>
</head>
<body style="margin: 0; padding: 0;">
<!--maintable-->
<table border="0" cellpadding="0" cellspacing="0" width="99%">
<tr>
<td>
<!-- 6oo px center table -->
<table align="center" cellpadding="0" cellspacing="0" width="600" border="0" style="border">
<tr>
<td align="center" bgcolor="#ffffff" style="padding: 20px 0 10px 0;">
<img src="img/sample_logo.jpg" width="200" style="display: block;">
<h3>Питание и Здоровье</h3>
</td>
</tr>
<tr>
<!--main content td-->
<td style="padding: 10px 15px 20px 15px;">
<h2>Результаты расчета индивидуальных потребностей основных пищевых веществ и энергии</h2>
<!--provided data-->
<table width=100% class="datatable">
<tr>
<th colspan='2'>Данные, предоставленные пользователем для расчета</th< /tr>
<tr>
<td>Пол</td>
<td>женский</td>
</tr>
<tr>
<td>Возраст</td>
<td>11</td>
</tr>
<tr>
<td>Вес</td>
<td>60</td>
</tr>
<tr>
<td>Коэффициент физической активности</td>
<td>1.4</td>
</tr>
<tr>
<td>Дополнительная информация</td>
<td>kid 6 year school</td>
</tr>
</table><br /> <a href='new_query?'>Неверно указаны параметры? Проведите еще один расчет ...</a>
<!--provided data end -->
<h3>Результаты расчета</h3>
<!-- proteins & energy table -->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в белках, жирах, углеводах и энергии</th>
</tr>
<tr>
<td>Энергия, ккал</td>
<td>2400.0</td>
</tr>
<tr>
<td>Белки, г</td>
<td>80.0</td>
</tr>
<tr>
<td>Белки животного происхождения, г</td>
<td>57.0</td>
</tr>
<tr>
<td>Жиры, г</td>
<td>78.0</td>
</tr>
<tr>
<td>Углеводы, г</td>
<td>346.0</td>
</tr>
</table>
<br />
<!--proteins and energy table end-->
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в минералах</th>
</tr>
<tr>
<td>Кальций, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Фосфор, мг</td>
<td>1200.0</td>
</tr>
<tr>
<td>Магний, мг</td>
<td>300.0</td>
</tr>
<tr>
<td>Железо, мг</td>
<td>17.0</td>
</tr>
<tr>
<td>Цинк, мг</td>
<td>12.0</td>
</tr>
<tr>
<td>Йод, мкг</td>
<td>160.0</td>
</tr>
<tr>
<td>Селен, мкг</td>
<td>55.0</td>
</tr>
<tr>
<td>Медь, мг</td>
<td>1.8</td>
</tr>
<tr>
<td>Марганец, мг</td>
<td>0.0</td>
</tr>
<tr>
<td>Хром, мкг</td>
<td>0.0</td>
</tr>
<tr>
<td>Молибден, мкг</td>
<td>0.0</td>
</tr>
</table><br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Суточная потребность в витаминах</th>
</tr>
<tr>
<td>Витамин А, мкг РЕ</td>
<td>600.0</td>
</tr>
<tr>
<td>Биотин, мкг</td>
<td>25.0</td>
</tr>
<tr>
<td>Пантотеновая кислота, мг</td>
<td>4.0</td>
</tr>
</table>
<br />
<table width="100%" class="datatable">
<tr>
<th colspan="2">Рекомендованные нормы потребления минорных и биологически активных веществ еды с установленным физиологическим действием на организм</th>
</tr>
<tr>
<td>Каротиноиды, мг</td>
<td>15</td>
</tr>
<tr>
<td>Бета-каротин, мг</td>
<td>5</td>
</tr>
</table>
<br />
</td>
</tr>
<tr>
<td bgcolor="#EBECEC" style="padding: 20px 20px 20px 20px;">
©Dietonline Service, 2022
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Truly lost here.
Have looked at all related code snippets and can't make any work for me.
I need to conditionally format a table cells background color based on content.
Red for <0
Green for >0
White for 0
Also I need to be able to conditionally change the font color of other cells based on content.
Red for <0
Green for >0
Black for 0
I now have this for the background coloring so far, but it does not work as it should. (WORKS NOW)
Have made it work for background finally!!
Just need the font color to work in the last three columns of my table.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta charset="utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>colored rating scale</title>
<script
type="text/javascript"
src="http://code.jquery.com/jquery-1.5.js"
></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style id="compiled-css" type="text/css">
table {
width: 60em;
}
#name {
width: 20%;
}
#symbol {
width: 5%;
}
#thisrank {
width: 10%;
}
#lastrank {
width: 10%;
}
#change {
width: 10%;
}
#marketcap {
width: 15%;
}
#price {
width: 15%;
}
#weekpc {
width: 5%;
}
#monthpc {
width: 5%;
}
#yearpc {
width: 5%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
/*color:#9f0;*/
}
.nochange {
background-color: #fff;
}
.down {
background-color: #f30;
}
</style>
</head>
<body>
<p><br>
<b>This table is broke, (NOW WORKS FOR BACKGROUND COLOR) BUT...<br>
1. <u>font color</u> of "weekpc" , "monthpc" and "yearpc" should be red/green/no-color
according to whether the contents are negative/positive/no-change in percentages.<br>
2. All fonts should be Arial.</b>
<table align="center">
<col id="name" />
<col id="symbol" />
<col id="thisrank" />
<col id="lastrank" />
<col id="change" />
<col id="marketcap" />
<col id="price" />
<col id="weekpc" />
<col id="monthpc" />
<col id="yearpc" />
<thead>
<tr>
<th>Name</th>
<th>Symbol</th>
<th colspan="3">Rank</th>
<th>Market Cap.</th>
<th>Price</th>
<th>Week %</th>
<th>Month %</th>
<th>Year %</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"> </td>
<td align="left"> </td>
<td align="center"><b> This Week </b></td>
<td align="center"><b> Last Week </b></td>
<td align="center"><b> Change </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
<td align="right"><b> </b></td>
</tr>
<tr>
<td align="left"> ABC Corp. </td>
<td align="left"> ABC </td>
<td align="center"> 1 </td>
<td align="center"> 1 </td>
<td align="center"><b> 0 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 0% </td>
<td align="right"> 0.01% </td>
<td align="right"> 0.02% </td>
</tr>
<tr>
<td align="left"> DEF Corp. </td>
<td align="left"> DEF </td>
<td align="center"> 2 </td>
<td align="center"> 3 </td>
<td align="center"><b> -1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> -10% </td>
<td align="right"> -15% </td>
<td align="right"> -25% </td>
</tr>
<tr>
<td align="left"> GHI Corp. </td>
<td align="left"> GHI </td>
<td align="center"> 3 </td>
<td align="center"> 2 </td>
<td align="center"><b> 1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 10% </td>
<td align="right"> 15% </td>
<td align="right"> 25% </td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(function() {
$('tbody > tr').each(function(index) {
//get td text
var change = parseInt($(this).find("td:eq(4)").text().trim());
console.log(change)
//depending on condtion add class..
if (change < 0) {
$(this).find("td:eq(4)").addClass('down')
} else if (change > 0) {
$(this).find("td:eq(4)").addClass('up')
} else {
$(this).find("td:eq(4)").addClass('nochange')
}
});
});
</script>
</body>
</html>
You can simply get value of second td tag using :eq(1) and then depending on the value add class.
Demo Code :
$(function() {
$('tbody > tr').each(function(index) {
//get td text
var score = parseInt($(this).find("td:eq(4)").text().trim());
//depending on condtion add class..
if (score < 0) {
$(this).find("td:eq(4)").addClass('down')
$(this).find("td:gt(6)").css({
"color": "red",
"font-family": "Arial"
})
} else if (score > 0) {
$(this).find("td:eq(4)").addClass('up')
$(this).find("td:gt(6)").css({
"color": "#9f0",
"font-family": "Arial"
})
} else {
$(this).find("td:eq(4)").addClass('nochange')
}
});
});
table {
width: 20em;
}
#score {
width: 50%;
}
#name {
width: 50%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
/*color:#9f0;*/
}
.nochange {
background-color: #fff;
}
.down {
background-color: #f30;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table align="center">
<col id="name" />
<col id="symbol" />
<col id="thisrank" />
<col id="lastrank" />
<col id="change" />
<col id="marketcap" />
<col id="price" />
<col id="weekpc" />
<col id="monthpc" />
<col id="yearpc" />
<thead>
<tr>
<th>Name</th>
<th>Symbol</th>
<th colspan="3">Rank</th>
<th>Market Cap.</th>
<th>Price</th>
<th>Week %</th>
<th>Month %</th>
<th>Year %</th>
</tr>
</thead>
<tbody>
<tr>
<td align="left"> </td>
<td align="left"> </td>
<td align="center"><b> This Week </b></td>
<td valign="center"><b> Last Week </b></td>
<td valign="center"><b> Change </b></td>
<td><b> </b></td>
<td><b> </b></td>
<td><b> </b></td>
<td><b> </b></td>
<td><b> </b></td>
</tr>
<tr>
<td align="left"> ABC Corp. </td>
<td align="left"> ABC </td>
<td align="center"> 1 </td>
<td align="center"> 1 </td>
<td align="center"><b> 0 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 0% </td>
<td align="right"> 0.01% </td>
<td> 0.02% </td>
</tr>
<tr>
<td align="left"> DEF Corp. </td>
<td align="left"> DEF </td>
<td align="center"> 2 </td>
<td align="center"> 3 </td>
<td align="center"><b> -1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> -10% </td>
<td align="right"> -15% </td>
<td align="right"> -25% </td>
</tr>
<tr>
<td align="left"> GHI Corp. </td>
<td align="left"> GHI </td>
<td align="center"> 3 </td>
<td align="center"> 2 </td>
<td align="center"><b> 1 </b></td>
<td align="right"> $686,270,744 </td>
<td align="right"> $770.58 </td>
<td align="right"> 10% </td>
<td align="right"> 15% </td>
<td align="right"> 25% </td>
</tr>
</tbody>
</table>
One option would be to update your if statement to include the other options, similar to the answer Swati provided:
var result = function() {
if (score <= -1) {
return 'down';
} else if (score >= 1) {
return 'up';
}
return 'nochange';
}
$(function() {
$('tr > td:odd').each(function(index) {
var scale = [
['down', -1],
['nochange', 0],
['up', 1]
];
var score = $(this).text();
var result = function() {
if (score <= -1) {
return 'down';
} else if (score >= 1) {
return 'up';
}
return 'nochange';
}
$(this).addClass(result);
});
});
table {
width: 20em;
}
#score {
width: 50%;
}
#name {
width: 50%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
color: darkgreen;
}
.nochange {
background-color: #fff;
color: black;
}
.down {
background-color: #f30;
color: darkred;
}
/* EOS */
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>colored rating scale</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
<table>
<col id="name" />
<col id="score" />
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr Down</td>
<td>-10</td>
</tr>
<tr>
<td>No Change</td>
<td>0</td>
</tr>
<tr>
<td>Mr Up</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
Another option would be to use a ternary operator to compare the scores, if you don't mind hard-coding the index values (you won't have more than those three options on the scale, for example):
var result = (score <= scale[0][1]) ? scale[0][0] : (score >= scale[2][1]) ? scale[2][0] : scale[1][0];
$(function() {
$('tr > td:odd').each(function(index) {
var scale = [
['down', -1],
['nochange', 0],
['up', 1]
];
var score = $(this).text();
var result = (score <= scale[0][1]) ? scale[0][0] : (score >= scale[2][1]) ? scale[2][0] : scale[1][0];
$(this).addClass(result);
});
});
table {
width: 20em;
}
#score {
width: 50%;
}
#name {
width: 50%;
}
th {
border-bottom: 2px solid #000;
padding: 0.5em 0 0.1em 0;
font-size: 1.2em;
}
td {
border-bottom: 2px solid #ccc;
padding: 0.5em 0 0.1em 0;
}
th:nth-child(even),
td:nth-child(even) {
text-align: center;
}
.up {
background-color: #9f0;
color: darkgreen;
}
.nochange {
background-color: #fff;
color: black;
}
.down {
background-color: #f30;
color: darkred;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>colored rating scale</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.js"></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
</head>
<body>
<table>
<col id="name" />
<col id="score" />
<thead>
<tr>
<th>Name</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mr Down</td>
<td>-10</td>
</tr>
<tr>
<td>No Change</td>
<td>0</td>
</tr>
<tr>
<td>Mr Up</td>
<td>10</td>
</tr>
</tbody>
</table>
</body>
</html>
To conditionally change the font color, you could just update the CSS classes .up, .down, and .nochange to include them as I've done in the snippets (unless you mean to change the font color of other cells besides the scores).
I alredy set a :hover effect on the rows of the table using CSS.
The only problem is the hover effect doesn't work, if a table cell has a specific background color, e.g. green. In the sample code this means the 3rd column doesn't change the background color from green (resp. red) to #96c7ef as soon as you move the mouse over it. (It's ok, that the first row also doesn't change the background color. This is intentionally skipped using <thead>.) On the other cells, that don't have any background color, the hover works.
page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" href="./basic.css" type="text/css">
</head>
<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
</body>
</html>
basic.css
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover {
background-color:#96c7ef!important;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
The hover effect also has the same behaviour, if the style declaration of the two cell (tdX, tdY) is specified as inline style. I specified !important, but nothing changes.
What is wrong with my code ?
If you say just tr hover then you can just change tr background, but td has background and over the tr. So you should say hovered tr's td. So just add
.multidata tbody>tr:hover td {
background-color:#96c7ef!important;
}
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover td {
background-color:#96c7ef!important;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
Better style the TDs of the hovered TR using
.multidata tbody>tr:hover td{
background-color:#96c7ef
}
If you mean that the background color of the rows on hover should also be applied to those cells which do already have a background color (i.e. override this), you can extend the selector for the hover rule to also apply to the cells:
.multidata tbody>tr:hover,
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
Actually it's even sufficient to simply use the second line (i.e. the one including the cells) in the selector, since this will apply to all cells of that row:
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
Here in your full code:
.multidata td,
.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tbody>tr:hover td {
background-color: #96c7ef!important;
}
.tdX {
background-color: red;
font-weight: bold;
}
.tdY {
background-color: green;
font-weight: bold;
}
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
you have forgotten to put <tr> inside <tbody>
something like this
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr>
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr>
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</tbody>
</table>
.multidata td,.multidata th {
border: 2px solid #808080;
padding: 5px 5px;
}
.multidata tr:hover td {
background-color:#96c7ef;
}
.tdX {
background-color:red;
font-weight:bold;
}
.tdY {
background-color:green;
font-weight:bold;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" href="./basic.css" type="text/css">
</head>
<body>
<table class="multidata" style="table-layout: fixed; width: 100%" cellspacing="0" border="0">
<thead>
<tr class="change_on_hover">
<th style="width: 10%">ID</th>
<th style="width: 10%">Name</th>
<th style="width: 10%">Status</th>
</tr>
</thead>
<tr class="change_on_hover">
<td class="td1" style="color:grey"><i>1</i></td>
<td class="td1" style="color:grey"><i>First</i></td>
<td class="tdX" align="center"><b>Disabled</b></td>
</tr>
<tr class="change_on_hover">
<td class="td2" style="color:grey"><i>2</i></td>
<td class="td2" style="color:grey"><i>Second</i></td>
<td class="tdY" align="center"><b>Active</b></td>
</tr>
</table>
</body>
</html>
I have been reading the book of head first html and CSS 2nd and I found on Page627 there are unexpected vertical showed in a table. Could anyone tell me what is the problem.
Here is the html and CSS code:
#font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"), url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
h1,
h2 {
color: #cc6600;
border-bottom: thin dotted #888888;
}
h1 {
font-family: "Emblema One", sans-serif;
font-size: 220%;
}
h2 {
font-size: 130%;
font-weight: normal;
}
blockquote {
font-style: italic;
}
table {
margin-left: 20px;
margin-right: 20px;
border: thin solid black;
caption-side: bottom;
border-collapse: collapse;
}
table table th {
background-color: white;
}
td,
th {
border: thin dotted gray;
padding: 5px;
}
th {
background-color: #cc6600;
}
.cellcolor {
background-color: #fcba7a;
}
caption {
font-style: italic;
padding-top: 8px;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
li {
/* list-style-image: url(images/backpack.gif); */
padding-top: 5px;
margin-left: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Trip Around the USA on a Segway</title>
<link type="text/css" rel="stylesheet" href="journal.css">
</head>
<body>
<h1>Segway'n USA</h1>
<p>
Documenting my trip around the US on my very own Segway!
</p>
<h2>August 20, 2012</h2>
<p><img src="images/segway2.jpg" alt="Me any my Segway in New Mexico"></p>
<p>
Well I made it 1200 miles already, and I passed through some interesting places on the way:
</p>
<table>
<caption>
The cities I visited on my Segway'n USA travels
</caption>
<tr>
<th>City</th>
<th>Date</th>
<th>Temperature</th>
<th>Altitude</th>
<th>Population</th>
<th>Diner Rating</th>
</tr>
<tr>
<td>Walla Walla, WA</td>
<td class="center">June 15th</td>
<td class="center">75</td>
<td class="right">1,204 ft</td>
<td class="right">29,686</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Magic City, ID</td>
<td class="center">June 25th</td>
<td class="center">74</td>
<td class="right">5,312 ft</td>
<td class="right">50</td>
<td class="center">3/5</td>
</tr>
<tr>
<td>Bountiful, UT</td>
<td class="center">July 10th</td>
<td class="center">91</td>
<td class="right">4,226 ft</td>
<td class="right">41,173</td>
<td class="center">4/5</td>
</tr>
<tr class="cellcolor">
<td>Last Chance, CO</td>
<td class="center">July 23rd</td>
<td class="center">102</td>
<td class="right">4,780 ft</td>
<td class="right">265</td>
<td class="center">3/5</td>
</tr>
<tr>
<td rowspan="2">Truth or Consequences, NM</td>
<td class="center">August 9th</td>
<td class="center">93</td>
<td rowspan="2" class="right">4,242 ft</td>
<td rowspan="2" class="right">7,289</td>
<td class="center">5/5</td>
</tr>
<tr>
<td class="center">August 27th</td>
<td class="center">98</td>
<td class="center">
<table>
<tr>
<th>Tess</th>
<td>5/5</td>
</tr>
<tr>
<th>Tony</th>
<td>4/5</td>
</tr>
</table>
</td>
</tr>
<tr class="cellcolor">
<td>Why, AZ</td>
<td class="center">August 18th</td>
<td class="center">104</td>
<td class="right">860 ft</td>
<td class="right">480</td>
<td class="center">3/5</td>
</tr>
</table>
<h2>July 14, 2012</h2>
<p>
I saw some Burma Shave style signs on the side of the road today:
</p>
<blockquote>
<p>
Passing cars, <br> When you can't see, <br> May get you, <br> A glimpse, <br> Of eternity. <br>
</p>
</blockquote>
<p>
I definitely won't be passing any cars.
</p>
<h2>June 2, 2012</h2>
<p><img src="images/segway1.jpg" alt="The first day of the trip"></p>
<p>
My first day of the trip! I can't believe I finally got everything packed and ready to go. Because I'm on a Segway, I wasn't able to bring a whole lot with me:
</p>
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>and a protein bar</li>
</ul>
<p>
Just the essentials. As Lao Tzu would have said, <q>A journey of a
thousand miles begins with one Segway.</q>
</p>
<!--
<p>
To do list:
</p>
<ul>
<li>Charge Segway</li>
<li>Pack for trip
<ul>
<li>cellphone</li>
<li>iPod</li>
<li>digital camera</li>
<li>a protein bar</li>
</ul>
</li>
</ul>
-->
</body>
</html>
I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity
One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific
In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.