[html][CSS] ul li table

ul li table

Create a Dynamic Table of Contents with ul li tags - css.

 <style type='text/css'>
.table                   <-- div class = table
{
background:#333;

}
.table ul                <-- This is mean  ul inside of table   
{
float:left;
margin:0;
padding:0;
border:1px solid #C9C9C9;
}
.table ul li              <-- This is mean  li inside of ul inside of table   
{
list-style:none;
padding:5px 10px;
}
.table ul li.title        <-- This is mean li class name is title    li inside of ul inside of table   
{
font-weight:bold;
background:#333;
color:#fff;
}
.table ul li.even
{
background:#fff
}
.table ul li.odd
{
background:#FFFFE6
}
</style>

 <div class='table'>

<ul>
<li class='title'>Continent</li>
<li class='even'>Asia</li>
<li class='odd'>Africa</li>
<li class='even'>North America  </li>
<li class='odd'>South America</li>
</ul>

<ul>
<li class='title'>Area</li>
<li class='even'>43</li>
<li class='odd'>30</li>
<li class='even'>24</li>
<li class='odd'>17</li>

</ul>
<ul>
<li class='title'>Population</li>
<li class='even'>60</li>
<li class='odd'>14</li>
<li class='even'>8</li>
<li class='odd'>6</li>
</ul>

</div> 

Reference :

• 
  

  
  
  
  
  ul li table