simulate html table with css using ul, li and div tags...
in web design

Today we're going to look at a way you can simulate a html table using unordered list tags. The reason, you might be asking, for not just using a table is that with the rise of AJAX sortable list items, we want a way to sort out our data. It's also pretty cool and is search engine friendly tableless design.

First thing we are going to look at is the html code we will need to create a table with three columns and 3 rows. The first row of columns will be the headings for the fields.

1.  <ul>
2.   <li>
3.    <div class="header">first name</div>
4.    <div class="header">middle name</div>
5.    <div class="header">last name</div>
6.   </li>
7.   <li>
8.    <div>Rob</div>
9.    <div>James</div>
10.   <div>Shillito</div>
11.  </li>
12.  <li>
13.   <div>Rob</div>
14.   <div>James</div>
15    <div>Shillito</div>
16.  </li>
17. </ul>

As you can see from the html the code looks very similar to the code you would use for a html table. Code line 1: Instead of using a table tag, we use an unordered list tag. Code line 2: Instead of using a table row tag, we use a list item tag. As this will be our header row we have a CSS class called header, which will style the row. Code line 3: Instead of using a td tag, which is our individual cell element, we use a div tag.

Now we have our html code, we need to style the faux table with our CSS.

1.  ul {
2.   margin:0px; 
3.   padding:0px;
4.  } 
5.  ul li {
6.   list-style-type:none; 
7.   clear:left;
8.  }
9.  li div { 
10.  float:left; 
11.  width:100px; 
12.  height:25px; 
13.  background:#E9E9E9; 
14.  line-height:25px; 
15.  margin:2px; 
16.  padding:0px 5px 0px 5px; 
17. } 
18. .header{ 
19.  background:#aa2b8d; 
20.  color:#FFF; 
21.  text-align:center;
22. }

Code line 1: First we are removing any default margin or padding values set by browsers by setting them to 0px. Code line 2: Secondly this sets any li property within the ul tags, and for our example it removes the default bullet points and clears the left float so that faux table will flow correctly. Code line 3: Thirdly we set the divs held within the li tags. The main properties to note here are the line-height, which is set to the height of the div so the text will align vertically in the middle. The margin, which is the cellspacing property you would use in a normal html table. And lastly, the padding, which is the cellpadding property of a html table. Code line 4: Lastly we style the header row of columns by setting its background colour, colour of the text and centre the text. The class is appended to the first li tag in our html structure.

Below you can see the output of the code we used for this example. There is a lot more you can do with this technique, but this is just a simple example to get you started.

• first name
  middle name
  last name
• Robert
  James
  Shillito
• Robert
  James
  Shillito

 

Hope this has been of some use :)

Cheers Rob

---

---

name: email: website: comment: