Multiple column list using HTML (ul and li)

I know that you could find a lot of ways to show columns using HTML,  but sometimes for most of those ways you need a "deep"  knowledge of CSS, if you just know the very basic stuff of CSS and HTML, then this is for you. Fast and easy.

The idea is having a multicolumn list, using ul and li tags (and just a little bit of CSS).
Let's suppose you have the following data and you want them to show as a column for every category:

id  name         category
--------------------------
1   Antena       Exterior
2   Emblema      Exterior
3   Llantas      Exterior
4   Luces        Exterior
5   Estéreo      Interior
6   Tapetes      Interior
7   Encendedor   Interior
8   Gato         Accesorio
9   Extintor     Accesorio
10  Herramientas Accesorio
11  Claxon       Cofre
12  Batería      Cofre
13  Filtro aire  Cofre


You want them to look like this:

Exterior   Interior    Accesorio     Cofre
---------  ----------  ------------  -----------
Antena     Estéreo     Gato          Claxon
Emblema    Tapetes     Extintor      Batería
Llantas    Encendedor  Herramientas  Filtro aire
Luces

So, the HTML code could be as easy as this:

<ul style="float:left;list-style-type: none;">Exterior<hr>
    <li>Antena</li>
    <li>Emblema</li>
    <li>Llantas</li>
    <li>Luces</li>
</ul>

<ul style="float:left;list-style-type: none;">Interior<hr>
    <li>Estéreo</li>
    <li>Tapetes</li>
    <li>Encendedor</li>
</ul>

<ul style="float:left;list-style-type: none;">Accesorio<hr>
    <li>Gato</li>
    <li>Extintor</li>
    <li>Herramientas</li>
</ul>

<ul style="float:left;list-style-type: none;">Cofre<hr>
    <li>Claxon</li>
    <li>Batería</li>
    <li>Filtro aire</li>
</ul>



There you have It!.

I hope this is useful for you.