• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Home
  • Categories
  • Contact Us
    • Advertising
    • Requests
    • Privacy Statement
HelpSpa.com

HelpSpa.com

Computer Tutorials

Create Two Column Table with Bullet Points Without Using

    October 14, 2009 by davidwank

    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:  &bull;.

    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.

    Filed Under: (X)HTML Tagged With: HTML, Web Design, Web Development

    Primary Sidebar

    More to See

    Google Analytics 4 Migration Training

    December 22, 2022 By davidwank

    Hubspot Zoom Webinar Integration

    Connecting HubSpot and Zoom Webinars

    August 27, 2022 By davidwank

    Google Analytics as we know it is going away!

    July 24, 2022 By davidwank

    Footer

    Text Widget

    This is an example of a text widget which can be used to describe a particular service. You can also use other widgets in this location.

    Examples of widgets that can be placed here in the footer are a calendar, latest tweets, recent comments, recent posts, search form, tag cloud or more.

    Sample Link.

    Recent

    • Google Analytics 4 Migration Training
    • Connecting HubSpot and Zoom Webinars
    • Google Analytics as we know it is going away!
    • Building a New Dental Website?
    • BackupBuddy Timeouts on GoDaddy Hosting

    Search

    Tags

    Adobe Acrobat Backup classical music and opera cPanel DAM Database Digital Photography email Excel Facebook Firefox hardware HP Security HTML iMovie Internet Explorer iTunes linksys Microsoft Office Microsoft Word MySQL networking Office 2010 OneNote OpenOffice OS X PDF PHP printers reseller hosting Reviews router SEO subversion Video Virtualization Virtual PC Web Design Web Development Web Hosting Windows Windows 7 Windows Vista Windows XP Wireless

    Copyright © 2023 · Magazine Pro on Genesis Framework · WordPress · Log in