Handy CSS Stuff

This site has some good examples of how to do some common layouts in CSS rather than using the evil TABLE tag.
 
At least, a lot of people claim it’s evil. I’m not sure why table-less tables are necessarily any better though. Take a look at the following. Is this really any better for screen readers?
<html>
<head>
 <title>Test CSS</title>
 <style type="text/css">
  .table { }
  .tr { margin-left: 10em; }
  .th { margin-left: -10em; width: 9em; float: left; }
  .td { margin-left: 0em;}
 </style>
</head>
<body>
 <div class="table">
  <div class="tr">
   <span class="th">Header</span>
   <span class="td">Text - goes with Header</span>
  </div>
  <div class="tr">
   <span class="th">Yet another</span>
   <span class="td"><textarea rows="5" cols="40">This is a test - goes with Yet Another</textarea></span>
  </div>
  <div class="tr">
   <span class="th">Another Header</span>
   <span class="td">Some more text - goes with Another Header</span>
  </div>
  <div class="tr">
   <span class="th">Another Header 2</span>
   <span class="td">Some more text - goes with Another Header 2</span>
  </div>
 </div>
</body>
</html>
Advertisements
This entry was posted in Computers and Internet. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s