Tecnología

Inicio

Cómo hacer una tabla de comparación CSS

November 28

Cómo hacer una tabla de comparación CSS


tablas de comparación son una manera limpia y elegante para presentar información sobre un servicio, producto o plan que permite al espectador a tomar decisiones o hacer compras de forma rápida. Hoy en día, las etiquetas de HTML 5 se pueden utilizar en combinación con listas y DIVs (<div> tags) en lugar de utilizar tablas, que tienen una estructura más rígida y estática. clases CSS se utilizan para determinar la posición de cada elemento DIV y lista, y de peinar los títulos y valores. Hay una variedad de maneras de crear una tabla de comparación utilizando CSS y ninguno de ellos es mejor o peor que otro. Sin embargo, si desea que cada columna para que sea interactivo, el método más eficaz es el uso de DIVs estilo.

Instrucciones

1 Abra el editor HTML y crear un nuevo archivo llamado "chart.html." Este archivo se mantenga la estructura y el contenido de su tabla de comparación. Crear un segundo archivo nuevo y lo llaman "style.css". Este archivo tendrá el CSS que controla el diseño y el aspecto de su gráfico. Este código puede después ser añadido a la hoja de estilo principal de su sitio web o mantenerse separada. Tu decides. Guarde ambos archivos a una nueva carpeta, como "MyChart."

2 Eliminar cualquier contenido existente de su documento HTML que pueden haber sido añadidas por el editor. Introduzca el siguiente código para crear una cabecera de HTML 5 para el documento:

<! DOCTYPE html>
<Html>
<Head>
<Charset meta = "UTF-8" />
<Title> Su título </ title>
<Link href = "style.css" rel = "stylesheet" type = "text / css" />
</ Head>

Reemplazar "Su título" con el título deseado de su carta y asegurar la ruta a su style.css es correcta.

3 Introduzca una abertura "<body>" etiqueta. A continuación, introduzca las etiquetas de apertura para comenzar su primera columna. Los siguientes ejemplos utilizan las etiquetas HTML5 "artículo" y "cabecera" para definir cada columna como una pieza separada del contenido.

<Div id = "Tabla">
<Artículo>

&lt;header>
&lt;h1>Option One&lt;/h1>
&lt;/header>
&lt;section>

Reemplazar "Opción uno" con su nombre de rumbo deseado, lo que podría ser algo así como "Plan Básico" o "competidor".

4 Introduce el código HTML para su lista de opciones o valores. Serán necesarios tantos filas para dar cabida a los valores máximos, incluso si no se utilizan en cada columna, por ejemplo, si "Opción 1" tiene sólo cuatro beneficios o valores, pero "Opción 3" tiene diez, usted necesitará por lo menos diez filas. Esto se logra mediante el uso de una lista desordenada:

<Ul>
<Li> Beneficio 1 </ li>
<Li> <div class = "check"> </ div> </ li>
</ Ul>

Sólo tendría que duplicar el "<li> Beneficio 1 </ li>" tantas veces como sea necesario, cambiando el contenido de forma adecuada. El contenido puede ser texto, imágenes o enlaces. Para evitar la duplicación de las etiquetas de imagen, utilice una clase DIV con un fondo de estilo en su lugar, como en el segundo ejemplo. Usted tendrá que cerrar su sección en este punto mediante la introducción de la "</ section>" etiqueta.

5 Introduzca su código de pie debajo de la sección cerrada. El pie de página es un lugar apropiado para poner su precio, un selecto o "comprar ahora", o ambas cosas. Usando la etiqueta "pie" es un acceso directo en HTML5 que evita la creación de una clase especial de contenedores, y en su lugar le permite crear un estilo uniforme que se puede aplicar a cada "pie" de cada columna. Por ejemplo:
<Pie de página>

&lt;div class=&quot;price&quot;>

<P> <strong> $ 45 </ strong> </ p>

&lt;p>&lt;a class=&quot;button&quot; href=&quot;#&quot;>Buy Now&lt;/a>&lt;/p>
&lt;/div>

