Drupal for Beginners: How to Create a Table Using theme_table()

A friend asked me recently how to create a table in Drupal in a proper way.

Let's start with the very basic version - simple header and few rows, only data without any extra attributes.

Note that examples below are for Drupal 6, as there are differences in implementation of theme_table() function between versions 6 and 7. For more information on this and example of a change required to make them work in D7 see the end of this post.

To do this we need to create two arrays (one for header, and one for data), and then pass them to theme_table() function:

The result:

Fruit Vitamin A Vitamin B1 Vitamin B2
Apple 98 IU 0.031 mg 0.047 mg
Banana 76 IU 0.037 mg 0.086 mg
Orange 295 IU 0.114 mg 0.052 mg

Now let's assume that we want to add some classes and ids to our table cells. To do this first we need to move the data one level deeper, into nested arrays with keys labelled "data", and then define additional attributes on the same level as "data" arrays:

Result looks the same as above, but if you view its source, you will see all new ids and classes added there:

Fruit Vitamin A Vitamin B1 Vitamin B2
Apple 98 IU 0.031 mg 0.047 mg
Banana 76 IU 0.037 mg 0.086 mg
Orange 295 IU 0.114 mg 0.052 mg

The same trick could be applied to table rows as well. To add additional attributes for each table row, we need to move all data of each row one level deeoper (the same way as it was done for table cells before) into "data" keys, and add extra keys for new attributes (ids, classes, styles etc).

Let's also combine it with sample colspans and rowspans in the next example (note that because header has only one row by definition, it cannot be nested to "data" key as a whole, so I have removed it from this example, as it needs to stay the same as in previous one):

And the result:

Fruit Vitamin A Vitamin B1 Vitamin B2
Apple 98 IU 0.031 mg 0.047 mg
Banana 76 IU
Orange 295 IU 0.114 mg

Finally, let's combine all above with fetching data from database:

This gives us following result:

Nid Title Date
4 Benchmarking Node.js - basic performance tests against Apache + PHP Thu, 08/19/2010 - 17:45
6 node.js + Socket.IO: Cannot Connect to Web Socket Server (SecurityError) Sat, 08/14/2010 - 22:58
7 Getting Started with Node.js: Installation and Resources Thu, 08/12/2010 - 18:44
8 A Style Guide for PHP Developers Tue, 08/10/2010 - 18:08
9 JavaScript: The World's Most Misunderstood Programming Language Sun, 08/08/2010 - 16:54

There are many other things which could be added here, like for sorting or pager to name only few, but let's leave them for another, a little bit more advanced tutorial.

It works in exactly the same way for Drupal 7.x, the only difference is a way of passing parameters to theme_table() function - instead of two separate parameters they are being passed as one associative array. For more details see Drupal API documentation.

Drupal 7.x

The only difference in implementing the table between Drupal 6 and 7 is the way parameters are passed to theme_table(). In Drupal 6 this function is defined as:

theme_table($header, $rows, $attributes = array(), $caption = NULL)

while in Drupal 7:

theme_table($variables)

So in this case our call to theme_table() function would look like this: