When should I use attributes vs CSS styles?

Question

Sometimes in xhtml we write suppose <table border="1"> and then again in the css we write table{ border:2px solid black}. I am confused when to write which. When to use attributes and when to use the css. Sometimes they get confusing.

Answer 1

Although the border attribute is not deprecated whereas the align attribute is (to give light to the status of the attribute as of the HTML4 recommendation), it is commonly recommended to not place these attributes in your markup.

I cannot find a reference to these attributes when looking at XHTML table documentation, so I would assume these are not acceptable there.

In place of the attributes in question, using CSS eliminates mixing content and styling. XHTML seems to be completely focused on content as opposed to styling, so I would have to say that although it is acceptable, it is not the best route to use the attributes in place of CSS in an external stylesheet.

One case where I could see using attributes instead of css would be in designing a html email, as most email clients strip css unless it is declared inline using the style attribute. It may be cleaner to use the individual attributes than stuffing all of the rules into the style attribute in this case.

---

UPDATE

Due to information provided in a comment from another user, I see that the XHTML Spec i was looking at is outdated. Modern XHTML does recognize and support attributes such as border. The link provided is an explanation of the differences between html and xhtml as an introduction to the subject. Good stuff. The comment I am referencing is as follows :

When you discuss the XHTML documentation, you mean the aborted XHTML 2 specification. Modern XHTML is XHTML5, which has the same attribute and content model rules as regular HTML5, just a different syntax. The authors of XHTML 2 set out to remove all the crud that had built up on HTML over the years, and so took a very purist approach. The HTML5 authors took a much more pragmatic attitude, recognised the certain odd features, like border="1", were actually useful and permitted them for those narrow situations.

Answer 2

You should prefer styles to attributes, and in this particular case you should always use styles because, according to the W3C index of attributes, the border= attribute on <table> is deprecated. Cellspacing and cellpadding are not officially deprecated, but their use is discouraged, and they are listed as "obsolete features" in HTML5.

As much as you possibly can, keep all style/presentation out of the document - the document should be content and structure - then style it however you want using XSLT or CSS.

Answer 3

Table attributes are deprecated. You should always use css to style your tables. Wheter you create a separate stylesheet or you embedded it in your html file.

Any html element can be styled using css.

EDIT:

More information about deprecated attributes here: http://www.w3.org/TR/html4/index/attributes.html

Good Luck!

Answer 4

If you're not sure which tool to use, think about what they actually are.

HTML is a markup language. It's used to describe the content on your web page so that it can be understood by whatever is browsing your site. It defines paragraphs, quotes, important pieces of content, navigation, etc.

CSS is a styling language. It describes how your content is presented. Use it for making elements look the way you want them to look, making your website into something visually appealing.

Borders are a part of the visual style of your content. You've put your content in a table because it makes sense, but if you want to add a border to the table, add in CSS rules to make it look the way you want.

You'll often find that older HTML code is written with more attributes that style the content, as well as <font> and <center> tags and other things that mix the content with the presentation. You may also find that some visual parts of your site aren't possible in pure CSS, and require extra markup to make it work; these are the kinds of tradeoffs you get to make as a web developer.