Deshacerse de espacios en tablas HTML

click fraud protection

Si usa tablas para el diseño de la página (un no-no en XHTML), es probable que experimente la desagradable adición de espacio adicional en sus diseños. Para solucionar este problema, debe verificar tanto la definición de la tabla HTML como las especificaciones de cualquier hoja de estilo que gobierne.

Definición de tabla HTML

El HTML etiqueta para tablas de forma predeterminada no controla algunos requisitos de espacio. Verifique tres cosas sobre el mesa etiqueta dentro de su documento HTML:

  1. ¿Su tabla tiene el atributo de relleno de celdas establecido en 0?
    1. cellpadding = "0"
  2. ¿Su tabla tiene el atributo de espacio de celdas establecido en 0?
    1. espacio de celdas = "0"
  3. ¿Hay espacios antes o después de su contenido y las etiquetas de la tabla?

El número 3 es el truco. Muchos Editores HTML Me gusta tener el código espaciado, para que sea fácil de leer. Pero muchos navegadores interpretan esas pestañas, espacios y retornos de carro como espacio adicional deseado dentro de sus tablas. Elimine los espacios en blanco que rodean sus etiquetas y tendrá tablas más nítidas.

instagram viewer

Hojas de estilo

Sin embargo, puede que no sea el HTML el que esté desactivado. Hojas de estilo en cascada controle algunos atributos de visualización de las tablas y, según la página, es posible que haya agregado o no deliberadamente CSS específico de la tabla en primer lugar.

Escanee el archivo CSS gobernante en busca de cualquiera de los siguientes valores dentro del mesa, th, o tdpropiedades y ajuste según sea necesario:

  • frontera: Especifica los atributos de una tabla o borde de celda
  • colapso de la frontera: Trata los bordes adyacentes como uno solo para evitar duplicar los anchos de los bordes.
  • relleno: Ofrece espacio en blanco, en píxeles, alrededor de cada celda.
  • texto alineado: Determina el alineación del texto dentro de la celda
  • espaciado de bordes: Establece el espacio entre celdas, en píxeles

Alternativas

Aunque todavía puede usar tablas HTML (el estándar está bien establecido y es compatible universalmente en la actualidad navegadores), la mayoría de los diseños web receptivos modernos utilizan hojas de estilo en cascada para colocar elementos en una página. Las tablas todavía tienen sentido para su propósito original de mostrar datos tabulares, pero para organizar el diseño y el contenido de una página, es mucho mejor usar el diseño CSS.

instagram story viewer