Tabla usando DIV y Listas UL

Esta vez veremos como hacer una tabla, pero hecha con <DIV> y Listas <UL> es decir sin usar <table>, <tr> ni <td>.

Los Divs se caracterizan por ser agrupadores de contenido independientes. En cambio, las tablas, por tener el contenido bien estructurado.

Ejemplo de como hacer una Tabla usando <DIV> y Listas <UL>

Codigo HTML

<div class="contenedor">
  <div class="basico">
      <div class="basico_encabezado">Planes de Hosting</div>
      <ul>
        <li>Espacio en Disco</li>
        <li>Transferencia Mensual</li>
        <li>Precio Anual  en US$ &nbsp;</li>
      </ul>
    </div>
    <div class="c1">
      <div class="c1_encabezado">B&aacute;sico</div>
      <ul>
        <li>1000 MB</li>
        <li>10 GB </li>
        <li class="precio">110.00</li>
      </ul>
    </div>
    <div class="c1">
      <div class="c1_encabezado">Profesional</div>
      <ul>
        <li>2000 MB</li>
        <li>20 GB </li>
        <li class="precio">140.00</li>
      </ul>
    </div>
     <div class="c1">
      <div class="c1_encabezado">Avanzado</div>
      <ul>
        <li>3000 MB</li>
        <li>30 GB </li>
        <li class="precio">200.00</li>
      </ul>
    </div>
    <div class="c1">
      <div class="c1_encabezado">Premium</div>
      <ul class="noboderRt">
        <li>4000 MB</li>
        <li>40 GB </li>
        <li class="precio">350.00</li>
      </ul>
    </div>
    <div class="clr"></div>
    <div class="caracteristica">
      <div class="caracteristica_encabezado">M&aacute;s Caracter&iacute;sticas</div>
      <ul>
           <li>Bases de Datos <b>MySQL</b></li>
           <li>Cuentas FTP</li>
           <li>Subdominios</li>
      </ul>
    </div>
    <div class="c2">
      <div class="caracteristica_encabezado">&nbsp;</div>
      <ul>
            <li class="no">&nbsp;</li>
            <li>2</li>
            <li>ilimitados</li>

      </ul>
    </div>
    <div class="c2">
      <div class="caracteristica_encabezado">&nbsp;</div>
      <ul>
            <li class="si">&nbsp;</li>
            <li>5</li>
            <li>ilimitados</li>
      </ul>
    </div>
    <div class="c2">
      <div class="caracteristica_encabezado">&nbsp;</div>
      <ul>
            <li class="si">&nbsp;</li>
            <li>10</li>
            <li>ilimitados</li>
      </ul>
    </div>
    <div class="c2">
      <div class="caracteristica_encabezado">&nbsp;</div>
      <ul class="noboderRt">
            <li class="si">&nbsp;</li>
            <li>15</li>
            <li>ilimitados</li>
            
      </ul>
    </div>
</div>

Codigo CSS

.contenedor{
	width:764px;
	float:left;
	border-left:1px solid #B50102;
	border-right:1px solid #B50102;
	background:#FDF3E9;
	margin:20px;
}
	
.clr{
	clear:both;
	height:0;
}

.basico{
	float:left;
	width:200px;
	}

.basico_encabezado{
	background:#B50102;
	font-size:18px;
	line-height:35px;
	font-weight:bold;
	padding-left:20px;
	border:none;
	color:#FFF;
	margin: 0;
	}	
	
.basico ul{
	margin:0;
	padding:0;
	}
	
.basico ul li{
	list-style:none;
	font-size:14px;
	font-weight:bold;
	line-height:35px;
	padding-left:20px;
	border-right:1px solid #B50102;
	border-bottom:1px solid #B50102;
	color:#333;
	}
	
.c1_encabezado{
	background:#B50102;
	font-size:18px;
	line-height:35px;
	font-weight:bold;
	text-align:center;
	border:none;
	color:#FFF;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	}
	
.c1{
	float:left;
	width:141px;
	text-align:center;
	}
	
.c1 ul{ 
	padding:0;
	margin:0;
	}
	
.c1 ul li{
	list-style:none;
	font-size:18px;
	font-weight:bold;
	line-height:35px;
	text-align:center;
	border-right:1px solid #B50102;
	border-bottom:1px solid #B50102;
	color:#333;
	}

.precio{
	font-size:22px !important;
	font-weight:bold;
	color: #900 !important;
	background: #DCF9C1;
	}

.caracteristica{
	float:left;
	width:200px;
	}
	
.caracteristica_encabezado{
	background:#FCCA8F;
	font-size:18px;
	line-height:35px;
	font-weight:bold;
	border:none;
	padding-left:20px;
	color:#B50102;
	font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	border-bottom:#B50102 1px solid;
	}	
	
.caracteristica ul{
	margin:0;
	padding:0;
	}
	
.caracteristica ul li{
	list-style:none;
	font-size:14px;
	line-height:35px;
	padding-left:20px;
	border-right:1px solid #B50102;
	border-bottom:1px solid #B50102;
	color:#333;
	}
	
.c2{
	float:left;
	width:141px;
	text-align: center;
	}
	
.c2 ul{ 
	padding:0;
	margin:0;
	}
	
.c2 ul li{
	list-style:none;
	font-size:14px;
	color:#333;
	line-height:35px;
	text-align:center;
	border-bottom:1px solid #B50102;
	border-right:1px solid #B50102;
	}

.si{background:url(../images/si.png) no-repeat center;}
.no{background:url(../images/no.png) no-repeat center;}

ul.noboderRt li{
	border-right:none !important;
}

Ver ejemplo en línea