Usando la etiqueta div para crear tablas

Video: Tutorial básico de HTML desde cero - Video 17: Tablas y columnas

Creación de tablas puede ser propenso a errores y difícil usando las etiquetas HTML mayores. Además, demuestran inflexibles a veces. Es posible crear tablas usando otra técnica. Todo lo que necesita es una serie de etiquetas en cascada para realizar la tarea.

[© iStockphoto.com / Anton Cherstvenkov]

Muchos desarrolladores han utilizado tablas para todo tipo de tareas en el pasado. Por supuesto, no es el uso de tablas para mostrar los datos. Sin embargo, los arreglos tabulares también son útiles para la creación de formas para asegurar que los diversos elementos se alinean de una manera predecible. Este segundo uso de tablas es problemático porque confunde un poco de software, como los lectores de pantalla. El problema se convierte en uno de definir una página bien organizada sin crear problemas para la gente que lo lee.

El uso de etiquetas para crear una tabla hace posible que los espectadores puedan ver una tabla o una disposición lógica de los controles con la misma facilidad. Esta técnica también tiene la ventaja de no confundir a los lectores de pantalla y otro software.

Definir el código HTML para una tabla parece algo así como la creación de una tabla con las etiquetas de más edad, excepto que no tiene que preocuparse acerca de los arreglos impares de etiquetas arcanas para hacerlo. Aquí está el código HTML para una tabla que contiene un título, encabezados, y dos filas de contenido.

Esto es una mesa

Título 1

Video: crear pagina web con etiquetas div y estilos css

Título 2

rúbrica 3

Fila 1 Columna 1

Fila 1 Columna 2

Fila 1 Columna 3

Video: HTML: tablas

Fila 2 Columna 1

Fila 2 Columna 2

Fila 2 Columna 3

Video: HACER TU PAGINA EN DREAMWEAVER CON ETIQUETAS DIV PA(PARTE 1)

Observe que cada nivel se define mediante un nombre fácilmente reconocida, como la tabla, el título, el rumbo fila, y Cell. El uso de este método de nomenclatura hace que sea mucho más fácil de averiguar lo que se supone que cada nivel de la mesa para hacer. Usted puede encontrar muchas alternativas diferentes a este enfoque en línea, pero este enfoque básico, serán muy útiles.

El CSS para esta tabla utiliza unas pocas propiedades especiales y un poco de formato inteligente. Aquí está el CSS se utiliza para hacer este ejemplo funcional.

Observe el uso de la propiedad de presentación. Esta es la propiedad crucial para su mesa, ya que le dice al navegador cómo mostrar un elemento en particular. De lo contrario, no hay nada extraño de fuera de la normal en estos estilos. Se definen los atributos de texto que ayudan a los espectadores se diferencian varios elementos de la tabla. Las células se separan el uno del otro utilizando un borde simple. La siguiente figura muestra el aspecto que tendrá la tabla cuando se ve en un navegador.

Artículos Relacionados