Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Diseño de tablas de rayas de cebra con CSS

Recientemente pasé un poco de tiempo en el sitio web OneHundredPushups, y el aspecto del sitio que más me llamó la atención (aparte de la ninja-girl en la página principal) fue las mesas con rayas de cebra esparcidas por todas partes. (Para aquellos que no lo saben, las tablas de rayas de cebra se refieren a fondos de colores alternos en filas de tablas, a la iTunes). Los estudios han demostrado que hay (o al menos puede haber) un ligero aumento del rendimiento asociado con las tablas de rayas de cebra (o en menos no hay una disminución), y que la mayoría de los usuarios prefieren las rayas de cebra a las tablas con líneas tradicionales.
Pensé que las tablas en OneHundredPushups estaban bastante bien hechas ( échale un vistazo aquí ), pero una mirada al código me mostró que el desarrollador había puesto más trabajo del necesario para crear sus rayas. Aquí, te mostraré una manera fácil de crear una tabla como la de la imagen de arriba (o en la página de ejemplo aquí ) que no requiere que te metas con tu XHTML; de hecho, puedes aplicar esto fácilmente a tablas ya en su sitio web!
Por supuesto, antes de que podamos sumergirnos en el CSS, necesitaremos una tabla para diseñar. El mío se parece a esto:
<table cellpadding = "0" cellspacing = "0">
 <tr>
  <th> Estado </th>
  <th> Fecha de la encuesta </th>
  <th>% Demo de votación. </th>
  <th>% Voto GOP </th>
 </tr>
 <tr>
  <td> AR </td>
  <td> 10/27 </td>
  <td> 44 </td>
  <td> 54 </td>
 </tr>
 <tr>
  <td> AZ </td>
  <td> 10/23 </td>
  <td> 41 </td>
  <td> 49 </td>
 </tr>
 ... y así ...
</table>
Como puede ver, no es nada fuera de lo común. He utilizado los atributos de espaciado de celdas y relleno de celdas de la vieja escuela solo para garantizar un tratamiento constante en todos los navegadores. Y de lo contrario, estoy usando una etiqueta <th> o cuatro para distinguir mis encabezados de tabla del resto de mi código. De lo contrario, solo tenemos filas y celdas en abundancia. Notarás que no hay una sola clase o ID presente aquí (aunque si solo quisiera diseñar algunas de las tablas de mi sitio, probablemente les daría a las que tengan el estilo un nombre de clase específico).
A continuación, echemos un vistazo a los estilos básicos de CSS que estoy usando:
mesa {
 ancho: 100%;
 borde: 1px sólido #cef;
 alinear texto: izquierda; }
th {
 peso de fuente: negrita;
 color de fondo: #acf;
 borde inferior: 1px sólido #cef; }
td, th {
 acolchado: 4px 5px; }
Establecí el ancho de la tabla al 100% para evitar que se contraiga a su tamaño mínimo (el comportamiento predeterminado), luego le di un borde azul pálido alrededor del exterior. También configuré la alineación del texto en toda la tabla a "izquierda"; esto es para evitar que los encabezados de la tabla se centren, que es el valor predeterminado. Prefiero que mis encabezados estén alineados con mi contenido, pero su kilometraje puede variar.
Cuando se trata de los encabezados, hice un pequeño estilo: les di un color de fondo (un poco más oscuro que mi borde), en negrita el texto y le di al borde de los encabezados un borde que coincide con el borde alrededor toda mi mesa
Finalmente, solo estoy agregando un poco de relleno a los interiores de las celdas de la mesa, para darles un poco de espacio para respirar. Personalmente, creo que un uso apropiado del espacio blanco (o al menos negativo) puede ser tan crítico para la legibilidad como las rayas de cebra, ¡tal vez alguien más inclinado estadísticamente que yo debería investigar eso!
Esos estilos nos dan nuestro diseño de tabla básico, que se parece a esto:
Entonces, ¿cómo obtenemos las filas alternas? Para eso, estoy creando una nueva clase en mi CSS, específicamente para las filas impares (es decir, no pares) de la tabla:
.impar {
 color de fondo: #def; }
.odd td {
 borde inferior: 1px sólido #cef; }
Esta clase, una vez aplicada a filas alternas de mi tabla, haría que cada una de las otras filas ganara un color de fondo azul pálido y un borde inferior ligeramente más oscuro. Dado que este estudio de A List Apart por Jessica Enders sugirió que alternar filas de colores y subrayados eran dos de las formas más atractivas estéticamente para presentar datos tabulares, pensé ... ¿por qué no usar ambos?
Ahora, si quisiera, todo lo que tendría que hacer es volver a través de mi HTML y aplicar esta clase a filas alternas en mis tablas, como lo han hecho las personas de OneHundredPushups. Sin embargo, notará que mi código anterior no tiene ninguna clase de CSS. Eso es porque prefiero trabajar de manera más inteligente cada vez que tengo la oportunidad. En lugar de volver a mi HTML, voy a buscar JavaScript (específicamente, jQuery ) para hacer mi trabajo pesado por mí.
Para aplicar nuestra clase automáticamente, todo lo que necesito jQuery es esto:
$ (documento) .ready (función () {
 $ ("tr: impar"). addClass ("impar");
});
En términos simples, este pequeño fragmento dice: “una vez que el documento se haya cargado, recorra la página, encuentre cada fila de tabla 'impar' y dele una clase de 'impar'”. Entonces nuestro CSS toma el control y realiza el descanso. Ah, y para que conste, también podrías escribir una segunda regla como esta:
$ ("tr: even"). addClass ("even");
Lo que haría exactamente lo mismo que arriba, solo lo aplicaría a las filas "pares" de la tabla. Y para que el comportamiento de este script no lo tome desprevenido, es bueno saber de antemano que las pseudoclases: impar e incluso par comienzan a contar en cero, no en una. Entonces, la primera fila de su tabla es, de acuerdo con jQuery, la fila "0", y por lo tanto es par.
¡Y ahí lo tienes! Puedes ver todo en acción aquí. Y ahora, sal y haz de la web un lugar más hermoso (o al menos rayado).

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas