Jump to content
Stef's Coding Community

converting table to css


Guest Cashster09

Recommended Posts

Guest Cashster09

Hello again,

I am converting my table to css. Actually, converting the html table with deprecated tags to css tags!

 

I placed the table in a div called contacttable

 

my question is about text-align: center;

Not only did it align my whole table centered (which i want), it aligned all my text in the table centered (which i want).

 

My question is,

I dont have to align center my td's in the table? It's enough to just text-align center the whole div to CENTER everything?

What if i wanted to only align the table centered, but the text to the left? Would i use a class tag in the td's to align it left?

 

www.webdrycleaners.com

 

thanks

Edited by Cashster09
Link to post
Share on other sites

By the way, that link has a whack of errors and warnings, most of them from using an html Doctype with xhtml coding. Example, the self-closing tags have '/' at the end which html does not require.

 

http://validator.w3.org/check?uri=http%3A%2F%2Fwww.webdrycleaners.com%2F&charset=(detect+automatically)&doctype=Inline&ss=1&group=0&user-agent=W3C_Validator%2F1.654

 

Might want to work on that. Your new pages should be using a strict doctype, and html is suggested since you do not serve any xhtml/xml code

Link to post
Share on other sites
What if i wanted to only align the table centered, but the text to the left? Would i use a class tag in the td's to align it left?

 

#contacttable is the container for the whole table so as Jlhaslip says, it affects everything. If you just want the table centered but not the text you don't use text-align: center, you should use a width and margin: auto (see note below) . At the moment you have margin: auto but no width (but you don't need a width or margin: auto if the div fits exactly inside another div which it does because #main is 510px wide and the table inside #contacttable is 510px wide):-

#contacttable {

/*text-align: center;*/

line-height: 18px;

font-family: trebuchet ms;

/*margin: auto;*/

}

 

Now all the inner divs and td tags are aligned left.

 

If you want the #contacttable div to center inside a container add margin: auto; width; ?px; to the div style; if you want the table to center inside #contacttable add style="margin: auto" to the table

because it already has a width, but none of the above is needed in your case because the #main div is the correct width for all of them.

Edited by Wickham
Link to post
Share on other sites
Guest Cashster09

thanks for the reply, but i am more confused than ever.

So is my contacttable showing up on the left alignment or centered? On IE 6 and FF 3.0 its all centered, even the text inside the table (which is what i want). I wasnt sure if my code for contacttable was correct.

 

Also, i still have some OLD code in the form table on that page and wasnt sure of the doctype i should use. But all other pages have no deprecated tags so should i use the strict doctype,

 

/p>

"http://www.w3.org/TR/html4/strict.dtd">

 

/p>

"http://www.w3.org/TR/html4/loose.dtd"> ( i have this now)

 

 

 

or use

---------------------------------------------------------------------------------------

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

 

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

thanks again....

It's a learning process for me...

Edited by Cashster09
Link to post
Share on other sites
Guest Cashster09

I changed my faqs.html page and it validated and passed!

 

but still not sure which doctype i should use...Now i have

/p>

"http://www.w3.org/TR/html4/loose.dtd">

 

but you mentioned i should use strict?

 

thanks for any help....

Link to post
Share on other sites

As you have it right now the text-align: center in the style for #contacttable centers the text inside it, but not the div itself. Previously I thought you wanted the table centered but the text left.

 

However, as I said before, the div #contacttable doesn't need centering as the table inside it is 510px wide and the containing div#main is also 510px wide, so it all fits. If it didn't fit, an element like a div needs a width and margin: auto. You have margin: auto; in #contacttable but it's not doing anything as it's not needed.

 

Inside the 510px wide table you have td tags of various widths like 160px, 165px and 175px so it looks OK and you can adjust these if you want.

 

Regarding doctypes, on this board we prefer HTML 4.01 Strict (or transitional if you are using some deprecated [old ] tags) which means that some tags only need closing with > whereas in XHTML they need closing with />

Edited by Wickham
Link to post
Share on other sites
Guest Cashster09

ok, thanks on the doctype....it did validate...(faqs.html)

 

Now i am changing the page that we are discussing..

 

end tag for element "P" which is not open and i have one error...but i noticed that i had a start

and it closed with a

...so im not sure why its still an error...cuz it's not open...

 

Line 74 starts

and line 148 ends

 

 

Also, it was giving me an error for table height?

so now i just left out the height of the table and just used width...grrr

 

Also, on my faqs.html i dont have any deprecated old tags so should i use the strict instead of the transitional? or it doesnt matter?

 

