eomer wrote :
I would like my table header to have a border on the bottom.
Then
<table frame="below" ...>
will be sufficient
What I have written works in Mozilla (1.7.12) but not IE (6).
I have included the snippet of html and the snippets of CSS. Any
suggestions would be appreciated. Thank you.
http://www1.esc.edu/personalstu/fhartnet/books.html
<tr class="lightblue">
<th>Title</th>
<th>Author</th>
<th>Synopsis</th>
</tr>
table {border-collapse: collapse;
table-layout: auto;
The initial and default value of table-layout is auto. So, you do not
need to define this property value. I must point out that defining
table-layout: auto;
is not making much sense. The best/better setting is table-layout: fixed
in a very wide majority of cases when a table displays tabular data.
width: auto;}
Same thing here. width initial and default value is auto. There is no
need to set it to auto. Again here too, if you want to have a table
which is scalable and proportional, then using a %tage is appropriate too.
tr.lightblue{
background-color: #CCFFFF;
color: black;
color is inherited and is an inheritable property. Chances are you do
not need to define this.
font-weight: bold;
font-family: sans-serif, serif;
font-size: 18px;
caption-side: top;
Caption-side is wrongly used here. caption-side should be used on the
table element or the caption element. Note again that caption-side
initial and default value is top.
padding: 5px;
border-bottom: 5px solid black;
}
I checked your markup code and noticed many incoherences:
<table class="books" summary="book recommendations" width="80%">
<caption id="recommendedreading">Book Recommendations</caption>
<colgroup width="20%"></colgroup>
<colgroup width="20%"></colgroup>
<colgroup width="40%"></colgroup>
Your markup code is being redefined by the CSS; so it's illogical,
counter-productive.
If the table width should be set by the content, then you should not set
any value for the width attribute value.
The colgroups width should total 100%, otherwise this does not make any
sense. If you have n colgroups, then the total value of each of these
colgroup's width should equal to 100%.
td.stayleft{
text-align: left;
vertical-align: middle;
}
Here, the default horizontal alignment value in all browsers for <td> is
left. What you do is unneeded and unnecessary. Same thing with
vertical-align: the initial and default value of vertical alignment of
table cell in all browsers is middle.
"left: Left-flush data/Left-justify text. This is the default value for
table data."
"middle: Cell data is centered vertically within the cell. This is the
default value."
HTML 4.01 spec, Section 11. Tables
11.3.2 Horizontal and vertical alignment
http://www.w3.org/TR/html401/struct/....html#h-11.3.2
So, here you have 14 occurences of class="stayleft" which is unneeded
and unnecessary.
Overall, your CSS file is over-constraining, over-declaring and
over-defining. There is no reason to have so many classes, CSS rules in
your
http://www1.esc.edu/personalstu/fhartnet/newstyle.css
You should be using the power of inheritance and using/relying on
default/initial value instead of redefining all the time the properties
which are already inherited.
- Writing Good and Efficient CSS:
http://developer.mozilla.org/en/docs..._Efficient_CSS
- Writing perfect style sheets:
http://www.richinstyle.com/masterclass/perfection.html (except for tip 4
where it is written: "each and every block element must have
declarations for margin, padding and line height"), I recommend this
tutorial
My own interactive demo:
Dynamic table formatting for DOM 1 browsers
http://www.gtalbot.org/DHTMLSection/...ormatting.html
Gérard
--
remove blah to email me