Cómo construir y definir una tabla básica para html5 y css3 páginas web basadas

A veces, te vas a encontrar los datos que se ajuste mejor en un formato de tabla en lugar de una lista. HTML5 es compatible con varias etiquetas de tabla para este tipo de trabajo. Aquí, se puede ver una tabla muy básico.

A veces, la mejor manera de mostrar los datos de una manera significativa es organizar en una tabla. HTML define una tabla con la etiqueta. La tabla contiene una serie de filas de la tabla (que se define con la etiqueta). Cada fila de la tabla puede consistir en una serie de datos de la tabla () o cabecera de la tabla (etiquetas).

Comparar la salida con el código para basicTable.html que lo crea:

basicTable.html

Una tabla básico

HTML superhéroes

HéroePoderJusticia
el HTMLatorcumplimiento de las normasDescuidado Boy Código
capitán CSSSuper-diseñoSeñor Desaprobados
Mujer navegadorMega-CompatibilidadFeo monstruo Código

La tabla HTML se define con el par. Se hace mucho sentido para sangrar y el espacio de su código cuidadosamente para que pueda ver la estructura de la tabla en el código. Simplemente echando un vistazo en el código, se puede adivinar que la tabla se compone de tres filas y cada fila se compone de tres elementos.

Video: Curso: Bases de HTML y CSS - 2. Estructura básica de un documento HTML

En un procesador de textos, por lo general crea una tabla en blanco al definir el número de filas y columnas, y luego llenarlo. En HTML, se define la fila de la tabla por fila, y los elementos de cada fila determinar el número de columnas. Es hasta usted para asegurarse de que cada fila tiene el mismo número de elementos.

Por defecto (en la mayoría de los navegadores, de todos modos), las tablas no muestran sus fronteras. Si quieres ver las fronteras de mesa básicos, puede activar el atributo de la tabla. (Un atributo es un modificador especial que puede adjuntar a algunas etiquetas.)

 

Esta etiqueta se crea una tabla y especifica que tendrá un borde de su tamaño. Si se omite el negocio, algunos navegadores muestran una frontera y algunos no lo hacen. Puede establecer el valor de frontera o a un número mayor. El número más grande hace una frontera más grande.

El establecimiento de un borde de la tabla es una buena idea porque no se puede contar con los navegadores para tener el mismo defecto. Además, el valor límite es siempre entre comillas. Con CSS se puede añadir bordes más complejos e interesantes de este atributo simple permite.

Cómo añadir su primera fila

Después de definir una tabla, es necesario agregar algunas filas. Cada fila se indica mediante un par.

Dentro del conjunto, necesita algunos datos de la tabla. La primera fila a menudo consiste en encabezados de tabla. Estas células especiales tienen un formato diferente para indicar que son etiquetas, en lugar de datos.

encabezados de la tabla tienen algún formato predeterminado para ayudarle a recordar que son cabeceras, pero se puede cambiar la forma de mirar. Puede cambiar la apariencia de la cabecera de la tabla en todo tipo de grandes maneras. Definir el encabezado de la tabla por lo que cuando se descubre el formato y decide hacer todo su chartreuse encabezados de la tabla, usted sabrá en qué parte del código HTML todos los encabezados de la tabla son.

Sangrar sus cabeceras en el interior del conjunto. Si la tabla contiene tres columnas, la primera fila podría empezar así:

   

Coloque el texto que desea se muestra en las cabeceras de tabla entre los elementos y. Los contenidos aparecen en el orden en que se han definido.

Encabezamientos no tienen que estar en la fila superior. Si quieres epígrafes de la izquierda, sólo hay que poner un par como el primer elemento de cada fila. Puede tener encabezados en la parte superior y la izquierda, si lo desea. De hecho, puede hacer que las partidas en cualquier lugar, pero por lo general tiene sentido poner encabezados solamente en la parte superior o hacia la izquierda.

Cómo hacer que sus filas de datos

El siguiente paso es crear otra fila. Las filas de datos son al igual que la fila partida, excepto que utilizan pares, en lugar de dos, para contener los elementos de datos. Por lo general, una tabla de tres columnas tiene filas en blanco que se ven así:

Coloque los elementos de datos dentro de los segmentos y ya está listo para ir.

¿Cómo construir tablas en el editor de texto

Algunas personas piensan que las tablas son una buena razón para usar WYSIWYG (lo que ves es lo que obtienes) editores porque piensan que es difícil crear tablas en modo texto. Hay que planificar un poco, pero es realmente muy rápida y fácil de construir una tabla HTML sin necesidad de herramientas gráficas si usted sigue este plan:

  1. Planificar el futuro.

    Saber cuántas filas y columnas estarán en la mesa. Bosquejar primero en papel podría ser útil. Cambiar el número de filas más adelante es fácil, pero cambiando el número de columnas puede ser un verdadero dolor de cabeza después de una parte del código se ha escrito.

  2. Crear las partidas.

    Video: #4 Tutorial HTML (XHTML) Basico: ¿Como crear tabla? (Basica)

    Si usted va a comenzar con una tabla estándar rúbricas-on-top, empezar por la creación de la fila de encabezado. Guardar, comprobar y validar. Usted no quiere errores de multiplicarse cuando se agrega más complejidad. Esta fila de título indica el número de columnas que necesita.

  3. Construir una fila vacía de la muestra.

    Hacer una fila de la muestra con el número correcto de elementos con un par por línea. Construir un conjunto y utilizar copiar y pegar para copiar esta celda de datos tantas veces como sea necesario. Asegúrese de que el número de pares es igual al número de conjuntos en la fila de encabezado.

  4. Copiar y pegar la fila vacía para hacer tantas filas como sea necesario.

  5. Guardar, ver y validar.

    Sé que todo se ve bien y valida adecuadamente antes de poner mucho esfuerzo en la adición de datos.

  6. Rellenar la tabla con los datos que necesita.

    Ir fila por fila, la adición de los datos entre los pares.

  7. Probar y validar de nuevo para asegurarse de que no se rompe accidentalmente algo.

Artículos Relacionados