CSS Gantt chart experiment

This is an experiment to display a Gantt chart using CSS. This could be easily created using a server-side scripting language such as PHP.

Explanation:

In this example there are three tasks. Task one lasts from Wednesday 5th in Week 13 to Monday 10th, Week 14. Task two last from Saturday 8th in Week 13 to Friday 14th in Week 1. Task 3 lasts from Monday 10th in Week 14 to Thursday 18th in Week 15.

Calculate the number of days to be shown

First of all we need to calculate how many days to show in the Gantt chart. In this examples the tasks stretch from Wednesday 5th to Thursday 18th, 14 complete days. We'll add an extra day at the beginning and end to make it neater, bringing the total to 16 days. We decide on a fixed width for our table of 1000px, and there's an example with a fluid-width table here. Also, for much longer projects, the cart could show weeks, months or years.

Calculate the size of the columns

We then allocate a certain width of the table to the task descriptions, in this case 200px. The remainder, 800px, is divided by the number of days we have to fit in - 16 - giving us a width for each day of 50px.

With me so far? Good.

Write out the tasks and their bars

Then just write out a table row for each task: the title in the first cell, followed by a single cell with a colspan of 16 - the number of days. This cell will contain our task bar.

The task bar cell contains a <div> with a class of the task ID. In the stylesheet rules we then apply a width of the number of days the task lasts for - 50px for each day, in our example - and apply a margin-left value of the number of days offset from the start day. Easy!