Cómo añadir bordes internos en una tabla con CSS

Cómo añadir bordes internos en una tabla con CSS

Cómo añadir bordes internos en una tabla con CSS

VALORACIÓN DEL ARTÍCULO:
5/5


Puede 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 la maquetación ya no es una buena práctica de diseño web porque han sido reemplazadas por estilos de maquetación CSS, pero las tablas siguen siendo la marcación correcta a utilizar para añadir datos tabulares a una página web.

Debido a que muchos profesionales de la web se alejan de las tablas pensando que no son más que problemas, muchos de esos profesionales tienen poca experiencia trabajando con este elemento HTML común, y luchan cuando tienen que añadir líneas internas a las celdas de una tabla en una página web.

Bordes de tabla CSS

Cuando utiliza CSS para añadir bordes a las tablas, sólo añade el borde alrededor del exterior de la tabla. Si desea añadir líneas internas a las celdas individuales de esa tabla, necesita añadir bordes a los elementos CSS interiores. Puede utilizar la etiqueta HR para añadir líneas dentro de celdas individuales.

Para aplicar los estilos cubiertos en este tutorial, necesita una tabla en una página web. A continuación, cree 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 añadir líneas interiores en la hoja de estilo.

Antes de empezar

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

  • Rodeando todas las celdas para formar una cuadrícula
  • Colocación de las líneas entre sólo las columnas
  • Justo entre las filas
  • Entre columnas o filas específicas.

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

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

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

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

Cómo agregar líneas entre sólo las columnas de una tabla

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

td, th {
border-left: sólido 1px negro;
} > } } } } } } } } } } } } }

Si no desea que aparezcan líneas verticales en la primera columna, agregue una clase a las celdas th y td . En este ejemplo, asumir una clase de no-border en esas celdas y eliminar el borde con una regla CSS. La clase HTML que utiliza es:

> 

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

.no-border {
border-left: none;
} > } } } } } } } } } } } } }

Cómo agregar líneas entre sólo 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 añadido a la hoja de estilo, como se indica a continuación:

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

> } } } } } } } } } } } } }

Para eliminar el borde de la parte inferior de la tabla, una vez más agregaría una clase a esa

de la etiqueta:

> 

Añada el siguiente estilo a su hoja de estilo:

.no-border {
fondo del borde: ninguno;
} > } } } } } } } } } } } } }

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

Si sólo desea líneas entre filas o columnas específicas, necesita utilizar 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 a partir de un CMS de algún tipo, esto puede no ser posible, pero si está codificando manualmente la página, puede agregar las clases apropiadas según sea necesario para lograr este efecto.

> 

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

> 

Luego, agregue el CSS a su hoja de estilo:

.border-side {
border-left: sólido 1px negro;
}
.fondo del borde {
fondo del borde: 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 que desee rodear con un borde:

> 

Luego agregue el siguiente CSS a su hoja de estilo:

.border {
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 fácil de hacerlo es con la etiqueta horizontal de la regla ( ).

Consejos útiles

Si nota huecos en los bordes, asegúrese de que el estilo de colapso de bordes esté colocado en la tabla. Añada lo siguiente a su hoja de estilo:

table {
colapso de bordes: colapso;
}

> } } } } } } } } } } } } }

Puede evitar todos los atributos y utilizar el atributo border en la etiqueta de la tabla. Tenga en cuenta, sin embargo, que este atributo, aunque no es obsoleto, es significativamente menos flexible que CSS, ya que sólo puede definir el ancho del borde y sólo puede tenerlo alrededor de todas las celdas de la tabla o ninguna.

Deja un comentario

TAMBIÉN TE INTERESA

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,

GoPro-HERO11

GoPro HERO11 Black: las nuevas cámaras para los creadores de contenido

La conocida marca de videocámaras GoPro ha lanzando tres nuevas especialmente concebidas para creadores. GoPro HERO11 llega en tres modelos para satisfacer las necesidades de todo tipo de perfiles y creadores de contenidos.   Índice de contenidos1 El sensor de mayor resolución hasta la fecha2 Las tres cámaras GoPro HERO112.1 Principales tecnologías en las tres

camara-motorola-edge-30-ultra

¿200 megapíxeles? Sí, es lo que tiene el nuevo motorola edge 30 ultra

El furor por los megapíxeles parece estar de vuelta en la fotografía de los smartphones, si bien hay expertos que mantienen que más MP no quiere decir que resulte en mejores fotografías. El nuevo motorola edge Ultra llega al mercado con una barbaridad inédita en el mundo de la telefonía. Cabe destacar también que otras

nuevo-apple-watch-ultra

Un reloj inteligente solo para los elegidos: Apple Watch Ultra

Apple ha lanzado en septiembre su apuesta más Premium en relojes inteligentes: el nuevo Apple Watch Ultra. Este nuevo dispositivo rompe con la línea de los anteriores, especialmente en lo que se refiere a la pantalla, e incluye prestaciones para deportes extremos. Sin duda es el reloj más ambicioso de su sector, tanto por lo