Tecnología

Inicio

Cómo agregar espacio para el borde y la parte izquierda de una tabla en HTML

July 21

Mediante el uso de hojas de estilo para posicionar objetos en una página Web, puede cambiar el diseño de forma rápida y sin tocar el código HTML que define su objeto. Tablas, por ejemplo, son útiles para la visualización de datos tabulares. Si no estilizar una mesa, se sienta en el borde izquierdo del navegador. Usted puede experimentar con diferentes estilos de diseño mediante el uso de CSS para agregar cualquier número de espacios para el borde izquierdo de la mesa.

Instrucciones

1 Abrir un documento HTML usando el editor de HTML o Bloc de notas.

2 Agregue el código que se muestra a continuación a la sección del cuerpo del documento:

<Table class = "addSpacesLeft">
<Tr>
<Td> A </ td>
<Td> B </ td>
</ Tr>
<Tr>
<Td> B </ td>
<Td> D </ td>
</ Tr>
</ Table>

Este código añade una etiqueta de "mesa" de la sección del cuerpo. Añadiendo esta etiqueta crea una tabla simple que contiene cuatro elementos. La etiqueta de la tabla hace referencia a una clase CSS llamada "addSpacesLeft."

3 Pegue el siguiente código CSS en la sección de la cabeza del documento:

<Style type = "text / css">
.addSpacesLeft
{Margin-left: 100px;}
</ Style>

Esta es la clase "addSpacesLeft". Tenga en cuenta que los nombres de clases CSS tienen puntos al comienzo de los nombres. Sin embargo, cuando hace referencia a la clase en el código HTML, como se muestra en el paso anterior, sin período aparece delante del nombre. Esta clase CSS tiene un atributo margin-left. El valor del atributo es 100px. Esto significa 100 píxeles. Dado que las referencias a las etiquetas de mesa esta clase, el margen izquierdo de la tabla aparecerá 100 píxeles desde el borde izquierdo del navegador.

Consejos y advertencias

  • En este ejemplo se utiliza un gran valor de 100px para el margen izquierdo de la mesa para demostrar el efecto. Utilizar cualquier número que desee añadir espacios para el borde izquierdo de la mesa. Cambia el valor a "8 píxeles," por ejemplo, y los navegadores colocar ocho píxeles antes borde izquierdo de la tabla.
  • Agregue la clase CSS "addSpacesLeft" a cualquier página Web que contiene las tablas. Después de añadir una referencia a esta clase de etiqueta "mesa" de un documento HTML, como se muestra en estos pasos, puede cambiar el número de espacios que aparecen antes de la mesa simplemente actualizando la clase CSS en lugar de cambiar el código HTML que define su mesa.