"border=" versus "border:" and "align=center" versus "<center>"

[bellavan]

Hello,I'm used to using markups like "align="center"" and "border="1"" as part of a <table> tag, instead of using a surrounding "<center>" tag or styles like "border-left: solid thin", respectively. I have two questions:1. The validator keeps claiming that "align="center"" is depreciated and that I should use CSS instead. However, I'm not sure what CSS property to set to get the same effect. Surrounding the object with <center> tags works, but that's not CSS. I see there is a property called "text-align", but that only effects text alignment within the object and not the alignment of the object itself. Am I just missing something here? Or are the surrounding "<center>" tags the way to go?2. I have a table that I want a border around. I usually put "border="1"" inside the <table> tag and get a nice little border that looks like it pops up out of the page a little. I like that border and would like to replicate it using CSS, but I cannot figure out the combination of properties and settings to get it to look the same. Is there a universal 'default' border look that you get by setting <table border="1">? And if so, does anyone happen to know what the equivalent CSS is?Thanks,Angela

[justsomeguy]

To center an element, you can use automatic margins:<table style="margin: 0 auto;">As far as the border issue goes, you can't do the exact same thing elegantly. When you use border="1" on a table, it puts a border around the entire table and around each cell in the table. When you use a CSS border on the table, it only puts the border around the table itself, not in the interior. You would have to add an extra border to the td elements, and then when you do that you get a double border on the edges, where you have both the table border and the td border. So you have to use some combination of border-left and border-right and set different classes on different tds to get it to look like the border="1" effect.To make the border look visually the same, you can experiment around with this:border: 3px outset #808080;

[Xtazy]

But is there any problem if I use <center> and </center> tags to center a picture or some text? It worked fine for me till now...

[Jack McKalling]

The validator complains about the <center> tag exactly like as it would for the align attribute. They are both presentation html, which are all deprecated. The center element will work in most browsers for backwards compatibility, and even if you use Strict DTD they will work, though you should be wanting to make your documents valid against the DTD. Browsers don't complain like validators, but that is their nature.Look here for my list* with all deprecated elements and attributes in a nice arrangement, with their replacements in CSS and examples.Prof-Creations - DeprecatedThis page is exclusively in English, the website itself is Dutch for now.*) I made it, though the list is based off someone else's idea.

[bellavan]

To center an element, you can use automatic margins:<table style="margin: 0 auto;">

Thank you! This works great!

As far as the border issue goes, you can't do the exact same thing elegantly.

Thanks for the starting suggestion. Here's the final CSS that looks pretty darn close:

