CSS: disseny de la taula. exemples de registre

Fer taules amb CSS - de classe interessant i responsable. Aproximació a aquest negoci necessita de manera competent, amb coneixement de tots els estils possibles. A més, cal posseir un sentit de bellesa per tal de no espantar als seus visitants creativitat.

Les taules poden transformar gairebé tot. Bell disseny implica l'ús de CSS límits taules de disseny, fons de la taula, fons de la cel·la, la bretxa entre ells i més. Penseu el més bàsic.

vora de la taula

CSS disseny de l'estil de la taula sempre implica un joc amb una vora (marc). Totes les taules per defecte no són contorns marc. És a dir, és igual a 0 píxels. Però això pot ser corregit per la frontera propietat.

Es pot especificar el marc exterior per a tota la taula:

taula {border: 3px sòlid negre; }

Gràcies a aquesta línia a totes les taules al lloc que utilitza aquest estil és el marc negre. Recordeu que només la vora en les vores, però no dins de la taula. Per a les línies cel·lulars i el marc s'especifiqui el contrari.

º, td {border: 3px negre sòlid;}

El gruix i color, es pot especificar qualsevol. Recordeu que els límits no es dupliquen quan s'empalmen les cèl·lules.

La paraula indica un registre continu sòlid. Podeu especificar altres valors.

s'usa més comunament marc sòlid, com sembla més atractiu i no distreure l'atenció del contingut principal del lloc.

propietat border pot especificar també en el tauler. El límit només es pot ajustar per a la part superior, inferior, esquerre o dret. A causa de que en alguns casos no és una opció viable amb el marc per a tota la taula alhora.

taula {border-top: 1px solid vermell; }

Per tant es pot establir el marc per a la part superior de la taula única. Igual que en qualsevol altra part, en lloc de només la part superior d'escriptura: dreta, esquerra o inferior.

capçalera de la taula

capçalera de la taula es pot especificar mitjançant l'etiqueta . Aquesta etiqueta pot estar en el CSS per registrar una gran quantitat de propietats per a l'ajust fi. El disseny de la taula CSS és bo perquè és possible maniobrar els elements de la manera que desitgi.

Aquest títol es mostra de la mateixa manera com un estàndard en els llibres (com "Taula 1").

Podeu especificar la ubicació del costat del subtítol del títol i la propietat (amunt o avall). Alineació de l'esquerra o la dreta es defineix per la propietat text-align.

quadres de dades

Antecedents de la taula pot ser de qualsevol color o patró. Color: estableix una propietat background-color. Els noms de les propietats totalment consistents amb els usos en la parla. Facilita l'emmagatzematge moltes vegades.

El color es pot especificar com el nom i diferents codificacions. A més, pot especificar el següent:

• Transparent - transparent.
• Heretar - color és el mateix que el de l'element pare.
• Inicial - per defecte.

Opció amb la transparència es pot utilitzar en els casos en què totes les taules en el text a l'arxiu CSS es realitzen en un sol color, però en aquest cas no és necessari.

A més, el fons pot ser una imatge. Per això, en la propietat background-imatge d'estil prescrit. La ruta és la següent:

url ( 'URL')

La ruta a l'arxiu pot ser relativa o absoluta.

farciment més complicada es pot fer amb un gradient:

• lineal en gradient ();
• radial-gradient ();
• repetir - gradient lineal () i repetint-radial-gradient de () - gradient repetit.

de fons de cel

A més d'un fons, en general, es pot especificar un fons de ratlles en columnes o files. Per al registre de la propietat s'utilitza molt sovint, a causa de la separació visual de les línies més fàcil de llegir la informació.

A més de l'alternança, i pot especificar el número d'una columna o fila en particular. Per exemple així:

• tr: nth-child (fins i tot) {...} - especificar entrellaçat;
• tr: nth-child (1) {...} - indicació de les propietats d'una fila determinada;
• td: nth-child (fins i tot) {...} - una indicació de columnes alternes;
• td: nth-child (1) {...} - una indicació de les propietats d'una columna particular.

A més dels números de seqüència i es poden especificar - la primera (td: first-child) o l'última (td: last-child).

La bretxa entre les cèl·lules

En CSS, disseny de la taula li permet eliminar els espais entre les cèl·lules. Per defecte són. Per exemple, si s'estableix el marc en la taula sense ajustar la distància entre els límits, que estarà aquí aquest resultat.

D'acord, no es veu molt bé i no és convenient llegir. Els usuaris tindran l'ondulació als ulls a causa d'això. Eliminar aquestes deficiències poden ser escrivint només una línia d'aquest tipus en l'estil de taula:

border-collapse: col·lapse

Però també passa que la distància, per contra, s'ha d'augmentar. A més, la mida de les bretxes es pot especificar com entre columnes i entre les línies. Per indicar que un valor (en lloc col·lapse):

border-collapse: separate

No obstant això, tal acció indicarà que cal separar les cèl·lules. Com era la seva banda, s'indica propietat addicional:

espaiat de vora: 20 píxels.

Per especificar una distància diferent entre les files i columnes, indica dues coses:

espaiat de vora: 10px20px.

La diferència en els navegadors

Recordeu que en el CSS taules de disseny poden ser diferents, depenent del navegador. Especialment dolent és el cas de les versions anteriors, que les innovacions en CSS no és compatible.

L'anterior és un exemple de gruixos marc a valors digitals.

Per a aquest exemple, el gruix dels marcs per a les constants.

estils de vora també difereixen en gran mesura.

Per tant, el desenvolupament sempre veure el resultat en diferents navegadors.

En CSS taules de disseny recomanats per comprovar el tipus de navegador. Particularment gran problema solia ser per als usuaris amb versions anteriors d'Internet Explorer.

Molt desenvolupadors avançats poden, depenent del navegador per connectar-se completament diferents arxius CSS. I algú fa una comprovació en cada un o alguns estil particular (classe).

sorgeixen la majoria dels problemes de les ombres.

CSS: Exemples de format de taula

El registre pot ser molt variada. Tot depèn de tot el lloc i el seu disseny. Tots han de combinar-se i varietat de colors. També fa un gran desenvolupador de paper i sabor. Sentit de la bellesa és tot diferent.

Li donem alguns exemples de les diferents taules. La figura anterior mostra l'ús de la inclinació i el joc amb el color de fons i la vora.

Molts serà interessant exemple de bell disseny net que no talli els usuaris dels ulls. Aquesta realització és adequada en gairebé qualsevol situació.

Les vores es poden fer arrodonida. Es veu bastant bé.

conclusió

Com es pot veure, per l'aparença de les taules en el CSS hi ha moltes eines. Cada paràmetre és també una gran quantitat d'opcions de valor. Si utilitza tot d'una vegada, pot crear obres mestres. Sobretot si ho fa el disseny adaptable per a tots els navegadors.

El més important en el disseny - no s'excedeixi amb efectes. Tot s'ha de fer amb moderació. Al principi, la disposició agrada experimentar i utilitzar tot el seu coneixement immediatament. Com a resultat de la taula són propietats sobresaturats. Intenta evitar aquests errors.

D'altra banda, alguns paràmetres poden interferir entre si. Per exemple, no hi ha necessitat d'especificar el color de fons de la taula, mentre que si encara es fixa la imatge de fons, que es superposaran el color especificat.