More html to css woes, questions

[sjaver]

Hi,
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional

My validator keeps telling me the following:

there is no attribute "height"
<table width="75%" height="259" border="1" align="center" cellpadding="0" cells…

and
there is no attribute "bordercolor"
…rder="1" align="center" cellpadding="0" cellspacing="0" bordercolor="#F79646">

I tried changing it to CSS - but obviously have a lot to learn b/c I couldn't get the centering right or the border to show. Can someone guide me with the correct code?

How do you know which are the most important errors or warnings to fix? And why would DW code this way if it is not acceptable.
wwww.thecontemporarycouch.com

Thanks,
Sharon

[Major_Payne]

When using XHTML 1.0 document type, those attributes are not allow. To use them, you have to use CSS to style your table.

Might help to explain somethings:

Tableless Web Design: [en.wikipedia.org...]
Why tables for layout is stupid: [hotdesign.com...]
How to convert manually your HTML tables to CSS: [table2css.com...]
Images, Tables, and Mysterious Gaps: [developer.mozilla.org...]

CSS example:

* { margin: 0; padding: 0; }

table {
width: 75%;
height: 259px;
margin: 0 auto; /* centers table */
border-collapse: collapse;
border: 1px solid #f79646;
}

[edited by: Major_Payne at 11:11 pm (utc) on Jul 13, 2010]

[sjaver]

Ok - I cant seem to find the css equivalent of bordercolor - I can find left, right, top, bottom border color but what if I just want them all the same color? Similarly with centering the table.

Can you advise?

Thank you so very much!
Sharon

[Major_Payne]

LOL. You were answering while I was still updating. See CSS example.

[sjaver]

You beat me to it! Will check out the resources - thanks again!

[sjaver]

As I look at this I become incredibly daunted - I have nested tables - if I change the first, I have to change all of them!

[Major_Payne]

Using CSS, you can set up ids and classes for the tables, tds, etc. and style them as you need them to look. Does get daunting at times. :P

[brokenbynubs]

Don't be intimidated by using CSS - it's wonderful. I went from using tables many years ago to using table-less layouts with just CSS positioning. I must say, the CSS is much easier to understand if you are just looking at the code. You won't regret learning it.

[rocknbil]

equivalent of bordercolor

Not that a border on the table only applies it to the outside of a table and not all inner cells, like border=1 does, which is often a good thing, sometimes not. If you apply a border to td, the borders will double up where they join giving you 2px borders internally if you specify one.

There may be a more graceful way but the way I resolve that is to apply a border to the top and left of the table only, then apply borders to the right and bottom of all the cells only. A hack of sorts, but it works if you want borders on internal cells. :-)

[Major_Payne]

Using CSS as I gave for the table's border color (border: 1px solid #f79646;) will color/style the table borders only. To put in borders of same color/with for all cells, then use:

table td {
border: 1px solid #f79646;
}

To style individual cells, you will have to set up ids/classes for them.

[rocknbil]

Yeah, but try that. You'll get a border on all four sides of the cell, which will give you a visual 2px on the adjacent cells inside the table. :-)

[Major_Payne]

@rocknbil: No you will not get a double border. That's why I have the border-collapse: collapse; set for table tag. All cells will have a single border.

[rocknbil]

border-collapse

<facepalm> There's the "graceful" I was looking for, doh. :-P Negative side effect of getting out of touch with tables.