hi!
i'm just trying to format a table using the following css:
table.nice td
{
vertical-align: top;
text-align: justify;
border: 1px solid #aaa;
background: #ffd;
padding: 5px;
}
table.nice tr.header td
{
text-align: center;
font-weight: bold;
background: #eec;
}
which pads most table cells and allows me to add a slightly different header row (could use th but then i'd have to get rid of the font-changes, etc that th brings with it). so i'm using this something like:
<table class="nice">
<tr class="header"><td>Name</td><td>Occupation</td></tr>
<tr><td>Rigadon</td><td>Professional Numpty</td></tr>
</table>
my problem is that if one of the cells includes another table then all the cells of this 'sub-table' take on the same 'nice' style defined for the original table! adding a style to the sub-table doesn't seem to have any effect either...
this isn't the behaviour i was expecting though i suppose it does make sense - can anyone point me in the right direction please??This is what inheritance is about. Mind you, only properties that actually do inherit are effected.
I guess the only way is to specifically reset the properties for those cells that shouldn't be effected.
(on a side note: nesting tables? Are you sure?)Do the same for the nested table:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css nested tables</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
table.nice td
{
vertical-align: top;
text-align: justify;
border: 1px solid #aaa;
background: #ffd;
padding: 5px;
}
table.nice tr.header td
{
text-align: center;
font-weight: bold;
background: #eec;
}
table.xxxx td {
border: 1px solid red;
background: #9fc;
padding: 1px;
}
table.xxxx tr.header td
{
text-align: center;
font-weight: bold;
background: #ccc;
}
-->
</style>
</head>
<body>
<table class="nice">
<tr class="header"><td>Name</td><td>Occupation</td></tr>
<tr><td>Rigadon</td><td>Professional Numpty</td></tr>
<tr><td>Rigadon</td><td>
<table class="xxxx">
<tr class="header"><td>Name</td><td>Occupation</td></tr>
<tr><td>Rigadon</td><td>Professional Numpty</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Avoid using table, unless you are using tabulated data.cheers guys - you've both helped alot - no more nested tables for me!
i'm just trying to format a table using the following css:
table.nice td
{
vertical-align: top;
text-align: justify;
border: 1px solid #aaa;
background: #ffd;
padding: 5px;
}
table.nice tr.header td
{
text-align: center;
font-weight: bold;
background: #eec;
}
which pads most table cells and allows me to add a slightly different header row (could use th but then i'd have to get rid of the font-changes, etc that th brings with it). so i'm using this something like:
<table class="nice">
<tr class="header"><td>Name</td><td>Occupation</td></tr>
<tr><td>Rigadon</td><td>Professional Numpty</td></tr>
</table>
my problem is that if one of the cells includes another table then all the cells of this 'sub-table' take on the same 'nice' style defined for the original table! adding a style to the sub-table doesn't seem to have any effect either...
this isn't the behaviour i was expecting though i suppose it does make sense - can anyone point me in the right direction please??This is what inheritance is about. Mind you, only properties that actually do inherit are effected.
I guess the only way is to specifically reset the properties for those cells that shouldn't be effected.
(on a side note: nesting tables? Are you sure?)Do the same for the nested table:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>css nested tables</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
table.nice td
{
vertical-align: top;
text-align: justify;
border: 1px solid #aaa;
background: #ffd;
padding: 5px;
}
table.nice tr.header td
{
text-align: center;
font-weight: bold;
background: #eec;
}
table.xxxx td {
border: 1px solid red;
background: #9fc;
padding: 1px;
}
table.xxxx tr.header td
{
text-align: center;
font-weight: bold;
background: #ccc;
}
-->
</style>
</head>
<body>
<table class="nice">
<tr class="header"><td>Name</td><td>Occupation</td></tr>
<tr><td>Rigadon</td><td>Professional Numpty</td></tr>
<tr><td>Rigadon</td><td>
<table class="xxxx">
<tr class="header"><td>Name</td><td>Occupation</td></tr>
<tr><td>Rigadon</td><td>Professional Numpty</td></tr>
</table>
</td></tr>
</table>
</body>
</html>
Avoid using table, unless you are using tabulated data.cheers guys - you've both helped alot - no more nested tables for me!