domingo, 4 de mayo de 2014

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

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

<ul style="float:left;list-style-type: none;">Exterior<hr>

<ul style="float:left;list-style-type: none;">Interior<hr>

<ul style="float:left;list-style-type: none;">Accesorio<hr>

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

There you have It!.

I hope this is useful for you.

No hay comentarios.: