table

Displaying Tables As Block Elements On Mobile

2nd February 2021 - 7 minutes read time

The experience of using tables in websites whilst on a mobile can be pretty poor. Things tend to get a bit squashed and displaying the information can be a challenge just to fit the table onto the screen.

I was recently faced with a similar problem where I had a particular design in mind for the mobile version of the table. The solution I found was base based on some responsive table designs from CSS-tricks. I'm certainly no designer, but the what I created worked for the situation I was trying to solve.

The basic idea is that instead of treating the table like a table, change all of the table elements to block elements when displaying on mobile. This meant that when viewing the table in a mobile view it would be rendered in a different way, allowing it to be shown in a mode that was more mobile friendly.

Let's use the following table filled with some data.

Drupal 6 Tabledrag Forms

14th November 2011 - 19 minutes read time

A tabledrag form in Drupal 6 is any form that will allow you to move items up and down the list or into a hierarchy of items. This is actually a component of Drupal itself and is used on forms like menu, taxonomy and blocks management. Tabledrag is a great way of allowing your users to move items up and down a list with ease and they will be used to the mechanism from other areas of the site.

Essentially, a tabledrag is a normal HTML table within a form that contains some form elements and some JavaScript that will turn the table into a sortable group of elements.

I needed to create a tabledrag form in a recent project, but after not finding many good tutorials about creating a fully working form online I decided to write one. This will take you through the basics of what you need to get a weight based tabledrag form working and will also leave you with a working module.