XHTML, CSS 2 and Tables - oh my

spn · Post by **spn** » Thu Mar 03, 2005 11:58 am

Dann,
I haven't used much xhtml, but you can trick tables by using 'display:table' type attributes, look at http://www.w3schools.com/css/pr_class_display.asp

Here's some code I've been playing around at today, while listening to the show.

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<title>
			Fudge
		</title>
		<meta http-equiv="Content-Type"                   content="text/html;charset=UTF-8">
		<meta http-equiv="Content-Language-Type"          content="en-GB">
		<meta http-equiv="Content-Style-Type"             content="text/css">
		<meta http-equiv="Content-Script-Type"            content="text/javascript">

		
	</head>
<body>

<div style="display:table;width:100%;border:solid thin #000000;">
	<div style="display:table-cell;background-color:blue;color:white;width:128px;height:128px;border-right:#ff0000 solid thin;">
	<div style="text-align:center;">sss</div>
	</div>
	<div style="display:table-cell;">
		<div style="text-align:center;">Title</div>

	</div>
</div>
<br>
<div style="display:table;border:thin #000000 solid;padding:3px;">
	<div style="display:table-row;border:thin #000000 solid;">
		<div style="display:table-cell;border:thin blue solid;">one</div>
		<div style="display:table-cell">two</div>
		<div style="display:table-cell">three</div>
	</div>

	<div style="display:table-row;">
	<div style="display:table-cell;">four</div>
	</div>
	<div style="display:table-row;">
	<div style="display:table-cell;">five, and some more text</div>
	</div>
</div>

<p>

	Hello world.
</p>

</body>
</html>

That any help? This code probably wont work in MSIE; so I'll probably still use tables and html 4 strict.

Steve

Guest · Post by **Guest** » Sat Mar 05, 2005 2:18 pm

I would call that... horrible.. anyway.

display:table is really a CSS attribute for doing XML formatting, not HTML.

One of the things you should always take into account for "good" HTML is actually using the sematically correct tags: if you are displaying tabular data, use a <table> tag. If you are quoting something use <blockquote> if you are displaying code, use a <code> tag. This isn't just about good form, but it makes your HTML degrade in a much much friendlier way and in a world where more and more people are HTML browsing with PDAs and cell phones, that becomes a much more important feature.

Just because we have CSS doesn't mean the only tags you should use are <div> and <span>

spn · Post by **spn** » Sat Mar 05, 2005 5:04 pm

I agree with your post, Mr Guest; if that is your real name. On the show for the past couple of weeks Linc and Dann have brought up the W3C guidelines for not using tables for formatting. Formatting in the sense of positioning and controlling page flow. And not for the sake of displaying tabular data.
It was said on the show that if you can't use tables, you would have to use position:absolute's and whatever. i noticed the css for creating table like flowing and decided to bring it up in case the Tech Show guys hadn't seen it. And to see what they thought about the alternative. Using tables in the example would have been pointless since I was trying to get table like positioning without using tables.

XHTML is a subset of XML; or rather a defined document type in XML. Tables are for displaying tabular data, not positioning images, controls and so on. These are according to the W3C. As for using <blockquote> and others, I do. That was not the point of my post.

Steve

Post by **dann** » Sun Mar 06, 2005 12:08 am

spn, I realized yesterday what the problem was regarding the difference in the div's. It had to do with padding. Each div had padding of 3px. The first div, the larger of the two, was taken up fully by the content and then the 3 px. The second div's content did not take up the same space so the padding beneath the content, even though it was 3px, did not reach to the bottom of the div. So the div was not extended that extra 3px's of padding like the first div.

I'm guessing in such a situation where you do not want to specify a height one would need to add a <br /> at the end of the conten for an extra line so that the content did not run right up against the border. Thus, both div's should then appear at the same size.

spn · Post by **spn** » Sun Mar 06, 2005 4:51 am

I've had problems with padding throwing div's out as well. I think the real problem is that W3C want us to use xhtml as html 1 was supposed to be used. For displaying information and not cute page layouts. I think they're right. I've noticed some sites, an increasing number, who use Flash for their full sites to get the page layout they want across browsers. For us open types, we'll have to wait for SVG, and use XHTML for displaying information only.

Steve