Haciendo Web

Servicios online como Compare Ninja, permiten crear fácilmente tablas comparativas con HTML y CSS. Los desarrolladores, pueden crear su propia implementación con jQuery, siguiendo el tutorial que publicó Chris Coyier.

Como todo desarrollo con jQuery, es sencillo, pero también elegante.

Implementación

Para comenzar hay que enlazar los archivos CSS y JS:

<link rel='stylesheet' type='text/css' href='css/style.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='js/example.js'></script>

Recuerda que puedes descargar jQuery desde nuestra sección de utilidades.

En el archivo example.js está el siguiente código que es el encargado de darle la apariencia a la tabla comparativa:

$(function() {
var numCols = $("colgroup").length,
featuredCol;
// Zebra striping
$("tr:odd").addClass("odd");
$("tr:last").addClass("final-row");
// Figure out which column # is featured.
$("colgroup").each(function(i) {
if (this.id == "featured") featuredCol = i+1;
});
// Apply classes to each table cell indicating column
// Also applies classes if cell is right or left of featured column
$("td, th").each(function(i) {
$(this).addClass("table-col-" + ((i % numCols) + 1));
if (((i%numCols)+1) == (featuredCol-1)) $(this).addClass("leftOfFeatured");
if (((i%numCols)+1) == (featuredCol+1)) $(this).addClass("rightOfFeatured");
});
});

Luego el código HTML que implementa la tabla:

<table id="feature-table">
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup id="featured"></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th id="header-basic"><span> Basic</span> <a href="#">Sign Up</a></th>
<th id="header-plus"><span> Plus</span><a href="#">Sign Up</a></th>
<th id="header-premium"><span> Premium</span><a href="#">Sign Up</a></th>
<th id="header-pro"><span>0 Pro</span><a href="#">Sign Up</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>50 pages</td>
<td>75 pages</td>
<td>Unlimited</td>
<td>Unlimited</td>
</tr>
<tr>
<td>3 users</td>
<td>5 users</td>
<td>10 users</td>
<td>Unlimited</td>
</tr>
<tr>
<td>10 Sites</td>
<td>25 Sites</td>
<td>100 Sites</td>
<td>Unlimited</td>
</tr>
<tr>
<td>50 MB</td>
<td>250 MB</td>
<td>1 GB</td>
<td>5 GB</td>
</tr>
<tr>
<td>included</td>
<td>included</td>
<td>included</td>
<td>included</td>
</tr>
<tr>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-x.png" alt="no" /></td>
<td><img src="images/icon-check.png" alt="yes" /></td>
</tr>
<tr>
<td><a href="#">Sign Up</a></td>
<td><a href="#">Sign Up</a></td>
<td><a href="#">Sign Up</a></td>
<td><a href="#">Sign Up</a></td>
</tr>
</tbody>
</table>
</div>

Como les había comentado, crear una tabla comparativa es muy sencillo con jQuery.

Notas finales:

En la página hay un demo online y también la versión para descargarlo y correrlo localmente en el navegador web sin necesidad de montarlo en un servidor web.

Cuando analicen el código del demo, notarán un línea adicional que omití, debido a que se trata de un hack para las versiones antiguas de Internet Explorer.

Website: css-tricks.com/feature-table-design

Fuente: http://pixelcoblog.com