In This Issue...

• Introduction
• HTML Tables are not Evil
• HTTP-Only Cookies
• New Articles
• Techy Forum Threads
• More Techy Blog Entries

The Ultimate Marketplace For Web Developers

The SitePoint Marketplace allows you to:

• Buy & sell established web sites & blogs efficiently.
• Build your portfolio by participating in design contests.
• Hire contractors and freelancers for big (or small) jobs.
• Advertise your services to others.
• Sell your advertising space quickly.
• Find great web hosting deals to save money.

Click here to get started today!

Introduction

At last check, the SitePoint Tech Times goes out to over 130,000 web designers and developers the world over. Consequently, whenever I make a mistake I know about it almost immediately.

Last issue, the second of our two Q&A specials, I answered Susan Douglas's question on how to produce a bulleted list with vertically aligned elements within the list items, as you can get using tab stops in a word processor, using CSS. As many of you wrote in to point out, my answer was completely off base, and missed a valuable opportunity to dispel the myth that all HTML tables are bad. In this issue, I'll correct that mistake.

Also this issue, we'll look at yet another longstanding Internet Explorer specific feature that is getting some attention from other browsers: HTTP-Only Cookies.

But first, there's a lot going on both at SitePoint at in the web development world at large, so let's dive in!

SitePoint Video Tutorials and a New Look

We've just launched a new, cleaner design for sitepoint.com including the SitePoint Forums and the SitePoint Marketplace. Although there are cosmetic tweaks just about everywhere, the main reason for the change is to make room for our new series of video tutorials.

We launch not only with the Introduction to AJAX video that we released with Build Your Own AJAX Web Applications in June, but the three-part follow-up series Using AJAX in your Web Application. And of course there is the free sample video, The Photoshop Starburst Effect, for you to take for a spin.

I look forward to hearing what you think. Happy viewing!

Internet Explorer 7 RC1

At the forefront of every web designer's mind right now should be the just-released Internet Explorer 7 Release Candidate 1 (RC1). Word on the street is that, upon its release (before year's end), IE7 will be pushed out as a forced update to Windows XP users everywhere, as was done for Service Pack 2. The move to IE7 among the end-user masses will not be a gradual migration, but a sudden and significant shift.

If you haven't yet tested and updated your sites to work with the new browser, do it now. The RC1 release is essentially final in terms of how it displays web sites, and Microsoft has now supplied copious documentation and tools for you to come to grips with everything that has changed.

The Photoshop Anthology in Full Colour

Here's a scoop for all you loyal Tech Times readers out there: SitePoint's next book, The Photoshop Anthology, has been produced in lush, full colour! We just got our sample copies here at the office and I've never had a more handsome book on my desk!

