Uso de CSS para agregar bordes internos en una tabla HTML

Es posible que hayas oído que las tablas CSS y HTML no se mezclan. Este no es el caso. Sí, el uso de tablas HTML para el diseño ya no es una práctica recomendada de diseño web, ya que han sido reemplazadas por estilos de diseño CSS, pero las tablas siguen siendo el marcado correcto para agregar datos tabulares a una página web.

Debido a que muchos profesionales de la web evitan las tablas pensando que no son más que un problema, muchos de esos profesionales tienen poca experiencia en trabajar con este elemento HTML común, y luchan cuando tienen que agregar líneas internas a celdas de tablas en una página web.

Bordes de tabla CSS

Cuando usa CSS para agregar bordes a las tablas, solo agrega el borde alrededor del exterior de la tabla. Si desea agregar líneas internas a las celdas individuales de esa tabla, necesita agregar bordes a los elementos CSS interiores. Puede usar la etiqueta HR para agregar líneas dentro de celdas individuales.

Para aplicar los estilos cubiertos en este tutorial, necesita una tabla en una página web. Luego, crea una hoja de estilo como una hoja de estilo interna en la cabecera de su documento (si está tratando con una sola página) o adjunta al documento como una hoja de estilo externa (si el sitio tiene varias páginas). Usted pone los estilos para agregar líneas interiores en la hoja de estilo.

Antes de que empieces

Decida dónde desea que aparezcan las líneas en la tabla. Tienes varias opciones, incluyendo:

• Rodeando todas las celdas para formar una grilla.
• Posicionando las líneas entre solo las columnas.
• Justo entre las filas
• Entre columnas o filas específicas.

También puede colocar las líneas alrededor de celdas individuales o dentro de celdas individuales.

Cómo agregar líneas alrededor de todas las celdas en una tabla

Para agregar líneas alrededor de todas las celdas de su tabla, creando un efecto de cuadrícula, agregue lo siguiente a su hoja de estilo:

td, th {borde: sólido 1px negro;}

Cómo agregar líneas entre solo las columnas en una tabla

Para agregar líneas entre las columnas para crear líneas verticales que se ejecutan de arriba a abajo en las columnas de la tabla, agregue lo siguiente a su hoja de estilo:

td, th {borde izquierdo: sólido 1px negro;}

Si no desea que aparezcan líneas verticales en la primera columna, agregue una clase a th y td Células. En este ejemplo, asuma una clase de Sin bordes en esas celdas y eliminar el borde con una regla CSS. La clase HTML que usas es:

class = "sin borde">

Luego, agregue el siguiente estilo a la hoja de estilo:

.Sin bordes {borde izquierdo: ninguno;}

Cómo agregar líneas entre solo las filas de una tabla

Al igual que con la adición de líneas entre las columnas, puede agregar líneas horizontales entre filas con un estilo simple agregado a la hoja de estilo, de la siguiente manera:

tr {borde inferior: sólido 1px negro;}

Para eliminar el borde de la parte inferior de la tabla, volvería a agregar una clase a esa

etiqueta:

class = "sin borde">

Agrega el siguiente estilo a tu hoja de estilo:

.Sin bordes {borde inferior: ninguno;}

Cómo agregar líneas entre columnas o filas específicas en una tabla

Si solo desea líneas entre filas o columnas específicas, necesita usar una clase en esas celdas o filas. Agregar una línea entre columnas es un poco más difícil que entre filas porque tiene que agregar la clase a cada celda de esa columna. Si su tabla se genera automáticamente desde un CMS de algún tipo, esto puede no ser posible, pero si está codificando manualmente la página, podría agregar las clases apropiadas según sea necesario para lograr este efecto.

class = "borde lateral">

Agregar líneas entre filas es más fácil porque puede agregar la clase a la fila en la que desea que se coloque la línea.

clase = "borde inferior">

Luego, agregue el CSS a su hoja de estilo:

lado de la fronteraborde izquierdo: sólido 1px negro;}.border-bottom {borde inferior: sólido 1px negro;}

Cómo agregar líneas alrededor de celdas individuales en una tabla

Para agregar líneas alrededor de celdas individuales, agregue una clase a las celdas sobre las que desea colocar un borde:

class = "border">

Luego agrega el siguiente CSS a tu hoja de estilo:

.frontera {borde: sólido 1px negro;}

Cómo agregar líneas dentro de celdas individuales en una tabla

Si desea agregar líneas dentro del contenido de una celda, la forma más sencilla de hacerlo es con la etiqueta de regla horizontal ().

Consejos útiles

Si observa huecos en los bordes, asegúrese de que el estilo de contracción del borde esté establecido en la tabla. Agregue lo siguiente a su hoja de estilo:

mesa {colapso de la frontera: colapso;}

Puede evitar todo el y usar el atributo de borde en su etiqueta de tabla. Sin embargo, tenga en cuenta que este atributo, aunque no está en desuso, es significativamente menos flexible que CSS, ya que solo puede definir el ancho del borde y solo puede tenerlo alrededor de todas las celdas de la tabla o no.