(HTML) Table cell not inheriting style

The goal of this new blog category called “Programming FAQ” is to publish short posts with day to day programming problems and their solutions, or at least provide a tip to find the proper solution to your problem. And today we start with this simple and stupid problem that can happen to anyone with poor HTML experience like me. “My HTML table does not seems to inherit the style from a parent element”, here is the example:

<html>
<body>
<div style="color: blue;">
	<table>
	<tbody>
		<tr>
			<td>BLUE TEXT</td>
		</tr>
	</tbody>
	</table>
<div>
</body>
</html>

In the below example I would expect to see the “BLUE TEXT” in blue, but is not (at least in FireFox). So what the hell is wrong with my code? probably many things but because I’m not interested in following/reading the W3C recommendations for my uncle’s home page, here is one possible solution: Add the transitional DOCTYPE to your document, or the DOCTYPE that adequate better to your page (read more here). E.g.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

So, now you know. Never forget the DOCTYPE it is very important… Why? read this… It has to do with poor standards, browsers and all that crap.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>