On the top page of the rebuild of jaypan.com is a slideshow that splits images diagonally, and moves them off screen. In actuality, the images themselves are not split, rather I have layered two of the same image over top of each other, with the right side of the left image being transparent, and the left side of the right image being transparent. Then, when these two images are animated outwards, it appears that the image is split.

Sometimes we want to highlight table columns when they are hovered over. Table rows are easy - it's as simple as adding tr:hover{background:red;} to your CSS. This will cause all table cells in a row to be red when the row is hovered over. However, columns are not as easy. The main reason behind this is that HTML tables are grouped by row, not by column. This means that while it is easy to select a group of table cells as a row (using tr in your CSS, or targeting tr tags in your javascript), it is not as easy to group table cells by columns.

You may think that you can use the html colgroup and col tags, but alas, such is not the case. They will allow for grouping elements by columns. However, these tags are deceptive. While they do allow for some limited styling of columns, they are not actually parents of the td tags that are in the column, and do not respond to the :hover attribute in CSS, nor do they trigger the javascript onmouseover event. Now, if this last statement didn't make sense to you, don't worry, it's not really important. What it is important is that you understand that it takes javascript to be able to highlight an HTML table column. And that is what this tutorial is going to show. It's possible to do this using pure javascript, but I'm a jQuery guy, so I will be showing my jQuery method of doing this.

This tutorial is for Drupal 6. The Drupal 7 tutorial is here: Themeing Drupal 7 forms into tables with checkboxes or radios.

Turning forms into a table of information, such as can be seen on the users administration page (admin/user/user) or the content administration page (admin/content/node) is not the easiest process in Drupal 6. Even looking at the code that is used to create these pages, it can be hard to see what exactly is going on. So lets take a look at how to do this.

First, let's look at our final goal. Drupal comes bundled with a nice little function for creating tables, theme_table(). This function requires two arguments: $header, an array containing the header cell elements of the table, and $rows, and array containing all the data (cells) of the table. $rows is actually a multi-dimensional array, with the top level being the rows, then and the next level being the cells of the row.

Our goal is to build these arrays. In this tutorial, I will be putting together a nice little table that looks like the following:

| ❏ | First Name | Last Name

------------------------------

| ❏ | Indiana    | Jones

| ❏ | Darth      | Vader

| ❏ | Super      | Man

I like to use the CSS Sprites technique on my sites, as it cuts down HTTP requests. However, it can sometimes be tricky to figure out how to put together an irregular shape in order to be able to use the method. An example is a site I was recently developing that used a 'speech bubble' like this:

I needed to make the speech bubble expandable in height to allow for different unknown amounts of text. So using the image as-is doesn't work. Of course the easy way is to slice the image into three pieces.