Displaying Tables As Block Elements On Mobile

2nd February 2021 - 5 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.

Getting Started With PhoneGap And Android

4th January 2013 - 7 minutes read time

PhoneGap is a free and opensource framework for developing mobile applications. It is a great way of creating applications that work across multiple devices including iOS, Android, Blackberry, Windows and others. It works by rendering HTML pages using a browser, which means that you can create applications using just HTML and JavaScript. It also allows you to interact with elements of the phone like the camera and accelerometer through JavaScript using a simple API.

I recently set about trying to use this system to create an application, and as I have an Android phone I started by creating a simple Android app. The PhoneGap website has a number of getting started guides, including what software you need to get started. I found that they were a little wrong for getting started in Android. I am running OSx so the instructions here might not work for you, but they should be fine for most *nix based systems.