CSS » Fancy charts

Insert this code chunk on your hl page (internal css). Don't forget to put the style tags at the top and bottom of the chunk.

There is some codes for spiffin up that old chart you have. You can add a font size and type, line height and border

Start with this code:

td { and end it with the }

Font:

font-size:8pt;
font-family:Verdana;
line-height: 11pt;

Borders

For only a line around the chart, add this code to the td part: border:0px none; Then set border="1" bordercolor="black" inside the chart's table tag on your hl page. Like this:

Other borders

Instead of border:0px none, use border:1px dotted eg.

Dotted border: dotted

A dotted border

Dashed border: dashed

A dashed border

Solid border: solid

A solid border

Double border: double

A double border

Groove border: groove

A groove border

Ridge border: ridge

A ridge border

Inset border: inset

An inset border

Outset border: outset

An outset border

If you want only the outline of the chart to have spiffy borders, use the border:0px none; code inside the td {} area, and use this code inside the hl table chart code: border-style:dotted (or other style) like this:

You can fill the chart with a color by adding a hex code in the table tag like this: bgcolor="#FFFFCC" for example. It would look like this:

Example

dotted outlined border	cell 2	cell 3
cell 3	cell 4

Or you can fill it with a background picture with adding a url to the table tag like this:

Or you can have only the heading colored. To do that, you have to fill each cell in the header row with the wanted color:

<table border="1" bordercolor="black" style="border-collapse:collapse" width="800" id="hlchart" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor=blue>Name</td>
<td bgcolor=blue>Breed</td>
<td bgcolor=blue>Age</td>
</tr>
</table>

To learn more about charts, read the charts tutorial and the table tutorial :)