CSS for Deprecated HTML Attributes: Part 3
TweetIn this series of articles I have described how to remove the deprecated attributes in HTML and replicate the styles using CSS. The first part looked at hspace and vspace, type and border. Part two described how to replicate link, alink and vlink, size, noshade and clear. In this final part I will be mopping up width, height, bgcolor and align.
width and height
The width attribute was deprecated for use on <th>, <td> and <hr />, and the height attribute on <th> and <td>. I hope it’s obvious that they set the width and height of the element on which they are specified, quoted in pixels or percentage.
<td width="50%" height="20px">Umbrella stand</td>Deprecated example of “width” and “height” in a table data element
In the old days of table-based layouts, width and height would be littered around a page’s code hugely increasing the byte size of the file. Removing them gives you a huge saving in bandwidth and simplifies the code for easier maintenance. In CSS you’d replace these attributes in the following way:
td {
width: 50%;
height: 20px;
}bgcolor
Bgcolor was an attribute used to set the background colour of the <table> elements and the <body> element. It would be used to set the background colour of the whole page, you can use a named value or hex if necessary:
<body bgcolor="purple">Or to set individual rows or cells of tables:
<table>
<tr bgcolor="pink">
<td>The pink row</td>
<td>Still the pink row</td>
</tr>
<tr>
<td bgcolor="green">The green cell</td>
<td>No colour</td>
</tr>
</table>
In CSS the property is “background-color” (to colour individual rows/cells you would need to add a class or id to those rows):
body { background-color: purple; }
tr.odd { background-color: pink; }
td.highlight { background-color: green; }Moving this to CSS gives you so much more control over the way pages and tables look. There are a whole host of background related CSS properties such as “background-image”, “background-position”, “background-attachment” and “background-repeat”; these can be grouped together using the background shorthand:
background: color | image | repeat | attachment | position ;So if you had a flower image that you wanted to appear at the bottom right of all pages on your site you’d use the “background” declaration to set this up in one line;
body { background: white url(imgs/flower.jpg) no-repeat right bottom; }align
The align attribute was used to specify the horizontal alignment of an element with the surrounding content. Now it should not be used on any element but you still see it used mainly on the <img />, <hx> and <p> elements:
<h1 align="center">Centred heading</h1>
<p align="justified">Bit of text that should be justified.</p>Deprecated example of “align” in the h1 and p elements
The equivalent CSS property is text-align and has the same values as the align attribute; left, right, center and justified.
h1 { text-align: center; }
p { text-align: justified; }The thing to remember with this property is that it can align any element and not just text, as it seems to imply.
For reference; CSS2 introduced another value for text-align, which is “<string>” and for use in tables only. It aligns the text to whatever string value you enter, for example td { text-align: "."; } could be used to align a column of numerical data on the decimal point. It was withdrawn from CSS2.1 due to lack of implentation among the browsers.
End
The main thing to remember is that it is always better to remove all presentational attributes from your (X)HTML code and use CSS to do the same job. There’s a CSS declaration for any HTML attribute, so remove them all for best results.
Additional Resources
W3 Schools: this is the site I started learning from
HTML Dog: excellent resource, written by a pro
CSS Zen Garden/: the original CSS playground, great for inspiration and pushing the limits of what CSS can do for you
Thanks, I have been using lots of css but the deprecated HTML attributes have not been rare feature in most of my coding. Basically CSS for layout all the way from now on. Thanks again
Nice article, thanks!
Better add some more table related properties，like cellspacing and cellpadding. :)
[…] CSS Presentation: 3 […]
The width and height attributes are pretty much straightforward, but one thing that was sometimes used as a value for them was an asterisk (“*”). Based on what I have found, css does not let you use an asterisk as the value, so how do we convert this to css?
I think that the asterisk is basically ‘width:auto;’ or ‘width: 100%;’ in CSS, but I’m not sure which. Probably the latter…
paul: I’m not so sure about setting the width as 100% for the asterisk replacement – when you use that in the HTML it forces that column to take up as much space as it can, squeezing the other columns to their smallest.
I haven’t been able to find a real solution, but I’d probably use ‘width:auto’. If the other columns have a set width, the remaining one(s) will take up the rest of the space automatically.
I’ve also had trouble, but in another area related to td width. If I’ve got a five-column table, and I want all of the columns to be consistently sized, it seems they should have a width of 20%. When I set width to 20% using HTML attributes, the whole table gets an automatic width that fits everything in fairly tightly. But if I use “width: 20%;” as a CSS attribute instead, the table ends up being 100% of the page width. If anyone comes up with a good way of doing that, I’d be interested.
The asterisk can be replaced by width:100%; and height:100%; I’ve just tested it, it works with Safari 2 and 3, Firefox 1 and 2, and IE 6, 7 and 8