Hermoso diseño de tabla CSS. Aplicando la propiedad de borde. Márgenes dentro de las células

Las tablas en sí parecen bastante pobres y los navegadores muestran algunas características de las tablas, en particular, marcos, a su manera. Al mismo tiempo, estas deficiencias se pueden corregir fácilmente utilizando el poder de los estilos. Al mismo tiempo, los medios para diseñar tablas se han ampliado enormemente, lo que le permite encajar con éxito las tablas en el diseño del sitio y presentar los datos tabulares con mayor claridad.

Color de fondo de la celda

Todos los colores de fondo al mismo tiempo. celdas de la tabla se establece a través de la propiedad de fondo, que se aplica al selector TABLE. En este caso, conviene recordar las reglas de uso de estilos, en particular, la herencia de las propiedades de los elementos. Aunque la propiedad de fondo no se hereda, el valor de fondo predeterminado para las celdas es transparente, es decir. transparencia, por lo que el efecto de relleno de fondo también se obtiene para las celdas. Si, simultáneamente con TABLE, configura el color del selector TD o TH, entonces este color se establecerá como fondo de la celda (ejemplo 2.3).

Ejemplo 2.3. Color de fondo

Título 1	Título 2
Celda 3	Celda 4

EN en este ejemplo obtenemos azul fondo de celda (etiqueta ) y rojo en el título (etiqueta ). Esto se debe al hecho de que el estilo del selector TH no está definido, por lo que el fondo del padre se "muestra", en en este caso, Selector de TABLA.

Y el color del selector TD se especifica explícitamente, por lo que las celdas se "rellenan" de azul.

El resultado de este ejemplo se muestra en la Fig. 2.4.

Arroz. 2.4. Cambiar el color de fondo

Márgenes dentro de las células

El margen es la distancia entre el borde del contenido de una celda y su borde. Normalmente, para este fin se utiliza el atributo cellpadding de una etiqueta. . Define el valor del margen en píxeles en todos los lados de la celda. Está permitido usar estilo. propiedad de relleno

agregándolo al selector TD, como se muestra en el Ejemplo 2.4.

Ejemplo 2.4. Campos en tablas

Título 1	Título 2
Celda 3	Celda 4

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

En este ejemplo, al agrupar selectores, los campos se configuran simultáneamente para los selectores TD y TH. El resultado del ejemplo se muestra en la Fig. 2.5.

Arroz. 2.5. Campos en celdas Si corresponde propiedad de estilo

relleno para celdas de tabla, luego la acción del atributo cellpadding de la etiqueta

ignorado.

Distancia entre celdas

. El efecto de este atributo es claramente visible cuando utiliza bordes alrededor de las celdas o cuando llena las celdas con un color que se destaca del fondo de la página. La propiedad de estilo border-spacing actúa como reemplazo del espaciado de celdas; establece la distancia entre los bordes de las celdas. Un valor establece la distancia vertical y horizontal entre los bordes de las celdas. Si esta propiedad tiene dos valores, entonces el primero determina la distancia horizontal (es decir, a la izquierda y a la derecha de la celda) y el segundo determina la distancia vertical (arriba y abajo).

La propiedad de espaciado de bordes solo tiene efecto si el selector TABLE no tiene la propiedad de colapso de bordes configurada para contraer (Ejemplo 2.5).

Ejemplo 2.5. Distancia entre los bordes de las celdas

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

leonardo	5	8
Rafael	4	11
Miguel Ángel	24	9
Donatello	2	13

El resultado de este ejemplo se muestra en la Fig. 2.6.

Arroz. 2.6. Vista de tabla cuando se utiliza el espaciado de bordes

Navegador Explorador de Internet Las versiones hasta la versión 7 inclusive no admiten la propiedad de espaciado de bordes, por lo que en este navegador se utilizará el valor de espaciado de celdas predeterminado (normalmente 2 píxeles) para las tablas.

Cuando se agrega a un selector TABLE propiedades de borde-collapse con el valor de colapso, el atributo de espacio entre celdas se ignora y el valor de espacio entre bordes se establece en cero.

Bordes y marcos

De forma predeterminada, inicialmente no hay ningún borde en la tabla y su adición se produce utilizando el atributo de borde de la etiqueta.

. Los navegadores muestran dicho borde de manera diferente, por lo que es mejor no especificar este atributo en absoluto y dejar el dibujo de los bordes en manos de los estilos. Veamos dos métodos directamente relacionados con los estilos.

Usando el atributo de espacio entre celdas

Se sabe que el atributo de espacio entre celdas de la etiqueta

establece la distancia entre las celdas de la tabla. Si usa diferentes colores de fondo para la tabla y las celdas, aparecerá una cuadrícula de líneas entre las celdas, cuyo color coincide con el color de la tabla y el grosor es igual al valor del atributo de espacio entre celdas en píxeles. El ejemplo 2.3 anterior muestra este efecto, por lo que no lo repetiré.

Tenga en cuenta que esto no es del todo manera conveniente creando límites porque tiene un alcance limitado. De esta manera sólo podrás obtener una cuadrícula de un solo color, y no vertical o líneas horizontales en los lugares correctos.

Usando la propiedad de borde

La propiedad de estilo de borde establece simultáneamente el color, el estilo y el grosor del borde alrededor de un elemento. Cuando necesite crear líneas separadas en lados diferentes, es mejor usar las derivadas: borde izquierdo, borde derecho, borde superior y borde inferior, estas propiedades definen respectivamente el borde izquierdo, derecho, superior e inferior.

