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.
| Week 13 | Week 14 | Week 15 | ||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| T4 | W5 | T6 | F7 | S8 | S9 | M10 | T11 | W12 | T13 | F14 | S15 | S16 | M17 | T18 | W19 | |
| Task 1 | ||||||||||||||||
| Task 2 | ||||||||||||||||
| Task 3 | ||||||||||||||||
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.
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. The Gantt table is set to 100% width, but there is an example with a fixed-width table here. For much longer projects, the chart could show weeks, months or years.
We then allocate a certain width of the table to the task descriptions, in this case 20%. The remainder, 80%, is divided by the number of days we have to fit in - 16 - giving us a width for each day of 5%.
With me so far? Good.
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 - 5% for each day, in our example - and apply a margin-left value of the number of days offset from the start day. Easy!