thanks again....i know i ask alot of questions.

Edited by Cashster09
Link to post
Share on other sites
Guest Cashster09

ok, now i moved it

 

start p tag on line 74 and end p tag on line 114....and still no good!

 

that's strange cuz on my faqs.html

 

I started a p on line 60 and ended it on line 114 and everything is fine and passed...

Edited by Cashster09
Link to post
Share on other sites

If you have an opening p tag on line 74 and a closing tag on line 148, the p tags in the middle need to go or be isolated like this:-

 

 

 

 

 

 

Leav the line 74 and 148 tags.

Edited by Wickham
Link to post
Share on other sites
Guest Cashster09

well because i still have the center tag i used transitional doctype. I still dont understand why my opening p tag isnt closed by my p tag that is below it...but i guess i'll have to figure that out....Right now thats the only error in validation for me on that page.

Link to post
Share on other sites

Transitional doctype lets you get away with errors - so by lowering the standards, you get by. The point we're trying to make here is to use good code - period.

 

And about the p tag - p is a tag that defines a paragraph, so putting stuff in it like divisions is just fundamentally wrong - the only thing ok inside a p tag are formatting tags - but div tags DO NOT belong inside a p tag.

 






Boca's Premier
Dry Cleaners

              7050 W Palmetto Pk Rd
Boca Raton, Fl 33433
(561) 394-9933

Click for map


              Store Hours


              M-F: 7am - 7pm

              Sat: 8am - 6pm

Boca's Premier
Dry Cleaners

              21073 Powerline Rd
Boca Raton, Fl 33433
(561) 487-7336


Click for map





Store Hours

M-F: 7am - 7pm

Sat: 8am - 6pm

Personal Touch
Dry Cleaners


              1320 Coral Ridge Dr
Crl Springs, Fl 33071
(954) 753-6890

Click for map


Store Hours

M-F: 7am - 7pm

Sat: 8am - 6pm







 

And no - table align left isn't deprecated - but tables are as a tool for layout (sort of - or they should be)

Link to post
Share on other sites
Guest Cashster09

Well, i think the only page i have deprecated tags are on the index.html page which is my contact us page for right now...The other pages i will change the doctype...

 

thanks...

 

I will also take away that p tag as i may not need it there and it wont change my look of the page....

 

Oh, one more thing....so the doctype i should use is

/p>

"http://www.w3.org/TR/html4/strict.dtd">

 

i changed my faqs.html to the strict and now i have 5 errors

it says i cant use border in img's

i cant use align in img's

 

 

i cant use hspace in img's

 

this is all giving me a headache...lol although i am changing and learning as i go....

I do have several spacer.gifs with border="0", i guess i need to put a style border="0px";?

 

Ok, fixing it little by little...

In my external styles sheet i just put

img {

border: 0px;

}

 

that saved me alot of trouble instead of going thru all my images and adding an inline style..

 

THANK YOU EVERYONE...I DID IT!

MY PAGE IS VALIDATED IN STRICT DOCTYPE and i made the changes and learned something along the way.

 

Now i just hope with all the changes it looks like it supposed to in IE 7...I checked it on IE6 and FF 3.0 and its fine...

 

 

thanks again everyone.

Edited by Cashster09
Link to post
Share on other sites
Guest Cashster09

can someone check it on IE7 for me

it should look as it does in FF 3.0

 

thanks everyone....

 

One more related question...I'm going do change the other pages one by one to the strict doctype and every now and then i need to do an inline style for hspace...There is discrepancy online for the correct coding...

 

ex

style="margin: 0px; 10px; 10px; 20px;"

 

Is this correct with the (;) and (")?

Also, is the order top, right, bottom and left?

Edited by Cashster09
Link to post
Share on other sites

hspace is yet anohter deprecated element - use margins instead.

 

But yes - the order for any of these dimensions is always top- right - bottom - left.

 

or

 

top

right/left

bottom

 

top/bottom

right/left

Link to post
Share on other sites
Guest Cashster09

right i meant to say i will use margin. I thought that was evident in my example above where i used margin...

 

...and thanks

Edited by Cashster09
Link to post
Share on other sites
Guest Cashster09

 

One more related question...I'm going do change the other pages one by one to the strict doctype and every now and then i need to do an inline style for hspace...There is discrepancy online for the correct coding...

 

I mentioned hspace but wrote the code for margin

 

ex

style="margin: 0px; 10px; 10px; 20px;"

 

 

that's ok, it happens to the best of us....

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...