Al aplicar la propiedad de borde a un selector TABLE, agregamos un borde alrededor de la tabla en su conjunto, y a un selector TD o TH agregamos un borde alrededor de las celdas (Ejemplo 2.6).

Ejemplo 2.6. Agregar un marco doble

Ejemplo 2.4. Campos en tablas

Título 1	Título 2
Celda 3	Celda 4

Este ejemplo utiliza doble marco negro alrededor de la mesa y marco sólido blanco alrededor de cada celda. El resultado del ejemplo se muestra en la Fig. 2.7.

Arroz. 2.7. Borde alrededor de la tabla y las celdas.

Tenga en cuenta que se forman líneas dobles donde se unen las celdas. Se obtienen nuevamente por la acción del atributo de espacio entre celdas de la etiqueta.

. Aunque este atributo no aparece en ninguna parte del código de ejemplo, el navegador lo utiliza de forma predeterminada. si estableces , entonces no obtenemos líneas dobles, sino simples, pero de doble espesor. Para cambiar esta característica, use la propiedad de estilo de colapso de borde con el valor colapso, que se agrega al selector TABLA (ejemplo 2.7).

Ejemplo 2.7. Creando un solo marco

Ejemplo 2.4. Campos en tablas

Título 1	Título 2
Celda 3	Celda 4

En este ejemplo, crea línea continua verde entre las celdas y negro alrededor de la mesa. Todos los bordes dentro de la tabla tienen el mismo grosor. El resultado del ejemplo se muestra en la Fig. 2.8.

Arroz. 2.8. Borde alrededor de la mesa

Alinear el contenido de las celdas

De forma predeterminada, el texto de una celda de la tabla está alineado a la izquierda. La excepción a esta regla es la etiqueta. , define un encabezado que está centrado. Para cambiar el método de alineación, use un estilo propiedad de alineación de texto(ejemplo 2.8).

Ejemplo 2.8. Alinear el contenido de la celda horizontalmente

Ejemplo 2.4. Campos en tablas

Título 1	Celda 1	Celda 2
Título 2	Celda 3	Celda 4

En este ejemplo, el contenido de la etiqueta está alineado a la izquierda y el contenido de la etiqueta - en el centro. El resultado del ejemplo se muestra a continuación (Figura 2.9).

Arroz. 2.9. Alinear texto en celdas

La alineación vertical en una celda siempre está centrada a menos que se indique lo contrario. Esto no siempre es conveniente, especialmente para tablas cuyo contenido de celda varía en altura. En este caso, la alineación se establece en el borde superior de la celda usando propiedades de alineación vertical, como se muestra en el ejemplo 2.9.

Ejemplo 2.9. Alinear el contenido de la celda verticalmente

Ejemplo 2.4. Campos en tablas

Título 1	Título 2
Celda 1	Celda 2

Este ejemplo establece la altura del encabezado. como 40 píxeles y el texto está alineado con el borde inferior. El resultado del ejemplo se muestra en la Fig. 2.10.

Arroz. 2.10. Alinear texto en celdas

Celdas vacías

Los navegadores muestran una celda sin nada dentro de manera diferente. "Nada" en este caso significa que no se agregó ninguna imagen ni texto dentro de la celda y el espacio no se tiene en cuenta. Naturalmente, la apariencia de las celdas sólo difiere si se coloca un borde a su alrededor. Al usar marco invisible, la apariencia de las células, independientemente de si contienen algo o no, es la misma.

Los navegadores más antiguos no mostraban el color de fondo de las celdas de vista vacías , entonces, cuando deseaba dejar una celda vacía pero mostrar el color de fondo, se agregaba un espacio no separado () dentro de la celda. El espacio no siempre es adecuado, especialmente cuando es necesario establecer la altura de la celda en 1-2 píxeles, razón por la cual los gráficos transparentes de un solo píxel se han generalizado. De hecho, dicha imagen se puede escalar a su discreción, pero no se muestra en la página web de ninguna manera.

Afortunadamente, la era de los dibujos de un solo píxel y todo tipo de espaciadores basados ​​​​en ellos ha pasado. Los navegadores funcionan bastante correctamente con tablas incluso sin la presencia de contenidos de celda.

Para controlar la apariencia de las celdas vacías, use la propiedad de celdas vacías; cuando está configurada para ocultar, el borde y el fondo no se muestran en las celdas vacías. Si todas las celdas de una fila están vacías, toda la fila está oculta. La celda se considera vacía en los siguientes casos:

• no hay ningún símbolo en absoluto;
• la celda contiene solo una nueva línea, tabulación o espacio;
• valor de visibilidad establecido en oculto.

Suma espacio sin rupturas se percibe como contenido visible, es decir la celda ya no estará vacía (ejemplo 2.10).

Ejemplo 2.10. Celdas vacías

Ejemplo 2.4. Campos en tablas

leonardo	5	8
Rafael		11
Miguel Ángel	24
Donatello		13

Vista de tabla en Navegador Safari mostrado en la Fig. 2.11a. La misma tabla en el navegador IE7 se muestra en la Fig. 2.11b.

A. En los navegadores Safari, Firefox, Opera, IE8, IE9

b. En el navegador IE7

Arroz. 2.11. Vista de una tabla con celdas vacías.

La especificación CSS da posibilidades ilimitadas para diseñar mesas. De forma predeterminada, la tabla y las celdas de la tabla no tienen límites visibles y fondo, mientras que las celdas dentro de la tabla no son adyacentes entre sí.