table.border1 {	 background-color: [i]<yourcolor>[/i];	 border-left: 2px solid [i]<yourcolor+0x30>[/i];	 border-top: 2px solid [i]<yourcolor+0x30>[/i];	 border-right: 1px solid #686868;	 border-bottom: 1px solid #686868;	 border-collapse: separate;	 margin: 0 auto;}table.border1 td {	 border-left: 1px solid #686868;	 border-top: 1px solid #686868;	 border-left: 2px solid [i]<yourcolor+0x30>[/i]	 border-bottom: 2px solid [i]<yourcolor+0x30>[/i]}

Hope this helps anyone else,Angela

[METOOTECH]

CSS has it's place in coding, but to border a 5 column 100 row table to look like a html table using CSS would involve a few pages of code, when a simple border=1 would do it, is pure code bloat. I think Microsoft's DHTML is a better way to go or use HTML, CSS, Javascript, with some php or asp server code will produce a simpler, quicker loading, less problems page. Using these codes together, with which ever code that works best and takes the least code will stop the code bloat that's going on these days in websites. Also, sometimes using inline javascript instead of head area or body area scripts will get the job done simpler and avoid code bloat, especially if the script is only used a time or two in the document. An example is the javascript toggle script that hides and then shows a block of text, a table or images. This inline javascript can be used to hide and show a block of text or what ever and is a lot simpler and less problematic than a regular script...<a style="cursor: hand; cursor: pointer" onClick="if (des1.style.display=='none') {des1.style.display='inline'}else if (des1.style.display=='inline') {des1.style.display='none'}"> Show/Hide Depreciated Elements</a><br><div id="des1" style="display: none"><b>Some text in a table here that is hidden.</b></div>The average person viewing a webpage or website could care less how it is coded as long as it loads fast and works flawlessly. In my opinion, using the best of all worlds to code a site is the way to go. You may see it differently.Thanks, Metootech

[Jack McKalling]

Speed must not be your only priority!Your code must also be well organised, the way you describe is hard to develop. Common code is all over the place, while one tiny toggle function in the header is much quicker to update. You can't convince me that this code slows your page loading!

<head>....<script type=\"text/javascript\"><!--function Toggle (objname){ obj =  document.getElementById(objname);  obj.style.display = (obj.style.display == "") ?"none" :"";  return false;}//--></script></head>...<a href="#" onclick='return Toggle("idname")'>Hide/show</a><div id="idname">something to be hidden or shown</div>

And if the script in your header still slows your page, then it must just be too much you put there

[METOOTECH]

Speed is not necessarily my priority, but it is a priority with the average non-programer viewing websites. Slow loading and pages that are jumping around while loading turn off the average website viewer. I like to keep the head area as clean as possible. Many times scripts in the head area can affect or conflict with code in the body area. True, your small head area script loads fast. I went to the link you provided above to view your page on depreciated elements. It loaded fast alright, but I noticed that when you click on the "Elements or Attributes" to view the drop down table of depreciated tags, the table dropped down behind your banner. So I had to click on the "hide" to get rid of the banner. I also noticed that the far right scroll bar disapeared about half the time when you click on either Elements or Attributes leaving some of the far left text missing. You have to hide the drop down to see the far right scroll bar again and the missing text on the far left. Clicking on the drop downs multiple times produces the disapearing scroll bar and text about half the time. This kind of stuff turns off the average website viewer. This is a place where some inline code would be better and probably not cause the disapearing scroll bar. I'm using IE to view this. Thanks, Metootech

[Jack McKalling]

I actually don't understand what you mean I also use IE, and with me, there is no scrollbar that is missing or whatever, it works good. Though, this topic is not quite about that page lol.What you really mean, is that you desire the head section as clean as possible, and I cannot aggree more with that I only mean, the situation in which that section would be too full, is when too much of stuff is put in there or when it is untidy.Mostly of the time, those scripts can be written more compactly, meaning, it can still remain in the section. There is always a sollution to get it faster, not to move it out of the head. When moving ALL of the scripts in the head, or at least turning some into inline script, you deny the fact that having code at a central place is better managable

[justsomeguy]

I think Microsoft's DHTML is a better way to go

What do you mean by "Microsoft's DHTML"? "DHTML" is just a term for a certain way of using HTML and Javascript to produce dynamic effects, and I'm not sure what Microsoft has to do with it.

[METOOTECH]

Yeah, it was Microsoft's main web developer Scott Isaacs who is one of the main inventors of DHTML... DHTML also includes CSS.... see here for info on this...DHTML inventor

[justsomeguy]

I wouldn't really say that there's a single "inventor" of a concept as abstract as dynamic HTML. A Javascript image mouseover is dynamic HTML. Scott might have developed a framework and helped push the idea of reusable components, but saying that he is the first guy to think about using Javascript to change HTML is a little silly.

[METOOTECH]

Yeah, you are right... he didn't invent html, javascript and css, he just help develope using all of them together to create dynamic websites and pages that worked right and for IE browsers....

[holmedwa04]

So DHTML isn't actually a language? It is just a combination of HTML, Javascript and CSS?If so I never knew that!

[justsomeguy]

That's right. It's mostly a marketing term for people hyping their websites, not a specific technology. It's essentially a much more powerful way of using HTML and Javascript then people have been using it for in the past. DHTML components would be things like a collapsible menu, or a series of tabs and panels that you can switch through, or a photo slideshow. The main difference between the concepts of DHTML and AJAX is that AJAX communicates with an outside server, where DHTML usually just manipulates what is on the page. But yeah, all the DHTML components are just HTML and Javascript.

[ste]

CSS has it's place in coding, but to border a 5 column 100 row table to look like a html table using CSS would involve a few pages of code, when a simple border=1 would do it, is pure code bloat.

sorry but you are way off there you could just do this:<table id="main"><tr><td></td></tr> etc. #main, #main td {border: 1px solid #ccc;}how is that pages of code? in fact if you have multiple tables on a page or across your site you can apply that as a class and then you're saving load time as the css file is cached.