This post will show you how to create and style tables on loyno.edu using Drupal.

Create a table

Click the Insert/Edit Table button on the toolbar, as shown in the screenshot above (1). Doing so pops open the Table Properties window. In here you can toggle a few settings for your table. The only ones you need be concerned with are Rows/Columns (2) and Width (3). The other settings will not take effect no matter what you choose.

(Note: You don’t need to be exact specifying Rows/Columns and Width initially. You can always come back and change these values later.)

Once you click OK, you should see an empty table in the editor, like so:

Editing a table

You can change a lot of settings for your table by right clicking on it. This will display a context menu with several options (see screenshot (1) below). From this menu you can add or delete rows and columns, set the alignment for cells and change the original properties of the table. You can make the same changes to multiple cells at once by clicking and dragging to highlight all the cells you want, then right clicking on them and choosing from the context menu.

So, for example, here is how you would center align all the cells in a table:

Note in (2) above that we also set the cell width to 50%. This ensures that both columns in the table are of equal width. If you wanted the same effect in a three-column table, you’d set the cell width to 33%, and so on.

Styling a table

By default each table is given a default styling, with light grey borders and generous padding. There are some things you can do to get a different look.

No borders

If you want to utilize a table for layout purposes, you can get rid of the default borders by giving the table a class of clean. To do this you must make an alteration to the source code, which you can access by clicking the Source button as shown in the screenshot below.

After you’ve made this change, clicking once again on the Source button will put you back in normal edit mode, and you will see that your table now has a light dashed border. This border is just for guide purposes; visitors who view the final published table will not be able to see any border.

Below is an example of how a clean table can be used for layout purposes:

Headers

Adding headers to a table can be a little complex. Again, you will need to make alterations to the source code. Let’s take the following table as an example:

Here we want to have First Name and Last Name stand out more so they can easily be identified as headers. If we click the Source button in the editor, we can see the code looks something like this (presented in the following format so it can be copied and pasted):


<table width="50%" cellspacing="1" cellpadding="1" border="1">
<tbody>
<tr>
<td>First Name</td>
<td>Last Name</td>
</tr>
<tr>
<td>Gabriel</td>
<td>Byrne</td>
</tr>
<tr>
<td>Brendan</td>
<td>Gleeson</td>
</tr>
<tr>
<td>Liam</td>
<td>Neeson</td>
</tr>
</tbody>
</table>

We need to change the code so it looks like this (explanation below):


<table width="50%" cellspacing="1" cellpadding="1" border="1">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Gabriel</td>
<td>Byrne</td>
</tr>
<tr>
<td>Brendan</td>
<td>Gleeson</td>
</tr>
<tr>
<td>Liam</td>
<td>Neeson</td>
</tr>
</tbody>
</table>

Here’s what we changed:

  1. We surrounded the header text with <th> tags instead of <td> tags (lines 4 and 5 above).
  2. We moved the header row out of the <tbody> tag and into the newly-created <thead> tag (lines 2 and 7 above).

Now if we click the Source button again, we can see the table has some nifty header styling:

Footers

Footers are added to a table in pretty much the same way as headers, except you have the option of using <td> tags instead of <th> tags, and everything in the row must be surrounded with a <tfoot> tag instead of a <thead> tag.

Here’s some sample code, the result of which you can see in the screenshot below:


<table width="99%" cellspacing="1" cellpadding="1" border="1">
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
<th>Heading 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>One</td>
<td>Two</td>
<td>Three</td>
</tr>
<tr class="alt">
<td>Four</td>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
<td>Nine</td>
</tr>
<tr class="alt">
<td>Ten</td>
<td>Eleven</td>
<td>Twelve</td>
</tr>
<tr>
<td>Thirteen</td>
<td>Fourteen</td>
<td>Fifteen</td>
</tr>
<tr class="alt">
<td>Sixteen</td>
<td>Seventeen</td>
<td>Eighteen</td>
</tr>
<tr>
<td>Nineteen</td>
<td>Twenty</td>
<td>Twenty-one</td>
</tr>
</tbody>
<tfoot>
<th>Seventy</th>
<th>Seventy-seven</th>
<th>Eighty-four</th>
</tfoot>
</table>

The resulting table:

(Note that the above table also has zebra striping, which is explained below.)

Zebra Striping

Often you’ll find that a table is more readable when alternate rows have a different background color. This is known as zebra striping. If you want to apply this to your table, you will need to edit the source code, adding a class of alt to every second row. See the last block of source code for an example.

Float/align a table

If you want a table to align to one side of your content are and have text wrap around it, you again need to apply a class via the source code. To align left, apply a class of float-left. To align right, apply a class of float-right.

The screenshots below show the steps needed to do this:

What you can’t do with tables in Drupal

There are a few limitations you should be aware of. They are as follows:

  1. Vertical alignment: The content in the table cells will always be aligned to the top of the cell.
  2. Aligning headings: Headings will always be aligned to the left of the containing cell.

Also, be aware that content may not appear to users on the front-end of the website exactly as it appears to you in the Drupal editor. Be sure to check your tables on the front-end before publishing them.

If you have any difficulties with tables in Drupal, please contact the Web Team via webteam@loyno.edu.

Related post: Styling text and positioning images in Drupal

Comments are closed.