El ancho de las celdas de la tabla está determinado por el ancho de su contenido, por lo que el ancho de las columnas de la tabla puede variar. La altura de todas las celdas de una fila es la misma y está determinada por la altura de la celda más alta.

Formatear tablas

1. Bordes de la mesa

De forma predeterminada, la tabla y las celdas que contiene se muestran en el navegador sin bordes visibles. Bordes de mesa están especificados por la propiedad de borde:

Tabla (border-colapso: colapsar; /*eliminar espacios vacios entre celdas*/borde: 1px gris sólido; /*establece el borde exterior de la tabla a 1px de espesor*/ )

Bordes de celda de encabezado cada columna se especifica para el ésimo elemento:

Th (borde: 1px gris sólido;)

Bordes de celda Los cuerpos de la tabla se especifican para el elemento td:

Td (borde: 1px gris sólido;)

El grosor de los bordes de las celdas adyacentes no se duplica, por lo que puede configurar los bordes para toda la tabla de la siguiente manera:

Th, td (borde: 1px gris sólido;)

Puede resaltar el borde exterior de una tabla dándole un mayor ancho:

Tabla (borde: 3px gris sólido;)

Los límites se pueden establecer parcialmente:

/* establece un borde exterior gris de 3px de grosor para la tabla */ table (border-superior: 3px gris sólido; ) /* establece un borde gris de 1px de grosor para la celda del cuerpo de la tabla */ td (border-bottom: 1px sólido gris;)

Puede leer más sobre la propiedad fronteriza.

2. Cómo configurar el ancho y alto de la mesa

Por defecto ancho y alto de la mesa determinado por el contenido de sus células. Si no se especifica el ancho, será igual al ancho de la fila (fila) más ancha.

Ancho de tabla y columna se establece usando la propiedad de ancho. Si se especifica tabla (ancho: 100%;) para una tabla, entonces el ancho de la tabla será igual al ancho del bloque contenedor en el que se encuentra.

El ancho de la tabla y las columnas generalmente se especifica en px o %, por ejemplo:

Tabla (ancho: 600px;) th (ancho: 20%;) td:first-child (ancho: 30%;)

Altura de la mesa No especificado. altura de fila las tablas se pueden manipular agregando relleno superior e inferior a los elementos Y . Fije la altura usando propiedades de altura No recomendado.

Th, td (relleno: 10px 15px;)

3. Cómo configurar el fondo de la mesa

Por defecto fondo de la mesa y las células son transparentes. Si la página o bloque que contiene la tabla tiene fondo, se mostrará a través de la tabla. Si se especifica el fondo tanto para la tabla como para las celdas, en los lugares donde el fondo de la tabla y las celdas se superponen, solo será visible el fondo de las celdas. El fondo de la tabla en su conjunto y sus celdas puede ser:
relleno,
,
.

4. Columnas de la tabla

El modelo de tabla CSS se centra principalmente en filas (filas) formadas usando la etiqueta

. En la práctica, hay casos en los que es necesario. formato especial columnas, lo cual es posible de las siguientes maneras:

usando etiqueta

Puede configurar el fondo para cualquier número de columnas;

usando la tabla selectora td:first-child , tabla td:last-child puede establecer estilos para la primera o última columna de la tabla (excepto la primera celda del encabezado de la tabla);

Usando el selector de tabla td:nth-child (regla de selección de columnas), puede establecer estilos para cualquier columna de la tabla.

Puede leer más sobre los selectores CSS.

5. Cómo agregar un título de tabla

Puedes agregar un título a una tabla usando una etiqueta , y usando la propiedad caption-side se puede colocar delante o debajo de la mesa. Para alineación horizontal El texto del título utiliza la propiedad text-align. Heredado.

...

Cuadro No. 1

Compañía	Q1	Q2	Q3	Q4

título (lado del título: abajo; alineación de texto: derecha; relleno: 10px 0; tamaño de fuente: 14px;) Arroz. 2. Ejemplo de visualización de un encabezado debajo de una tabla

6. Cómo eliminar el espacio entre los marcos de las celdas.

De forma predeterminada, los marcos de las celdas de las tablas están separados por un pequeño espacio. Si estableces para borde de la mesa-colapso: colapsar, luego se eliminará el espacio. La propiedad se hereda.

Sintaxis

Tabla (colapso de frontera: colapso;)
Arroz. 3. Ejemplo de tablas con marcos de celdas fusionados y separados

7. Cómo aumentar el espacio entre los marcos de las celdas.

Usando la propiedad de espaciado de bordes, puede cambiar la distancia entre los marcos de las celdas. Esta propiedad se aplica a la tabla en su conjunto. Heredado.

Sintaxis

Tabla (colapso de borde: separado; espaciado de bordes: 10px 20px;) tabla (colapso de borde: separado; espaciado de bordes: 10px;) Arroz. 4. Ejemplo de tablas con mayores espacios entre marcos de celdas.

8. Cómo ocultar celdas vacías de una tabla

La propiedad de celdas vacías oculta o muestra celdas vacías. Sólo afecta a las celdas que no contienen ningún contenido. Si una celda está configurada como fondo y una tabla está configurada como tabla (border-colapso: colapsar;), entonces la celda no se ocultará. Heredado.

Compañía	Q1	Q2	Q3
microsoft	20.3	30.5
Google	50.2	40.63	45.23