The Photoshop Anthology is the ultimate Photoshop book for web designers, with over 101 solutions to common web design problems. Look for it to go on sale within the next couple of weeks (joining the Book Buyers' Club is a good way to be notified).

HTML Tables are not Evil

Sure, you can go to great lengths to reproduce the behaviour of tables using CSS, but sometimes tables are exactly what you should use.

Let's try this again. From Susan Douglas:

“I am currently on the fence between CSS and tables. […] How do I create columns in a list? For instance, a list of books with titles and authors. Or a list with edit and delete buttons. On a typewriter (or in Notepad) I would use tabs. I stick with tables because I can get it to line up the way I want.”

A list with columns—why, that sounds like the definition of a table to me! The choice to use CSS for page layout does not mean you should swear off ever using HTML tables. Information that is naturally presented using rows and columns (so-called tabular data) can and should be marked up using tables.

With this in mind, here's what your markup should look like:

<table>
  <thead>
    <tr>
      <th scope="col">Title</th>
      <th scope="col">Author</th>
      <th scope="col">Year</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><cite>The JavaScript
Anthology</cite></td>
      <td>James Edwards &amp; Cameron Adams</td>
      <td>2006</td>
    </tr>
    <tr>
      <td><cite>The CSS Anthology</cite></td>
      <td>Rachel Andrew</td>
      <td>2005</td>
    </tr>
    <tr>
      <td><cite>The PHP Anthology</cite></td>
      <td>Harry Fuecks</td>
      <td>2003</td>
    </tr>
  </tbody>
</table>

…which is just an HTML table—nothing fancy. Where CSS comes in is in presenting this table so that it looks like a list. First, we can the thead element, which contains the row of header cells:

thead {
  display: none;
}

Depending on which browsers you need to support, there are better ways of doing this so that the content of the table headers is still seen by screen readers, but because the column structure of the data isn't especially important in this case we can get away with simply hiding them.

Next, we can style the book titles so that they look like a bulleted list:

cite {
  display: list-item;
  list-style-type: disc;
  margin-left: 2em;
}

That's it! Way simpler than attempting to lay out the information without a table, as I did last issue, and the HTML table reinforces the meaning of the data to be displayed.

Build Your Own AJAX Web Applications

by Matthew Eernisse

"Create responsive web applications with the power of AJAX!"

Now you can join the likes of Google Maps, Google Suggest, Backpack, and Flickr by taking advantage of the usability, interactivity, and responsiveness benefits of AJAX!

Build Your Own AJAX Web Applications is a practical, step-by-step guide to bringing next-generation interactivity to your web sites today. Your sites and web applications will be:

• easier to use
• more fun to use
• more intuitive

Download free chapters in PDF format today!

HTTP-Only Cookies

It seems like Internet Explorer has an endless supply of proprietary features that never really panned out, but many of these features are coming back under scrutiny as possible solutions for the new generation of web applications. The classic example, of course, is XMLHttpRequest, the IE-only feature that went on to lead the AJAX revolution, but HTTP-only Cookies might just be another bright idea.

Now let's not get carried away. HTTP-only Cookies are a security feature not likely to trigger the next paradigm shift in web development. But they are a clever little trick worth knowing about, so much so that support for this feature is being added to PHP 5.2.

Cookies got a bad rap when they first gained wide adoption on the web. People feared for the personal data stored by web sites being stolen by malicious sites or used without their permission. Web site privacy policies that promised how information stored in Cookies would be used went a long way toward addressing these concerns.

Cross-Site Scripting (XSS), however, remains a serious potential avenue of attack by which data stored in cookies can become compromised. Here's how it happens:

1. A web site allows its users to submit and publish content on the site.
2. An attacker submits JavaScript code that reads the value of a cookie and sends it to the attacker.
3. The web site fails to filter out the JavaScript code, and displays it to the public on the site.
4. You visit the page displaying this code, the code runs, and the attacker receives the value of that cookie in your browser.

If the cookie is, for example, your current session ID, the attacker can use it to gain access to your account on the site. More subtly, the attacker might obtain your email address and sell it as a target for unsolicited email.

Of course, the ideal solution to this problem is to correct point 3 above, and ensure that the site correctly filters out malicious code from content before displaying it on the site. When using third party software, however, it is not always possible to be absolutely sure that the code you are running is impervious to attack via XSS.

HTTP-only Cookies provide an additional layer of security. In Internet Explorer 6, when you specify that a particular Cookie should be HTTP-only, the value of the Cookie will not be available to JavaScript code running on the site. In other words, a page compromised by XSS will not give an HTTP-only Cookie's value to the attacker. In Internet Explorer 7, the attacker cannot overwrite the value of an HTTP-only Cookie, either.

Microsoft has a short but detailed page describing the feature and the extension to the HTTP Set-Cookie header that is used to create HTTP-only Cookies. As of PHP 5.2, it will be possible to create HTTP-only Cookies automatically using PHP's set_cookie function. For now, you can do it manually using the header function to send the necessary HTTP header.

No browser other than Internet Explorer yet supports HTTP-only Cookies, which wouldn't normally be a big deal because they are designed so that other browsers simply treat them as normal Cookies. Unfortunately, Internet Explorer for Mac discards HTTP-only Cookies as invalid, completely ignoring them. If this browser is still among those you must support with your site, you'll need to hold off on adding HTTP-only Cookies to your toolbox.

ASP.NET 2.0 already protects its session ID cookies using this feature, however, and the possibility is there that PHP will follow suit.

Phew! It feels good to have set the record straight on the non-evilness of HTML tables for marking up tabular data. Serves me right for writing newsletters while on holiday!

See you next issue,

Kevin Yank
techtimes@sitepoint.com
Editor, The SitePoint Tech Times

Help Your Friends Out

People you care about can benefit from the wealth of information on new and maturing technologies available on the Internet. Help them learn how to do it by forwarding them this issue of the SitePoint Tech Times!