Welcome to WebmasterWorld Guest from 54.205.119.93

Forum Moderators: not2easy

Message Too Old, No Replies

More html to css woes, questions

   
10:15 pm on Jul 13, 2010 (gmt 0)



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
11:07 pm on Jul 13, 2010 (gmt 0)



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]

11:11 pm on Jul 13, 2010 (gmt 0)



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
11:13 pm on Jul 13, 2010 (gmt 0)



LOL. You were answering while I was still updating. See CSS example.
11:13 pm on Jul 13, 2010 (gmt 0)



You beat me to it! Will check out the resources - thanks again!
11:26 pm on Jul 13, 2010 (gmt 0)



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!
11:36 pm on Jul 13, 2010 (gmt 0)



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
6:44 pm on Jul 19, 2010 (gmt 0)



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.
9:39 pm on Jul 19, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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. :-)
10:16 pm on Jul 19, 2010 (gmt 0)



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.
2:05 am on Jul 20, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



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. :-)
2:46 am on Jul 20, 2010 (gmt 0)



@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.
5:06 pm on Jul 20, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



border-collapse


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