CSS: deseño da táboa. exemplos de rexistro

Facendo táboas con CSS - de lección interesante e responsable. Visión para esta empresa ten con competencia, co coñecemento de todos os estilos posibles. Ademais, é necesario ter un sentido de beleza para non asustar os visitantes creatividade.

As táboas poden transformar case todo. fermoso deseño implica o uso de límites CSS táboas de deseño, fondo da táboa, fondo da cela, a distancia entre eles e moito máis. Considere o máis básico.

borde da táboa

CSS deseño de estilo de táboa sempre implica un xogo con un borde (cadro). Todas as táboas estándar non están contornos cadro. É dicir, é igual a 0 píxeles. Pero isto pode ser modificado pola fronteira propiedade.

Pode especificar o marco externo para toda a táboa:

mesa {fronteira: 3px sólido negro; }

Grazas a esta liña en todas as táboas no sitio que usa este estilo é marco negra. Teña en conta que só a fronteira nos bordos, pero non dentro da táboa. Para as liñas de células e armazón doutro xeito especificado.

th, td {border: negro sólido 3px;}

O espesor e cor, pode especificar calquera. Teña presente que os límites non son dobrados cando splicing células.

A palabra denota un rexistro continuo sólida. Pode especificar outros valores.

que é máis comunmente usado estrutura sólida, como parece máis atractivo e non desviar a atención do contido principal da páxina.

propiedade border tamén pode estar na tarxeta. O límite só se pode definir a parte superior, inferior, esquerda ou dereita. Porque nalgúns casos, non é unha opción viable coa estrutura para a táboa enteira dunha soa vez.

mesa {border-top: 1 px sólido vermello; }

Así, pode definir o marco para o cumio da táboa só. Do mesmo xeito que todos os outros partidos, no canto de escribir só top: dereita, esquerda ou inferior.

cabeceira da táboa

cabeceira da táboa pode ser determinado mediante a etiqueta . Esta etiqueta pode ser en CSS para rexistrar unha morea de propiedades para axuste fino. O deseño da táboa CSS é bo porque é posible manobrar os elementos de maneira que sexa.

Este título é presentado do mesmo xeito como un estándar en libros (como "Táboa 1").

Pode especificar a localización da lenda do lado do título e propiedade (superior ou inferior). Aliñar á esquerda ou á dereita se define pola propiedade text-align.

mesas fondo

Fondo da táboa pode ser de calquera cor ou patrón. Cor defínese unha propiedade background-color. Os nomes das propiedades totalmente coherentes cos usos no discurso. El facilita o almacenamento miúdo.

A cor pode ser indicado como o nome, e codificacións distintas. Ademais, pode especificar o seguinte:

• Transparente - transparente.
• Herdar - cor é o mesmo que o do elemento pai.
• Inicio - patrón.

Opción con transparencia pode utilizarse en caso de que todas as táboas no texto no ficheiro CSS son feitas nunha cor, pero neste caso non é necesario.

Ademais, o fondo pode ser unha imaxe. Para iso, no estilo prescrito propiedade background-image. O camiño é así:

URL ( 'URL')

O camiño para o arquivo pode ser relativo ou absoluto.

recheo máis complicada se pode facer cun gradiente:

• lineal de gradiente ();
• radial de gradiente ();
• repetindo lineal de gradiente () e repetíndose radial de gradiente () - gradiente repetido.

móbil fondo

Ademais dun fondo en xeral, pode especificar un fondo listrado en columnas ou liñas. De rexistro da propiedade é usada con moita frecuencia, porque a separación visual das liñas máis fácil de ler a información.

Ademais da alternancia, e pode especificar o número de columna ou liña particular. Por exemplo como este:

• tr: nth-child (mesmo) {...} - especificar entramado;
• tr: nth-child (1) {...} - Indicación das propiedades dunha liña específica;
• td: nth-child (mesmo) {...} - Indica de alternancia de columnas;
• td: enésimo-neno (1) {...} - a indicación das propiedades dunha columna particular.

Ademais secuencia e números poden ser especificados - o primeiro (td: First-child) ou o último (td: last-child).

A diferenza entre as células

En CSS, deseño de mesa permite eliminar os espazos entre as células. Por defecto, son. Por exemplo, se definir o marco na táboa sen definir a distancia entre as fronteiras, será aquí este resultado.

Concordo, non parece moi bo e non é conveniente para ler. Os usuarios terán ondas nos ollos por causa diso. Eliminar esas lagoas pódese escrita só como unha liña no estilo de táboa:

border-collapse: colapso

Pero resulta tamén que a distancia, polo contrario, debe ser aumentado. Ademais, o tamaño dos ocos pode ser indicado como entre as columnas e entre as liñas. Para indicar que un valor (en vez colapso):

fronteira-colapso: separada

Pero tal acción pode indicar que é necesario separar as células. Como era a súa parte, indicou propiedade adicional:

fronteira-paso: 20 p.

Se desexa especificar unha distancia distinta entre as liñas e columnas, indica dúas cousas:

fronteira-paso: 10px20px.

A diferenza nos navegadores

Teña presente que o CSS táboas de proxecto pode ser diferente en función do navegador. Especialmente malo é o caso con versións máis antigas, que as innovacións no CSS non está soportado.

A descrición anterior é un exemplo de cadro espesores para valores dixitais.

Para este exemplo, o espesor dos cadros para as constantes.

estilos de bordo tamén son moi diferentes.

Polo tanto, o desenvolvemento sempre ver o resultado en diferentes navegadores.

En CSS táboas de proxecto recomendado para comprobar o tipo de navegador. Particularmente grande problema adoitaba ser para usuarios con versións máis antigas do Internet Explorer.

desenvolvedores moi avanzados poden, dependendo do navegador para conectarse completamente diferentes arquivos CSS. E alguén fai unha comprobación en cada ou algún estilo particular (clase).

A maior parte dos problemas xorden das sombras.

CSS: Exemplos de formato de mesa

As inscricións poden ser moi variado. Todo depende de todo o sitio web eo seu deseño. Todos deben ser combinados e cores variadas. Tamén fai un gran papel e sabor creador. Sentido de beleza e todo diferente.

Imos dar algúns exemplos das varias táboas. A figura anterior mostra o uso de inclinación e xogar coa cor de fondo e borde.

Moitos estarán exemplo interesante de fermoso deseño puro que non vai cortar os usuarios ollo. Esta forma de realización é apropiada en case calquera situación.

Os bordos poden ser feitas de forma arredondada. Parece moi agradable.

conclusión

Como verás, a aparición dos cadros do CSS Hai moitas ferramentas. Cada parámetro é tamén unha enorme cantidade de opcións de valor. Se usar todo dunha vez, podes crear obras mestras. Especialmente se fai proxecto adaptable para todos os navegadores.

A principal cousa no deseño - non esaxere con efectos. Todo debe ser feito con moderación. Na primeira, o esquema desexa probar e usar todo o seu coñecemento inmediato. Como consecuencia da táboa son propiedades sobressaturadas. Probe evitar estes erros.

Ademais, algúns parámetros poden interferir uns cos outros. Por exemplo, non hai necesidade de especificar a cor de fondo da mesa, mentres se hai imaxe de fondo, que pode sobrepasar a cor especificada aínda definido.