Aprende a crear un bordo de táboas CSS en só cinco minutos
Pode ter oído que as táboas CSS e HTML non se mesturan. Isto simplemente non é certo. Si, usar táboas HTML para o deseño xa non é unha das mellores prácticas de deseño web, sendo substituído por estilos de deseño CSS, pero as táboas aínda son a marca correcta para usar para engadir datos tabulares a unha páxina web.
Desafortunadamente, porque moitos profesionais da rede afastáronse das mesas pensando que eran venenos, moitos deses profesionais teñen pouca experiencia traballando con este elemento HTML común e coa loita cando teñen que manexalos nunha páxina web. Por exemplo, se ten unha táboa nunha páxina e quere engadir liñas internas ás celas da táboa.
Bordos da táboa CSS
Cando usa CSS para engadir bordos ás táboas, só engade o bordo ao redor da parte exterior da táboa. Se quere engadir liñas internas ás celas individuais desta táboa, cómpre engadir bordos aos elementos CSS internos. Tamén pode usar a etiqueta HR para engadir liñas dentro de celas individuais.
Para aplicar os estilos cubertos neste artigo, evidentemente ten que ter unha táboa na súa páxina web. Debe crear unha folla de estilo como unha folla de estilo interna no encabezado do documento (probablemente só faga isto se o "sitio" é unha única páxina) ou unido ao documento como unha folla de estilo externa (isto é o que vostede fará que o seu sitio sexa de varias páxinas, o que lle permite o estilo de todas as páxinas dunha folla externa). Poñerás os estilos para engadir liñas interiores a esa folla de estilo.
Antes de comezar
Primeiro ten que decidir onde quere que aparezan as liñas na súa táboa. Ten varias opcións, incluíndo:
- Rodeando todas as celas para formar unha grade;
- Colocando as liñas entre só as columnas;
- Só entre as fileiras; ou
- Entre columnas ou filas específicas.
Tamén pode colocar as liñas en torno ás celas individuais ou dentro das celas individuais.
Como engadir liñas ao redor de todas as celas nunha táboa
Para engadir liñas ao redor de todas as celas da táboa, creando ese efecto similar á grilla, engade o seguinte na súa folla de estilo:
td, th {
borde: sólido 1px negro;
}
Como engadir liñas entre só as columnas nunha táboa
Para engadir liñas entre as columnas (isto crea liñas verticais que se executan de arriba a abaixo nas columnas da táboa), engade o seguinte na súa folla de estilo:
td, th {
fronteira esquerda: sólido 1px negro;
}
Entón, se non quere que aparezan na primeira columna, terá que engadir unha clase a esas celas th e td . Neste exemplo, supoñemos que temos unha clase de non-fronteira nesas celas e eliminamos o límite con esta regra CSS máis específica. Entón aquí está a clase HTML que usariamos:
class = "non-border">
E entón poderiamos engadir o seguinte estilo á nosa folla de estilo:
.no-border {
fronteira esquerda: ningún;
}
Como engadir liñas entre só as filas nunha táboa
Do mesmo xeito que engadir liñas entre as columnas, podes facelo con só un estilo sinxelo engadido á túa folla de estilo. O seguinte CSS engadirá liñas verticais entre cada fila da nosa táboa:
tr {
fronteira inferior: sólido 1px negro;
}
E para eliminar o bordo da parte inferior da táboa, volverá engadir unha clase a esa tr etiqueta:
class = "non-border">
Engade o seguinte estilo á súa folla de estilo:
.no-border {
fronteira inferior: ningún;
}
Como engadir liñas entre columnas ou filas específicas nunha táboa
Se só desexa liñas entre filas ou columnas específicas, necesitará usar unha clase nesas celas ou filas. Engadindo unha liña entre columnas é un pouco máis difícil que entre as filas porque ten que engadir a clase a cada cela desta columna. Se a túa táboa xérase automaticamente a partir dun CMS dalgún tipo , isto pode non ser posible, pero se está codificando a man a páxina, podes engadir as clases apropiadas como sexa necesario para lograr este efecto.
class = "border-side">
Engadindo liñas entre filas é moito máis sinxelo, xa que só podes engadir a clase á fila na que queres a liña.
class = "border-bottom">
A continuación, engade o CSS á súa folla de estilo:
.border-side {
fronteira esquerda: sólido 1px negro;
}
.border-bottom {
fronteira inferior: sólido 1px negro;
}
Como engadir liñas ao redor das celas individuais nunha táboa
Para engadir liñas ao redor das celas individuais, engade unha clase ás celas que quere un borde:
class = "border">
E engada o seguinte CSS á súa folla de estilo:
.border {
borde: sólido 1px negro;
}
Como engadir liñas dentro das celas individuais nunha táboa
Se desexa engadir liñas dentro dos contidos dunha cela, a forma máis sinxela de facelo é coa etiqueta de regras horizontais (
).
Consellos útiles
Se observas lagoas nos teus bordos, debes asegurarte de que o estilo de colapso de bordo estea configurado na táboa. Engade o seguinte na túa folla de estilo:
táboa {
colapso fronteirizo: colapso;
}
Pode evitar todo o CSS anterior e usar o atributo de bordo na súa etiqueta de táboa. Teña en conta, non obstante, que o seu atributo, aínda que non está obsoleto, é significativamente menos flexible que CSS, xa que só pode definir o ancho do borde e só pode telo en torno a todas as celas da táboa ou ningunha.