Obteniu informació sobre com crear una vora de la taula CSS en només cinc minuts
Potser heu sentit que les taules CSS i HTML no es barregen. Això simplement no és cert. Sí, l'ús de taules HTML per al disseny ja no és una pràctica de disseny web, havent estat reemplaçat pels estils de disseny de CSS, però les taules segueixen sent el marcat correcte per afegir dades tabulars a una pàgina web.
Desafortunadament, perquè tants professionals de la xarxa han distanciat de les taules pensant que són verí, molts d'aquests professionals tenen poca experiència treballant amb aquest element HTML comú i la lluita quan han de manejar-los en una pàgina web. Per exemple, si teniu una taula en una pàgina i voleu afegir línies internes a les cel·les de la taula.
Fronteres de la taula CSS
Quan utilitzeu CSS per afegir fronteres a taules, només afegeix el límit al voltant de l'exterior de la taula. Si voleu afegir línies internes a les cel·les individuals d'aquesta taula, heu d'afegir vora a l'interior dels elements CSS. També podeu utilitzar l'etiqueta HR per afegir línies a les cel·les individuals.
Per aplicar els estils que es detallen en aquest article, òbviament hauríeu d'haver una taula a la vostra pàgina web. A continuació, heu de crear un full d'estils com a full d'estil intern al capdavant del vostre document (probablement només ho farà si el vostre "lloc" és una sola pàgina) o adjunt al document com un full d'estil extern (això és el que us feu ho farà si el vostre lloc té diverses pàgines, cosa que us permetrà dissenyar totes les pàgines des d'un full extern). Poseu els estils per afegir línies interiors a aquest full d'estils.
Abans de començar
Primer cal decidir on voleu que apareguin les línies a la taula. Té diverses opcions, entre elles:
- Envoltant totes les cel·les per formar una graella;
- Posicionant les línies entre només les columnes;
- Només entre les files; o
- Entre columnes o files específiques.
També podeu situar les línies a les cel·les individuals o a les cel·les individuals.
Com afegir línies al voltant de totes les cel·les d'una taula
Per afegir línies al voltant de totes les cel · les de la taula, creant aquest efecte com a graella, afegiu el següent al vostre full d'estils:
td, th {
frontera: sòlid 1px negre;
}
Com afegir línies entre només les columnes d'una taula
Per afegir línies entre columnes (això crea línies verticals que s'executen de dalt a baix a les columnes de la taula), afegiu el següent al vostre full d'estils:
td, th {
frontera esquerra: sòlida 1px negre;
}
A continuació, si no voleu que apareguin a la primera columna, heu d'afegir una classe a aquestes cel·les th i td . En aquest exemple, suposem que tenim una classe de no-frontera en aquestes cel·les i eliminem la frontera amb aquesta regla CSS més específica. Així que aquí teniu la classe HTML que utilitzaríem:
class = "no-border">
A continuació, podríem afegir el següent estil al nostre full d'estils:
.no-border {
frontera esquerra: cap;
}
Com afegir línies entre només les files d'una taula
Igual que afegir línies entre columnes, podeu fer-ho amb només un estil senzill afegit al vostre full d'estils. El següent CSS afegiria línies verticals entre cada fila de la nostra taula:
tr {
frontera inferior: sòlid 1px negre;
}
I per eliminar la vora des de la part inferior de la taula, tornaria a afegir una classe a aquesta etiqueta:
class = "no-border">
Afegiu el següent estil al vostre full d'estils:
.no-border {
frontera inferior: cap;
}
Com afegir línies entre columnes o files específiques en una taula
Si només voleu línies entre files o columnes específiques, heu d'utilitzar una classe en aquestes cel·les o files. Afegir una línia entre columnes és una mica més difícil que entre files, ja que heu d'afegir la classe a totes les cel·les d'aquesta columna. Si la vostra taula es genera automàticament a partir d' un CMS d'algun tipus , pot ser que això no sigui possible, però si esteu codificant la mà la pàgina, podeu afegir les classes adequades segons sigui necessari per aconseguir aquest efecte.
class = "side border">
L'addició de línies entre files és molt més fàcil, ja que només podeu afegir la classe a la fila on voleu la línia.
class = "border-bottom">
A continuació, afegiu CSS al vostre full d'estils:
sidebord {
frontera esquerra: sòlida 1px negre;
}
.border-bottom {
frontera inferior: sòlid 1px negre;
}
Com afegir línies al voltant de les cel·les individuals d'una taula
Per afegir línies al voltant de cel·les individuals, afegiu una classe a les cel·les on voleu un límit:
class = "border">
A continuació, afegiu el següent CSS al vostre full d'estils:
.border {
frontera: sòlid 1px negre;
}
Com afegir línies dins de les cel·les individuals d'una taula
Si voleu afegir línies dins dels continguts d'una cel·la, la manera més senzilla de fer-ho és amb l'etiqueta de regla horitzontal (
).
Consells útils
Si observeu espais a les vostres vora, haureu d'assegurar-vos que l'estil de col · lapse de vora s'estableix a la taula. Afegiu el següent al vostre full d'estils:
taula {
border collapse: collapse;
}
Podeu evitar tots els CSS anteriors i utilitzar l'atribut de la vora a l'etiqueta de la taula. Tingueu en compte, però, que el seu atribut, encara que no està obsolet, és significativament menys flexible que CSS, ja que només pot definir l'amplada de la vora i només pot tenir-lo al voltant de totes les cel·les de la taula o cap.