Recently I had the task of adding bullets to items in a pre-existing two-column HTML table. I first started to look at how to add the bullets using css to format the <TABLE> or <TD> tags, and then I looked at using css to make two columns of separate lists using <UL> and <LI> tags. I eventually found an easier solution: ASCII codes. This article will provide a general overview the the options for creating a two column tabled with bulleted items.
Option 1: Modify the Table Markup
I looked at how I could manipulate the formatting of the table because I already had quite a few items into the table and I didn’t feel like cutting and pasting the items into two separate CSS lists (see below). I could have wrapped the columns in list tags, and then wrapped the table items in <LI> tags but I didn’t feel like doing all of that typing. I thus decided that this method was not the way to go for me.
Option 2: Delete the Table and Create a Two Column Layout of Individual Lists with CSS
Getting rid of the table and creating two columns, each with a css list was probably the best approach and most standards-compliant approach. This approach also would be the fastest one to update if I ever decided to change the bullet to something else in the future. The reason I didn’t choose this method is because I didn’t feel like adding the new <div> tags and floats I would need to setup the columns within the preexisting code. One of the problems with this approach could be with older browsers that don’t do well with css. (as always that’s a decision to make based on your website demographic). Although I do admit that this solution would only have taken around 10 minutes to implement, I chose not to use it because I found a faster way to solve the problem: ASCII characters.
Option 3: Use ASCII Characters
So for the quick and dirty solution, I used the ASCII code for the bullet and placed it in front of each item in the list in my table. The ASCII code (entity number for HTML) for a bullet is: &8226; . Some argue, however, that is it is better to use the entity name for special characters instead of the entity number. The entity name for the bullet is: •.
Here is an example (I’ve omitted the table and tr tags for brevity):
<td>•Your Text Here<td>
The drawback of this approach is that using ASCII codes may not be visible in browsers that are not using the standard set of English/Western European (Latin) character encoding.
It’s up to you to decide which solution is best for your specific site and audience, noting the advantages and disadvantages of each method.