tabla (borde: 1px sólido #69c; colapso de borde: separado; celdas vacías: ocultar;) th, td (borde: 2px sólido #69c;) Arroz. 5. Ejemplo de ocultación celda vacia mesas

9. Diseñe una tabla usando la propiedad diseño de tabla

El diseño de la tabla está determinado por uno de dos enfoques: diseño fijo o diseño automático. En este caso, diseño se refiere a cómo se distribuye el ancho de la tabla entre los anchos de las celdas. La propiedad no se hereda.

Sintaxis

Tabla (diseño de tabla: fijo;)

10. Mejores diseños de mesa

1. Minimalismo horizontal

Las tablas horizontales son tablas en las que el texto se lee horizontalmente. Cada entidad representa linea separada. Puede darle a tablas como esta un aspecto minimalista colocando un borde de dos píxeles debajo del encabezado.

Empleado	Salario	Prima	Supervisor
Esteban C. Cox	$300	$50	Chelín
josefina tan	$150	-	annie
Joyce Ming	$200	$35	andy
James Pentel	$175	$25	annie

table ( familia de fuentes: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; tamaño de fuente: 14px; fondo: blanco; ancho máximo: 70%; ancho: 70%; colapso de borde: colapso; texto -align: izquierda; ) th (peso de fuente: normal; color: #039; borde inferior: 2px sólido #6678b1; relleno: 10px 8px; ) td (color: #669; relleno: 9px 8px; transición: .3s lineal; ) tr:hover td (color: #6699ff;)

En grandes cantidades filas, este diseño de tabla hace que sean difíciles de leer. Para resolver este problema, puede agregar un borde de un píxel debajo de todos los elementos td.

Td ( borde inferior: 1px sólido #ccc; color: #669; relleno: 9px 8px; transición: .3s lineal; )/*el resto del código es como en el ejemplo anterior*/

Agregar un efecto :hover al elemento tr hará que las tablas diseñadas en un estilo minimalista sean más fáciles de leer. Cuando pasa el mouse sobre una celda, las celdas restantes en la misma fila se resaltan simultáneamente, lo que facilita el seguimiento de la información si las tablas tienen varias columnas.

Th (peso de fuente: normal; color: #039; relleno: 10px 15px;) td (color: #669; borde superior: 1px sólido #e8edff; relleno: 10px 15px;) tr:hover td (fondo: #e8edff ;)

2. Minimalismo vertical

Aunque este tipo de tablas rara vez se utilizan, las tablas orientadas verticalmente son útiles para categorizar o comparar descripciones de objetos representados por una columna. Puedes diseñarlos en un estilo minimalista añadiendo espacio para separar las columnas.

Th (peso de fuente: normal; borde inferior: 2px sólido #6678b1; borde derecho: 30px sólido #fff; borde izquierdo: 30px sólido #fff; color: #039; relleno: 8px 2px;) td (borde- derecha: 30 px sólido #fff; borde izquierdo: 30 px sólido #fff; relleno: 12 px 2 px;

3. Estilo en caja

El estilo más fiable para diseñar mesas de todo tipo es el llamado estilo "en caja". Basta con elegir uno bueno. combinación de colores y luego establezca el color de fondo para todas las celdas. No olvides enfatizar la diferencia entre líneas estableciendo bordes como separador.

Th (tamaño de fuente: 13px; peso de fuente: normal; fondo: #b9c9fe; borde superior: 4px sólido #aabcfe; borde inferior: 1px sólido #fff; color: #039; relleno: 8px; ) td (fondo : #e8edff; borde inferior: 1px sólido #fff; borde superior: 1px sólido transparente;

Lo más difícil es encontrar la combinación de colores que combine armoniosamente con su sitio web. Si el sitio tiene muchos gráficos y diseño, le resultará bastante difícil utilizar este estilo.

Tabla (familia de fuentes: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; tamaño de fuente: 14px; ancho máximo: 70%; ancho: 70%; alineación de texto: centro; colapso de borde: colapso ; borde superior: 7px sólido #9baff1; borde inferior: 7px sólido #9baff1; tamaño de fuente: 13px; borde izquierdo: 1px; sólido #9baff1; color: #039; relleno: 8px; ) td (fondo: #e8edff; borde derecho: 1px sólido #aabcfe; borde izquierdo: 1px sólido #aabcfe; color: #669; relleno: 8px; )

4. Cebra horizontal

La mesa cebra parece bastante atractiva y cómoda. Un color de fondo adicional puede servir como señal visual para las personas cuando leen la tabla.

Th ( peso de fuente: normal; color: #039; relleno: 10px 15px; ) td ( color: #669; borde superior: 1px sólido #e8edff; relleno: 10px 15px; ) tr:nth-child(2n) ( antecedentes: #e8edff;)

5. Estilo periódico

Para lograr el llamado efecto periódico, puedes aplicar bordes a los elementos de la mesa y jugar con las celdas del interior. Un estilo de periódico ligero y minimalista podría verse así: juegue con la combinación de colores, agregue bordes, relleno, diferentes orígenes y efecto: pasar el cursor sobre una línea.

Tabla (borde: 1px sólido #69c;) th (peso de fuente: normal; color: #039; borde inferior: 1px discontinuo #69c; relleno: 12px 17px;) td (color: #669; relleno: 7px 17px; ) tr:hover td (fondo: #ccddff;)

Tabla (borde: 1px sólido #69c;) th (peso de fuente: normal; color: #039; relleno: 10px; ) td (color: #669; borde superior: 1px discontinuo #fff; relleno: 10px; fondo: #ccddff; ) tr:hover td (fondo: #99bcff;)

Tabla (borde: 1px sólido #6cf;) th (peso de fuente: normal; tamaño de fuente: 13px; color: #039; transformación de texto: mayúsculas; borde derecho: 1px sólido #0865c2; borde superior: 1px sólido #0865c2; borde izquierdo: 1px sólido #0865c2; borde inferior: 1px sólido #fff;

6. Fondo de la mesa

Si buscas un servicio rápido y manera única diseño de la mesa, seleccione una imagen o fotografía atractiva relacionada con el tema de la mesa y configúrela como fondo de la mesa.

Jpg") sin repetición; posición de fondo: 100% 55px; ) th ( peso de fuente: normal; color: #339; relleno: 10px 12px; ) td ( fondo: url("https://sitio/images/ atrás..png"); fondo: transparente; )

Sin estilos, nuestra mesa parece muy simple y discreta:

Figura 1. Vista de tabla sin estilos.

Agreguemos estilos para hacerlo más hermoso:

Río	Longitud (km)	cuenca de drenaje
Amazonas	6992	6915000
Nilo	6852	3349000
Yangtsé	5800	1800000

Ahora nuestra tabla se ve así:

Figura 2. Vista de la tabla con estilos.

En este estilo debes prestar atención a la regla:

/* Establece la línea resaltada al pasar el cursor */ tr+tr:hover( background-color: #e6e3da; )

Utiliza el selector de elementos adyacentes (signo más) y la pseudoclase :hover, que define el estilo del elemento al pasar el cursor del mouse sobre él.

No necesitamos cambiar al pasar el cursor color de fondo encabezados de tabla (color de fondo), ¿verdad? Necesitamos cambiar el color de fondo de todas las filas excepto la primera.

El selector tr+tr adyacente se aplicará a todas las líneas excepto a la primera. Lea más sobre los selectores vecinos aquí. Y la pseudoclase :hover indica que el estilo de reglas CSS Solo es necesario cuando se pasa el cursor.

Ahora tenemos bastante ejemplo real mesas. Solo tenga en cuenta que puede haber varias tablas en una página y no todas necesitan tener aplicado este estilo. Para que el estilo funcione solo en una tabla, le asignamos una clase, lea Clases CSS.

En el siguiente ejemplo, el comentario es solo para el código agregado.

Río	Longitud (km)	cuenca de drenaje
Amazonas	6992	6915000
Nilo	6852	3349000
Yangtsé	5800	1800000

Nada ha cambiado en el funcionamiento de este ejemplo, pero no debería haberlo hecho. Solo si ahora guarda este ejemplo en su computadora y en el ejemplo agrega una segunda tabla, por ejemplo, copia el código de la tabla existente, pero elimina la clase = "río", pero el estilo solo se aplicará a la tabla con la clase instalado. Estos son conceptos básicos simples de CSS.

Segundo ejemplo

Ahora establezcamos la siguiente tarea: debemos resaltar la primera columna en gris claro.

Para resolver este problema, usaremos la pseudoclase: primer hijo. Con esta pseudoclase, puede acceder a las primeras celdas de cada fila.

Nombre:	Jacobo
Apellido:	Londres

Este es un ejemplo muy simple. Usemos selectores secundarios para acceder a estos elementos.

En nuestro código, la etiqueta antepasado y tiene un antepasado

, es decir, el selector secundario debería ser así:

Nombre:	Jacobo
Apellido:	Londres

Y ahora vemos que nuestro estilo no funciona. ¿Por qué? Después de todo, a primera vista, el selector está especificado correctamente. El caso es que después de la etiqueta

siempre hay una etiqueta . Está ahí, incluso si no está escrito en el código. Por lo tanto el código funcionará:

Nombre:	Jacobo
Apellido:	Londres

Definitivamente necesitas conocer este punto cuando trabajas con tablas.

Ahora hay un punto más, aunque no está directamente relacionado con las tablas, pero al trabajar con ellas a menudo pueden surgir preguntas similares. Veámoslo usando este código como ejemplo. Por ejemplo, queremos establecer el color de fondo de las celdas de la última fila en rojo. Usaremos la clase (class ="my-td") para esto.

Nombre:	Jacobo
Apellido:	Londres

Como resultado, la clase funcionó en la segunda celda ("Londres"), pero no funcionó en la primera celda para la cual funcionó el selector. tabla > tbody > tr > td:primer hijo.

¿Por qué sucedió esto?

Porque el seleccionador tabla > tbody > tr > td:primer hijo tiene más “peso” (importancia) para CSS, porque es más específico.

¿Cómo solucionar esto?

Puede utilizar un selector más específico para definir la clase: table > tbody> tr > td.my-td .

Puedes usar la regla importante. Esta regla aumenta la prioridad de estilo; este uso de esta regla se considera un caso extremo.

Nombre:	Jacobo
Apellido:	Londres

En este caso, en lugar de clases, puedes usar identificadores de identificación, su prioridad es mayor y se ejecutará el estilo.

Cada navegador tiene sus propias prioridades, no he leído sobre un estándar estricto en ninguna parte. Pero reglas generales Hay:

1. cuanto más específico sea el selector, mayor será su peso;
2. La identificación es más importante que la clase.

Por supuesto, este tema no está directamente relacionado con tablas HTML, acabamos de ver un ejemplo de prioridad del selector usando tablas como ejemplo.

Pero, con respecto a CSS, debes recordar que CSS no funciona bien al seleccionar celdas de una tabla (etiqueta ). Es mejor asignar la clase a una cadena (etiqueta ), y luego use un selector con la pseudoclase td:nth-child(n) para especificar la celda deseada.

Las tablas son un elemento muy utilizado para presentar diversos datos en presentaciones, conferencias, etc. folletos publicitarios y más. Debido a su claridad, versatilidad y simplicidad, las tablas también se utilizan ampliamente en sitios web para transmitir mejor el material necesario al lector. Al agregar todo el poder de los estilos a las tablas, puede adaptarlas con gran éxito al diseño del sitio web y presentar datos tabulares de forma clara y hermosa.

Ancho de la mesa

De forma predeterminada, el ancho de la tabla lo establece el propio navegador, en función del volumen de datos tabulares que contiene. Si hay mucho texto en las celdas, la tabla ocupará todo el ancho disponible y, si no hay suficiente texto, el ancho de la tabla disminuirá automáticamente. Si hay varias tablas en una página, sus diferentes anchos a veces parecen descuidados. Por lo tanto, es mejor establecer explícitamente el ancho de la tabla en porcentaje, píxeles, em o cualquier otro unidades CSS, como se muestra en el ejemplo 1.

Ejemplo 1: ancho de la tabla en porcentaje

Tabla (ancho: 100%;) .tbl-medium (ancho: 60%;) .tbl-small (ancho: 200px;)

En este ejemplo, se aplica un ancho del 100% a todas las tablas. Nuevamente, las clases ayudan a establecer el ancho de las tablas seleccionadas usando una clase creada previamente. Para darle a la tabla un ancho de 200 píxeles, debe agregar al elemento

clase tbl-pequeña.

Alineación de la mesa

Inicialmente, cualquier tabla se encuentra en el borde izquierdo de la ventana del navegador. Puedes alinearla al centro, a menos que la mesa ocupe toda el área disponible, es decir, menos del 100%. Para hacer esto, debe agregar sangrías al estilo de la tabla usando propiedad de margen con el valor auto , como se muestra en el ejemplo 2.

Ejemplo 2: Alinear una tabla con usando margen

...

En este ejemplo, todas las tablas de la página están configuradas en alineación central.

Color de fondo

El color de fondo de todas las celdas de la tabla al mismo tiempo se establece mediante la propiedad de fondo, que se aplica al selector de tabla. En este caso, conviene recordar las reglas de uso de estilos, en particular, la herencia de las propiedades de los elementos. Si al mismo tiempo que la tabla establece un color para el selector td o th, se establecerá como fondo (ejemplo 3).

Ejemplo 3: color de fondo

Tipo de conexión
	Eje	Manga
Gratis	H9	D10
Normal	N9	I s 9
Denso	P9

El resultado de este ejemplo se muestra en la Fig. 1.

Arroz. 1. Cambiar el color de fondo

Si necesitamos hacer una cebra, esto se llama líneas alternas. diferentes colores, entonces deberías usar la pseudoclase :nth-child, agregándola al selector tr. Para que la cebra se extienda solo hasta el cuerpo de la tabla y no hasta su encabezado, los separamos mediante elementos Y (ejemplo 4).

Ejemplo 4: creación de una cebra

Intervalos de tamaño, mm	Tolerancia TI, µm, para cualificaciones
	5	6	7	8
hasta 3	4	6	10	14
San 3 al 6	5	8	12	18
San 6 al 10	6	9	15	22
San 10 al 18	8	11	18	27
San 18 al 30	9	13	21	33
Calle 30 al 50	11	16	25	39
Calle 50 al 80	13	19	30	46

El resultado de este ejemplo se muestra en la Fig. 2.

Arroz. 2. cebra

El valor par del selector :nth-child aplica el estilo a todas las filas pares y establece su color de fondo. También puedes cambiarlo a impar, luego las líneas impares se resaltarán en gris.

De manera similar, las columnas, no las filas, se resaltan con color; para esto, debes usar el selector tbody td:nth-child(even) .

Arroz. 2.4. Cambiar el color de fondo

El margen es la distancia entre el borde de la celda y su contenido. Sin márgenes, el texto de una tabla se “pega” al marco, perjudicando así su percepción, pero añadir márgenes mejora la legibilidad del texto. Para este propósito, se utiliza la propiedad de estilo de relleno, que funciona con el selector td o th, como se muestra arriba en los ejemplos 3 y 4. Normalmente, se especifica un valor único, que luego establece el espacio vacío alrededor del contenido de la celda en todos los lados a la vez. Se escriben dos valores cuando necesita configurar diferentes campos verticalmente (primer valor) y horizontalmente (segundo valor).

Distancia entre celdas

Hay una pequeña cantidad de espacio vacío entre las celdas que no es visible a menos que establezca un borde o un color de fondo para las celdas. Este espaciado es inicialmente de 2 píxeles y se puede cambiar usando la propiedad de espaciado de bordes agregándola al selector de tabla (Ejemplo 5).

Ejemplo 5: uso del espaciado de bordes

Tabla ( espacio entre bordes: 3px; /* Distancia entre celdas */ ) thead th ( fondo: #e08156; /* Color de fondo del encabezado */ color: #333; /* Color del texto */ ) td, th ( padding: 5px ; /* Campos en celdas */ background: #4c715b; /* Color de fondo de las celdas */ color: #f5e8d0;

Agregando este estilo a cualquier tabla obtenemos el resultado que se muestra en la Fig. 3.

Arroz. 3. Vista de tabla con distancia entre celdas

Si la propiedad de colapso de bordes se agrega a la tabla con el valor colapsar, entonces se ignora el espaciado de bordes porque ya no hay distancia entre las celdas.

Bordes y marcos

Para separar claramente el contenido de una celda de otra, se agregan bordes a las celdas. Son creados por la propiedad de estilo de borde, que se aplica a los elementos ( o ). Sin embargo, aquí estamos asaltados. trampas. Dado que se crea un marco para cada celda, se obtiene un borde de doble espesor donde las celdas se tocan. Hay varias formas de eliminar esta característica. La más sencilla es utilizar la propiedad de colapso de borde con el valor de colapso. Su tarea es rastrear el contacto de las líneas y, en lugar de un doble borde, representar uno solo. Solo necesita agregar esta propiedad al selector de tabla y luego hará todo por sí solo (ejemplo 6).

Ejemplo 6: uso de la propiedad de colapso de borde al crear bordes de tabla

oh	incógnita	incógnita
oh	oh	incógnita
incógnita	incógnita	oh

La diferencia entre los bordes de las tablas con y sin la propiedad de colapso de bordes se muestra en la Fig. 4.

Arroz. 4. Vista de tabla cuando se utiliza el colapso de bordes

En la figura. La Figura 4a muestra el marco de la tabla predeterminado. Tenga en cuenta que dentro de la tabla todas las líneas tienen doble espesor. Agregar colapso de borde elimina esta característica y el grosor de todas las líneas vuelve a ser el mismo (Fig. 4b).

No es necesario que las líneas estén en todos los lados de las celdas, pero se pueden diseñar para separar una fila o columna de otra. Para hacer esto, usamos las propiedades border-bottom, border-left y otras similares. Aplicar bordes a elementos , , Y Esto no es posible, por lo que los agregamos a la tabla y al selector td (ejemplo 7).

Ejemplo 7. Líneas entre líneas

Tipo de conexión	Campos de tolerancia para el ancho del chavetero
	Eje	Manga
Gratis	H9	D10
Normal	N9	I s 9
Denso	P9

El resultado de este ejemplo se muestra en la Fig. 5.

Arroz. 5. Mesa con líneas horizontales.

De forma predeterminada, el texto de una celda de la tabla está alineado a la izquierda y al centro. La excepción es el elemento. , define una celda de encabezado en la que se centra la alineación. Para cambiar el método de alineación, utilice la propiedad de estilo de alineación de texto (ejemplo 8).

Ejemplo 8: Alinear el contenido de las celdas horizontalmente

Título 1	Celda 1	Celda 2
Título 2	Celda 3	Celda 4

En este ejemplo, el contenido está alineado a la izquierda y el contenido - en el centro. El resultado del ejemplo se muestra a continuación (Fig. 6).

Arroz. 6. Alinear texto en celdas

La alineación vertical en una celda siempre está centrada a menos que se indique lo contrario. Esto no siempre es conveniente, especialmente para tablas cuyo contenido de celda varía en altura. En este caso, la alineación se establece en el borde superior de la celda usando la propiedad de alineación vertical con un valor de top, como se muestra en el Ejemplo 9.

Ejemplo 9. Alinear el contenido de la celda verticalmente

Tipo de conexión	Campos de tolerancia para el ancho del chavetero
	Eje	Manga
Gratis	H9	D10
Normal	N9	I s 9
Denso	P9

En este ejemplo, el texto está alineado con el borde superior. El resultado del ejemplo se muestra en la Fig. 7.

Diseño de mesas con usando CSS- la ocupación es interesante y responsable. Es necesario abordar este asunto de manera competente, conociendo todas las posibilidades de los estilos. Además, es necesario tener un sentido de la belleza para no asustar a los visitantes del sitio con su creatividad.

Casi cualquier cosa se puede transformar en tablas. Un hermoso estilo de tabla CSS implica el uso de diseños de bordes, fondos de tablas, fondos de celdas, espaciado de celdas y más. Veamos las cosas más básicas.

Borde de la mesa

El estilo de tabla CSS siempre implica jugar con el borde (borde). Todas las tablas no están rodeadas por un borde de forma predeterminada. Es decir, es igual a 0 píxeles. Pero esto se puede solucionar utilizando la propiedad de borde.

Puedes especificar marco exterior para toda la tabla:

mesa (borde: 3px negro sólido;)

Gracias a esta línea, todas las mesas del sitio que utilicen este estilo tendrán un borde negro. Tenga en cuenta que el borde está sólo alrededor de los bordes, no dentro de la tabla. Para celdas y filas, el marco se configura de manera diferente.

th, td (borde: 3px negro sólido;)

Puede especificar cualquier grosor y color. Tenga en cuenta que los bordes no se duplican cuando se unen celdas.

La palabra sólido significa diseño continuo. Puede especificar otros valores.

La mayoría de las veces, se utiliza un marco sólido porque parece más atractivo y no distrae la atención del contenido principal del sitio.

La propiedad del borde también se puede especificar en las direcciones. El borde sólo se puede establecer para la parte superior, inferior, izquierda o derecha. Porque en algunos casos la opción con un marco para toda la mesa a la vez no es adecuada.

tabla (borde superior: 1px rojo sólido;)

De esta manera puedes establecer un borde sólo para la parte superior de la tabla. De manera similar para cualquier otro lado, solo que en lugar de arriba escribimos: derecha, izquierda o abajo.

Título de la tabla

El título de la tabla se puede especificar mediante una etiqueta. . Esta etiqueta puede tener muchas propiedades en CSS para más sintonia FINA. EN Estilo CSS Lo bueno de las mesas es que puedes maniobrar los elementos como quieras.

Este encabezado se muestra de la misma manera que el estándar en los libros (por ejemplo, "Tabla 1").

También puede especificar la ubicación de este título utilizando la propiedad del lado del título (arriba o abajo). La alineación izquierda o derecha se especifica mediante la propiedad text-align.

Fondo de la mesa

El fondo de la mesa puede ser de cualquier color o patrón. El color lo especifica la propiedad color de fondo. Los nombres de las propiedades corresponden completamente a los utilizados en el habla. Esto hace que la memorización sea mucho más fácil.

El color se puede indicar mediante el nombre o mediante varias codificaciones. Además, puede especificar lo siguiente:

• Transparente: transparencia del elemento.
• Heredar: el color es el mismo que el del elemento principal.
• Inicial: valor predeterminado.

La opción de transparencia se puede utilizar en los casos en que todas las tablas del texto del archivo CSS están diseñadas en el mismo color, pero en este caso no existe tal necesidad.

Además, el fondo puede ser una imagen. Para hacer esto, la propiedad imagen de fondo se especifica en el estilo. El camino se indica así:

La ruta al archivo puede ser relativa o absoluta.

Se puede hacer un relleno más complejo con un degradado:

• gradiente lineal();
• gradiente radial();
• repetir-gradiente-lineal() y repetir-gradiente-radial() - repetir el gradiente.

Fondo de celda

Además del fondo en su conjunto, puede establecer un fondo alterno en columnas o filas. Esta propiedad se utiliza muy a menudo para el diseño, ya que la separación visual de líneas hace que la información sea más fácil de leer.

Además de la alternancia, también puede especificar el número de una columna o fila específica. Por ejemplo así:

• tr:nth-child (par) (...) - indicación de alternancia de líneas;
• tr:nth-child (1) ( ... ) - indica la propiedad de una fila específica;
• td:nth-child (par) (...) - indica la alternancia de columnas;
• td:nth-child (1) (...): indica la propiedad de una columna específica.

Además de la alternancia y los números, puede especificar: primero (td:first-child) o último (td:last-child).

Espacio entre celdas

En CSS, el estilo de tabla le permite eliminar espacios entre celdas. Por defecto lo son. Por ejemplo, si configura un marco en una tabla sin establecer la distancia entre los bordes, obtendrá el siguiente resultado.

De acuerdo, no se ve muy bonito y no es cómodo de leer. Los usuarios tendrán una onda en los ojos debido a esto. Puede eliminar estos espacios escribiendo la siguiente línea en el estilo de tabla:

colapso-frontera: colapso

Pero también sucede que, por el contrario, es necesario aumentar la distancia. Además, el tamaño de los espacios se puede especificar tanto entre columnas como entre filas. Para hacer esto, especifique el siguiente valor (en lugar de contraer):

colapso de frontera: separado

Pero esta acción indicará que es necesario dividir las células. Cómo separarlos exactamente se indica mediante una propiedad adicional:

espacio entre bordes: 20px.

Si necesita especificar distancia diferente entre filas y columnas, luego se indican dos valores:

espacio entre bordes: 10px20px.

diferencia del navegador

Tenga en cuenta que el estilo de las tablas en CSS puede verse diferente según el navegador. La situación es especialmente mala con las versiones anteriores, que no admiten innovaciones en CSS.

Arriba se muestra un ejemplo de grosor de borde para valores digitales.

Los estilos de marcos también varían mucho.

Por lo tanto, al desarrollar, mire siempre el resultado en diferentes navegadores.

Los desarrolladores muy avanzados pueden conectarse de manera completamente diferente. Archivos CSS. Y alguien hace chequeos en cada o algunos estilo específico(clase).

La mayoría de los problemas surgen con las sombras.

CSS: diseño de tablas, ejemplos.

El diseño puede ser muy diverso. Todo depende del sitio en su conjunto y de su diseño. Todo debe estar combinado y no lleno de colores. El gusto del desarrollador también juega un papel importante. El sentido de la belleza de cada persona es diferente.

A continuación se muestran ejemplos de varias tablas. La imagen de arriba muestra el uso de la inclinación y el juego con los límites.

Muchos estarán interesados ​​en un ejemplo de un diseño hermoso y elegante que no dañará la vista de los usuarios. Esta opción es apropiada en casi cualquier situación.

Los bordes se pueden redondear. Se ve bastante bien.

Conclusión

Como puedes ver, para el registro. apariencia Existe una gran cantidad de herramientas para tablas en CSS. Cada parámetro también tiene una gran cantidad de valores posibles. Si usas todo esto a la vez, puedes crear obras maestras. Especialmente si lo haces para todos los navegadores.

Lo principal a la hora de diseñar es no exagerar con los efectos. Todo debe hacerse con moderación. Al principio, a los maquetadores les encanta experimentar y utilizar todos sus conocimientos a la vez. Como resultado, las tablas terminan sobresaturadas de propiedades. Intenta evitar estos errores.

Además, algunos parámetros pueden interferir entre sí. Por ejemplo, no es necesario especificar el color de fondo de la tabla si también está configurado allí. imagen de fondo, que se superpondrá al color especificado.