Making a Simple Legend

We used a couple of helpful HTML tags to make a simple key or legend in class. We created a table using table, tr, and td. We used div to create an arbitrary box and then added a style="" attribute to give the box a height, width and background color. If you don’t already know the colors on your gradient, take a screenshot using cmd-shift-4. When you see the crosshairs, draw a box around the area you want a snapshot of. When you release the mouse, OSX will save an image to your desktop. Open that in Photoshop, and use the eyedropper to pick out colors. The color slider menu in Photoshop includes a “web color” mode that will give you hexadecimal color codes and an option to copy the color code directly to your clipboard.

Then, make your table. Nesting matters. The table is the outermost tag, followed by the rows tr and then the headings and cells th or td. The code below produces the table below that.


<table>
<tr>
<th colspan="2">Youth Unemployment</th>
</tr>
<tr>
<td><div style="background-color:#cfe2f3; width:10px; height:10px"> </div></td>
<td>Less than 2%</td>
</tr>
<tr>
<td><div style="background-color:#9fc5e8; width:10px; height:10px"> </div></td>
<td>2-18%</td>
</tr>
<tr>
<td><div style="background-color:#6fa8dc; width:10px; height:10px"> </div></td>
<td>19-35%</td>
</tr>
<tr>
<td><div style="background-color:#3d85c6; width:10px; height:10px"> </div></td>
<td>36-51%</td>
</tr>
<tr>
<td><div style="background-color:#0b5394; width:10px; height:10px"> </div></td>
<td>More than 51%</td>
</tr>
</table>

Youth Unemployment
 
Less than 2%
 
2-18%
 
19-35%
 
36-51%
 
More than 51%

Leave a Reply

Your email address will not be published. Required fields are marked *