</ Pie de página>

Cerca de su columna mediante la adición de la "</ Article>" etiqueta después de "</ pie de página>".

6 Copiar toda la sección de artículos, comenzando con "<artículo>," y pegar abajo "</ Article>" para crear columnas adicionales. Los números impares funcionan mejor si va a hacer hincapié en una columna específica. Cuando haya añadido el número deseado, añadir las etiquetas de cierre para su DIV gráfico, el cuerpo, y el documento:

</ Div>
</ Body>
</ Html>

7 Crear estilos para los elementos básicos tales como enlaces, etiquetas de encabezado, párrafos y el botón, si se utiliza. Probar el documento HTML en el navegador durante todo el proceso para ver los efectos de sus opciones de estilo y ajustar según sea necesario. Añadir estilos para su cuadro que comienza con la clase "tabla". Esta clase le afecta todo por debajo de ella, por lo que este es un lugar apropiado para definir tipos de letra, colores, y la anchura total de la tabla. El siguiente ejemplo asume que el gráfico se colocó en una página de ancho completo:

gráfico

{
font-family: Arial, sans-serif;
font-size: 12px;
color: # 333333;
Ancho: 960;
padding: 40px 0; // El espacio entre el contenido y el contenido gráfico de límite de área de la página.
margin: 0 auto; // Centros de la tabla en la página.
Limpia los dos; // Se asegura de la tabla se encuentra en su propia línea si hay otros DIVs que había antes de él en la página.
}

8 Crear un estilo para su artículo, o columnas de tabla. Para obtener cada columna para sentarse uno junto al otro, debe utilizar "float: left". El resto del estilo depende de usted. En el siguiente ejemplo, cada artículo se le dará el mismo color de fondo por defecto y una frontera.

Artículo gráfico

{
flotador izquierdo;
margin: 0;
background-color: #ffffff;
frontera: 1px solid # e5e5e5;
}

9 Repita este proceso para agregar estilos para su cabecera, pie de página y sección. El estilo de cabecera debe definir al menos una altura y posición de "relativa". El pie de página debe definir un "min-height" y la alineación del texto del "centro". Para distribuir contenido de la columna de forma homogénea en la tabla, no defina anchos. Por ejemplo:

cabecera gráfica

{
min-height: 101px;
position: relative;
background: # 373737 URL ( "../ images / headerbg.jpg") 0 0 repeat-x;
border-bottom: 1px solid # 363636;
}

gráfico de pie de página

{
border-top: 1px sólidos # f5f5f5;
border-left: 1px solid # B0B0B0 \ 9;
min-height: 70px;
text-align: center;
background: # c4c4c4 URL ( "../ imágenes / footerbg.jpg") 0 0 repeat-x;
}

10 El estilo de su lista de artículos de "Li". Estos artículos deben tener al menos relleno y un valor de altura:

carta ul li

{
padding: 13px 0;
min-height: 24px;
}

11 Después de estilos individuales, introduzca una clase combinada para definir los estilos compartidos por todos los elementos contenedores. El valor más importante es "display: block", que permite que el elemento completo para tomar una acción y no sólo el texto dentro. Por ejemplo:

Artículo gráfico, de gráfico, encabezado diagrama, pie de página, tabla div, p diagrama, un gráfico ul, tabla .button

{
bloqueo de pantalla;
padding: 0;
margin: 0;
list-style: ninguna importancia;
esbozar: ninguno;
}

Consejos y advertencias

  • Resalte un servicio o producto específico mediante la creación de una clase de artículo especial que utiliza la deserción sombras, bordes, efectos hover o texto en negrita. Cuando se aplica la clase a una etiqueta de artículo, los estilos asociados añadirán énfasis al elemento que puede influir en las decisiones de compra.
  • Crear clases especiales para mostrar los iconos junto a una lista de artículos donde se utiliza la clase, tales como "#chart ul li.star" o "#chart ul li.checked." Asignar a cada clase especial de una imagen de fondo con una alineación a la izquierda y agregar relleno para mantener el texto de la superposición.