Many attributes that were used to give styles to elements have long been declared deprecated, in favour of CSS
properties. So you shouldn't use them any more.
Now in many cases, these attributes are still usable; they still do what they were originally doing.
However, there are several issues and incompatibilities in using them, so giving them up and using CSS instead is
always a good idea. It's a matter of practicality, not just blindly following the rules.
If you use the obsolete align attribute, the results are not always the same in all browsers.
Given this HTML:
<div ALIGN=RIGHT>
A right aligned div
<table style="border:1px solid">
<tr><td>with a table</td></tr>
<tr><td>in it</td></tr>
</table>
</div>
Older versions of IE (v10 and below) and Opera (v12.18 and below) align the table cells to the right. All other browsers align the cells to the left, including IE11 in IE10 mode.
| with a table |
| in it |
And align is supposed to work in input elements to align the contents left, right or
center.
<input ALIGN=RIGHT value="contents">
but only Opera supports that. With styles, all browsers support it.
Then there's align in the caption element, where the official recommendation was too
vague, with the result that the browsers vary wildly in their implementations.
<table style="border:1px solid"> <caption ALIGN=RIGHT> caption </caption> <tr><td>of this table</td></tr> </table>
Older versions of Opera (up to 12) simply align the text of the caption to the right. Firefox puts the caption to
the right of the table, as a last column. Chrome ignores the value (it only supports top and
bottom). IE can't decide: some versions act like Firefox, others like Opera; the latest version acts
like Chrome.
| of this table |
And finally, using align in elements where they were never defined by any standard;
for instance the address element.
<address align="center">this is aligned</address>
Chrome and Safari center the content; most other browsers don't.
The bgcolor attribute is used to change the background of either the body or
table cells. It should not be used on other elements, such as col.
Given this HTML:
<table> <col><col BGCOLOR=#FF7700> <tr><th>first</th><th>second</th></tr> <tr><td>one</td><td>two</td></tr> </table>
The cells in the second column will have an orange background in most browsers, but not in Firefox.
| first | second |
|---|---|
| one | two |
Ditto with background.
The border attribute indicates whether to draw a border around an element. It is officially defined
(in HTML 4 Transitional) only on img, object and table.
Given this HTML:
<object border="6" data="pic.gif">object</object>
Most browsers do draw a 6 pixel browser, except Konqueror, which draws none.
The frameborder attribute indicates whether to draw a border around an iframe or not.
Use frameborder="1" to draw a border, or frameborder="0" to not draw one.
"1" is the default.
It is not a boolean attribute. You cannot write frameborder or frameborder="frameborder"
and expect a border to be drawn.
And it's not a numerical attribute like border on many other elements. You can't write
frameborder="3" for a 3 pixel border.
Given this HTML:
<iframe src="iframe.html" frameborder>?</iframe> <iframe src="iframe.html" frameborder="frameborder">?</iframe> <iframe src="iframe.html" frameborder="3">?</iframe>
IE only draws a border around the first one, Opera doesn't draw any, Firefox draws all three and Chrome et al draws only the last one.
Although in general it's better to use CSS instead of this attribute, there is an exception: IE v9 and below
always draw the border if you don't specify this attribute, even if you have border:none for your CSS.
And if you do have a CSS border, IE draws both its own and the CSS one. So, just put
frameborder="0" in and then draw your border in CSS.
Note that you can find frameBorder written with a capital B in many places on the web, with remarks
that the uppercase B is very important and some browsers won't work without it. But while the JavaScript property
is indeed frameBorder, the HTML attribute has actually always been case insensitive. And in XHTML it
should be all lowercase frameborder.
Also note that some browsers accept the values yes or no for this attribute, but that is
not standard and not cross-browser compatible.
These have been deprecated in favour of margins. And the advantage of margins is that they always work; hspace and vspace have issues.
Given this HTML:
before <table hspace="20" vspace="20"> <tr><td>A table with hspace and vspace</td></tr> </table> after
Chrome and Safari show the margins. Opera and IE don't. Firefox shows them only in quirks mode.
| A table with hspace and vspace |
Replace them with CSS properties and the differences vanish.
Not only is the white-space CSS property much more versatile, and applicable to more elements,
its behaviour is also more standardised in edge cases.
<table border="1">
<tr>
<td nowrap width="175">
Cells with nowrap and width can't honour both.
</td>
</tr>
</table>
Chrome, Konqueror and Safari give width precedence and make the td wrap. Firefox, IE and Opera give
nowrap precedence and ignore the width, at least in standards mode; in quirks mode they all behave like
Chrome.
| Cells with nowrap and width can't honour both. |
If you replace this with the white-space CSS property, all browsers give it precedence over the width,
and there are no more differences.
rules and frame create borders in and around tables. They interfere with
border though.
<table rules="cols" border="1"> <tr><td>one</td><td>two</td></tr> <tr><td>three</td><td>four</td></tr> </table>
Most browsers honour the rules attribute and draw only a rule between the columns. Opera however,
lets the border attribute take precedence and also draws a rule between rows.
| one | two |
| three | four |
With the replacement CSS properties, there are no such differences.
The size attribute indicates the height of the hr in pixels.
Given this HTML:
<hr size="3">
Chrome makes the rule 3 pixels high, IE and Edge 5 pixels. Firefox did 3 pixels until a few years ago, but has changed to 5 since v56.
Replace this with a CSS property and it will look the same everywhere. height:3px will make the rule
5 pixels high, unless you also set box-sizing to border-box, then it will be 3 pixels.
width can be specified in pixels or percentages. But the official W3C specs never mentioned if the
percentages could be fractional. So...
<table border="1" width="50%"> <tr><td> </table> <table border="1" width="50.4%"><tr><td> </table> <table border="1" width="50.8%"><tr><td> </table> <table border="1" width="51.2%"><tr><td> </table>
Older Firefox, Opera (v12 and below) and Konqueror round the numbers down, using 50% for the top three and 51% for the bottom one. Chrome, newer Firefoxes (since v68) and IE use the fractions and give the tables all different widths.
Again, if you use the CSS properties, there are no such differences.