Forum Moderators: not2easy
i have a problem in dealing with tables using css. i'm still a newbie and trying to fix it for almost 2 days but can't find a solution.
i have 2 tables, lets call it table1 and table2.
table 2 is inside table1
in css, table 1 is working, but i can't format table2, because it's getting value from css table1 values.
appreciate if you can help me, thanks very much.
I'm trying to do something like this
[codes]
<table>
<tr>
<th bgcolor=#000000><font color=white>title 1</font></th>
<th bgcolor=#000000><font color=white>title 2</font></th>
</tr><tr>
<th bgcolor=white>spec 1</th>
<td bgcolor=white>value 1</td>
</tr><tr>
<th bgcolor="#dddddd">spec 2</th>
<td bgcolor="#dddddd">value 2</td>
</tr>
<tr>
<th bgcolor=white>spec 3</th>
<td bgcolor=white>
<table>
<tr>
<th bgcolor=#ffff00><font color=black>sub title 1</font></th>
<th bgcolor=#ffffoo><font color=black>sub title 2</font></th>
</tr><tr>
<th bgcolor=white>sub spec 1</th>
<td bgcolor=white>sub value 1</td>
</tr><tr>
<th bgcolor="#dddddd">sub spec 2</th>
<td bgcolor="#dddddd">value 2</td>
</tr>
<tr>
<th bgcolor=white>sub spec 3</th>
<td bgcolor=white>sub value 3</td>
</tr></table>
</td>
</tr>
<tr>
<th bgcolor="#dddddd">spec 4</th>
<td bgcolor="#dddddd">value 4</td>
</tr></table>[/codes]
The first is nested tables. Corollary, tables should not be used for layout, but this almost looks like it could be tabular data, so it might be OK.
The second is use of the deprecated <font> tag. Ugh.
The third is you should **always" quote attributes ("bgcolor="#000000", even though this is also deprecated.)
The short answer to your question, you access nested tables with
table td table td {}
An almost optimized solution - not FULLY optimized as it doesn't eliminate the outer table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line, no need for XHTML on an HTML page -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
table {
background:#ffffff;
color: #000000;
width: 220px;
}
td,th { white-space:nowrap; padding:3px; }
.blk-bg { background:#000000; color: #ffffff; }
.gray-bg { background:#dddddd; color: #000000; }
table p { width: 46%; float: left; padding:1px; margin: 0 2px 0 2px; }
.yellow-bg { background: #ffff00; }
.bold { font-weight:700; }
</style>
</head>
<body>
<table>
<tr>
<th class="blk-bg">title 1</th>
<th class="blk-bg">title 2</th>
</tr>
<tr>
<th>spec 1</th>
<td>value 1</td>
</tr>
<tr>
<th class="gray-bg">spec 2</th>
<td class="gray-bg">value 2</td>
</tr>
<tr>
<th>spec 3</th>
<td>
<p class="yellow-bg bold">sub title 1</p>
<p class="bold">sub title 2</p>
<p class="bold">sub spec 1</p>
<p>sub value 1</p>
<p class="gray-bg bold">sub spec 2</p>
<p class="gray-bg">value 2</p>
<p class="bold">sub spec 3</p>
<p>sub value 3</p>
</td>
</tr>
<tr>
<th class="gray-bg">spec 4</th>
<td class="gray-bg">value 4</td>
</tr>
</table>
</body>
</html>
thanks rocknbil, for your precious explanation :)
i've learnt my html like 15 years ago, and didn't really "keep in touch" with it since then. i'm just learning it for my personal usage. now, i'm trying to revamp my old html/cgi website into php and styling with css. yeah, it's like a crash course :P
as for the depreciated font tag, how will i know if any tags have been depreciated? and what do you mean by depreciated? i think browsers are still recognizing it.
I've heard a lot about not using tables for layout nowadays. back then, everyone is using tables :P so, any advice for me on what to use for layout? maybe i need to learn this, after i've successfully converted my htmls to phps with a bit of css styling.
ok, about the coding, if i'm going to put this <style> into style.css for global usage, does that mean all other tables in differente pages will use this table attribute?
if i need to define 2 or 3 table styling in style.css, how do i make sure this table will take value from table1 and that table will take value from table2. you know what i mean?
Yes they still "work," but the idea is to separate content from markup. If you had a can opener, a pocket knife, and a can of beans, which would you use to open the beans?
ok, about the coding, if i'm going to put this <style> into style.css for global usage, does that mean all other tables in differente pages will use this table attribute?
If you do this
table { background:#ffffff; }
Yes, all tables referencing this style sheet will have white backgrounds.
You manage this with a variety of selectors. Use a class for multiple instances on a single or many pages, or by ID for specific elements.
The example I gave was " a table within a table" but you can also class/id those too.
<style type="text/css">
.blk-bg { background: #000000; color: #ffffff; }
</style>
<table class="blk-bg">
<tr><td>content</td></tr>
</table>
<style type="text/css">
#bordered-table { border: 1px solid #dddddd; }
</style>
<table id="bordered-table">
<tr><td>content</td></tr>
</table>
For elements "inside" other elements, there are a number of ways to do it. You can use classes or id's, or just reference the table inside the selected element. The following two are synonymous.
<style type="text/css">
#bordered-table { border: 1px solid #dddddd; }
#bordered-table table { background:#000000; color:ffffff; }
</style>
<table id="bordered-table">
<tr><td>
<table>
<tr><td>content, white on black</td></tr>
</table>
</td></tr>
</table>
----------------------------------
<style type="text/css">
#bordered-table { border: 1px solid #dddddd; }
#inner { background:#000000; color:#ffffff; }
</style>
<table id="bordered-table">
<tr><td>
<table id="inner">
<tr><td>content, white on black</td></tr>
</table>
</td></tr>
</table>
You can even restrict "#inner" to elements id's inner that ONLY occur within bordered-table:
<style type="text/css">
#bordered-table { border: 1px solid #dddddd; }
#bordered-table #inner { background:#000000; color:ffffff; }
</style>
