How to Create Gantt in CSS
Gantt charts are used in software such as Microsoft Project and Outlook for appointments and project scheduling. There are many software options for using Gantt charts on the Internet, but you can create a Gantt chart using CSS and HTML. The method for creating Gantt charts in CSS HTML is time consuming so you may want to consider another option for using Gantt charts, which already have software available, such as PHP, ASP, Java or Cold Fusion.
Other People Are Reading
Instructions
-
-
1
Create a new file. In your text editor, choose “File,” then “New.” Create a new HTML document called index.html. Place the HTML, body and head tags needed for a basic web page. A HTML Gantt chart was created by jlion (see “References”), but requires images of different colors and sizes. In this example, only HTML and CSS are used.
-
2
Place style tags in your head tags. In the style tags, place the CSS that will control the Gantt chart. Besides general styles, create an ID for each item you schedule. For example, if you have two items to schedule, your CSS would look like this:<br /><html><br /><head><br /><style type=\"text/css\"><br /> td {<br /> font-family: Verdana<br />GO<br /> font-size: 10px<br />GO<br /> }<br /> <br /> #tim1 {background: #ff0000; <br /> color: #ff0000<br />GO<br /> height: 15px; <br /> width: 20px;}<br /> <br /> #tim2 {background: #00ff00; <br /> color: #00ff00<br />GO<br /> height: 15px; <br /> width: 30px<br />GO<br /> margin-left:150px;}<br /> <br /></style><br /></head><br /><br />The background and color tags in the CSS will denote the color of the bar for the schedule. The width will control the length of time. In this example each px is one minute. The margin-left in the second ID sets the bar at the begin time. The example chart will be from 9 a.m. to 5 p.m. and since each px or pixel is one minute the second ID, tim2, starts at 11:30 a.m., which is 150 minutes from 9 a.m.
-
-
3
Create a table with the basic information you want to schedule. The table will need inline CSS to control the size of the table. Create a column for the name of the item, a column for time, a column for duration and finally a nested table in a column for the bar chart of the Gantt chart. For example: <br /><br /><body><br /><table style=\"width: 800px;\"><br /><tr><br /> <td colspan=\"7\"><br /> GANTT chart<br /> </td><br /></tr><br /><tr><br /> <td style=\"width: 150px; vertical-align: bottom;\">description</td><br /> <td style=\"width: 100px; vertical-align: bottom;\">begintime</td><br /> <td style=\"width: 50px; vertical-align: bottom;\">iduration</td><br /> <td style=\"width: 200px; vertical-align: bottom;\"><br /> <table style=\"width: 800px;\"><br /> <tr><br /> <td colspan=\"2\" style=\"text-align: center; width:120px;\">GANTT Indicator</td><br /> </tr><br /> <tr><br /> <td style=\"text-align: left; width: 100px;\">9AM</td><br /> <td style=\"text-align: right;width: 800px;\">5PM</td><br /> </tr><br /> </table><br /> </td><br /></tr><br /><br /><br />The first row, denoted by the tr tag, spans seven columns by using the colspan property and contains the tile of the chart in its td tag. The second row, again denoted by a new tr tag, contains the titles of each column and a nested table to create the times for the bars to adhere to. The size of the 9AM cell does not matter because 9AM will be left aligned. 5PM will need to be right aligned so it shows up at the end of the chart. Make that cell the width of the entire table. By putting this part in a nest table, the example shows there is a title, called Gantt Indicator for the bar section.
-
4
Create the bar section of the graph. Add the third row by adding another tr tag. Each tr tag will have four cells, denoted by the td tag. The first cell should be the name of the item, the second will be the time the appointment starts and the third will be the duration. The fourth row will include a div tag with the ID for the appropriate CSS you created for each item. Inside the div tag, insert a period for every minute. This will allow the bar to show up in the browser. If you look at the CSS, you will see we made the color and background the same color so the periods will not show up. Instead, the browser will show a bar the color indicated in the CSS. So if in your CSS you made the tag 20px long for a 20-minute appointment you will place 20 periods in the div tag. For example:<br /><br /><tr><br /> <td>A girl</td><br /> <td>9:00 a.m.</td><br /> <td>20</td><br /> <br /> <td ><br /> <div id=\"tim1\">....................</div><br /> </td><br /></tr><br /><br /><tr><br /> <td>A boy</td><br /> <td>11:30</td><br /> <td>30</td><br /> <br /> <td ><br /> <div id=\"tim2\">..............................</div><br /> </td><br /></tr><br /><br /><br /></table><br /></body><br /></html><br /><br />This shows two appointments. The first bar, red, will start right at 9AM and be 20 minutes long. The second bar, green, will not start until after the red bar on the fourth row and be longer than the red bar because it is set for 30px and therefore a 30-minute appointment.
-
5
Save your file.
-
1
Tips & Warnings
This is a tedious way to create a Gantt chart. You might want to update often. There are no HTML and CSS generators for this so you will have to type out the code by hand. If you are planning to set up a schedule on your website, you may want to look at project and appointment scheduling software for the web.
References
- Photo Credit BananaStock/BananaStock/Getty Images
