hogar › Ajustes › Cómo configurar el color del borde de la tabla en CSS. Color de fondo de la celda. Usando la propiedad de borde

Cómo configurar el color del borde de la tabla en CSS. Color de fondo de la celda. Usando la propiedad de borde

Sin estilos, nuestra mesa parece muy simple y discreta:

Figura 1. Vista de tabla sin estilos.

Agreguemos estilos para hacerlo más hermoso:

Menú desplegable

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; )

Esto utiliza el selector de elementos adyacentes (signo más) y la pseudoclase :hover, que define el estilo del elemento al pasar el cursor 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.

Menú desplegable

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.

tabla de ejemplo

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í:

tabla de ejemplo

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á:

tabla de ejemplo

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.

tabla de ejemplo

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ó así?

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

¿Como arreglarlo?

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.

tabla de ejemplo

Nombre:	Jacobo
Apellido:	Londres

En lugar de clases en en este caso puede utilizar 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:

cuanto más específico sea el selector, mayor será su peso;
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.

Y en este artículo hablaré de su diseño con usando CSS. Para formatear tablas estilos en cascada Utilice las propiedades que se enumeran a continuación.

anchura y altura

Establezca el ancho y el alto de la mesa respectivamente. Sin estas propiedades, los parámetros se determinan automáticamente y dependen del contenido del contenedor.

. Los valores se establecen en cualquier unidad. Longitudes CSS, pero a menudo se utilizan píxeles ( píxeles) y el interés ( % ). Estos últimos ajustan el ancho en relación con elemento padre, los primeros establecen el valor absoluto.

Tabla (ancho: 450 px; alto: 80%;)

lado del título

Especifica dónde se colocará el encabezado de la tabla descrito por la etiqueta.

. La propiedad se puede establecer en:

arriba- colocar encima de la mesa.
abajo- colocar debajo de la mesa.

Exclusivo para Navegador Firefox valores disponibles izquierda(hacia la izquierda) y bien(a la derecha de la tabla), pero otros navegadores no los entienden.

Tabla (lado del título: arriba;)

colapso fronterizo

Ayuda a evitar situaciones en las que se forman los bordes de las celdas. marcos dobles. La siguiente figura muestra precisamente un caso así.

Así es como se muestran los marcos de las celdas de forma predeterminada. Regla colapso de fronteras: separado; da el mismo efecto. Para resolver el problema es necesario declarar. colapso fronterizo: colapso;(el resultado se muestra en la siguiente figura).

espaciado de fronteras

Define la distancia entre los bordes de las celdas. La regla se establece para toda la mesa a la vez. Si hay un valor, establecerá la distancia tanto horizontal como verticalmente. Si hay dos valores, el primero establecerá la distancia horizontal y el segundo, la vertical. La propiedad es incompatible con la regla. tabla (colapso de frontera: colapso;).

Tabla ( borde: 4px doble #FCA360; colapso de borde: separado; espaciado de bordes: 10px 20px; ) td ( relleno: 3px; borde: 1px sólido #FCA360; )

Le da a la tabla la siguiente apariencia:

celdas vacias

Especifica si el fondo y los bordes de una celda se muestran si está vacía. La propiedad puede tener uno de dos valores:

espectáculo- mostrar bordes y fondo (predeterminado).
esconder- esconderlos. Si todas las celdas de una fila están vacías, se ocultará toda la fila. Si a la mesa se le da una regla colapso fronterizo: colapso;, entonces la propiedad se ignora.

diseño de mesa

Le indica al navegador cómo determinar el ancho de las celdas de la tabla en función de su contenido.

auto. El ancho se determina automáticamente. En este caso, se suma el ancho de todas las columnas o se toma el valor de la propiedad ancho, si se especifica para la tabla. El navegador primero carga la tabla, luego la analiza para determinar su ancho y solo entonces la muestra.
fijado. Ancho fijo, que está determinado por la primera línea.

Ejemplo de diseño de mesa.

No olvides que a la mesa también se le pueden dar otros reglas universales, por ejemplo, como hicimos con la altura ( altura) y ancho ( ancho).

Teniendo esto en cuenta, creemos una tabla simple, comentando parcialmente el código.

colapso fronterizo

tabla de ejemplo
Precios	2014	2015	2016
Pan	16	18	21
Azúcar	35	44	50
Sal	8	8,50	9

En el navegador, la tabla se verá como a continuación.

ancho: 50%;

Establezca el ancho de la tabla en la mitad del ancho de la tabla principal. El 50% se toma del ancho del contenedor. porque no tiene otros padres. Es decir, la tabla ocupará exactamente la mitad de la ventana del navegador.

lado del título: abajo;

Colocamos el título en la parte inferior, debajo de la mesa.

borde: 4px sólido #006400;

Preparamos la mesa marco de color 4 píxeles de espesor.

colapso fronterizo: colapso;

Fusionar los bordes de las celdas.

diseño de mesa: fijo;

Configuramos la forma en que el navegador determina el ancho de la tabla.

tamaño de fuente: 13px;

Establezca el tamaño de fuente de las celdas del encabezado.

peso de fuente: negrita;

Pon el texto dentro de ellos en negrita.

antecedentes: #ADFF2F;

Establece el color de fondo de las celdas.

borde superior: 4px sólido #006400; borde inferior: 3px sólido #FF8C00;

Ajuste de los marcos superior e inferior.

color: #039;

Defina el color del texto.

relleno: 8px;

Establezca la distancia desde el contenido de las celdas hasta sus bordes en ocho píxeles.

En el pasado reciente, la popularidad de las tablas ha sido increíblemente alta; se usaban no solo para presentar datos tabulares, sino que también eran el medio principal para formar la estructura de un documento (a pesar de una serie de desventajas). Actualmente, el elemento de bloque DIV se utiliza cada vez más para el diseño de documentos.

La mesa sigue siendo el elemento principal. lenguaje HTML, que es indispensable para crear estructuras complejas y presentar datos tabulares, donde los elementos del bloque son impotentes y no tienen tanta variabilidad.

Pie de mesa

La mesa es una estructura compleja y está formada por varios etiquetas HTML. En una primera etapa se construye a partir de elemento de bloque

, que representa el fundamento, la base de la mesa. La siguiente etapa en la construcción es filas de la tabla, que se forman utilizando etiquetas emparejadas

La etapa final de la construcción de la mesa es creando células. Hay dos categorías de etiquetas para este propósito:

- la etiqueta emparejada crea una celda que sirve como encabezado de columna, esta etiqueta es opcional;
- una etiqueta emparejada obligatoria crea celdas, la base de la tabla;

Título 1	Título 2	Título 3	Título 4	Título 5
Celda 1,1	Celda 1,2	Celda 1.3	Celda 1.4	Celda 1.5
Celda 2.1	Celda 2,2	Celda 2,3	Celda 2.4	Celda 2.5
Resultado 1	Resultado 2	Resultado 3	Resultado 4	Resultado 5

Figura 1. Tabla

Como puede ver en el código anterior, la tabla contiene cuatro filas ( ) y cinco columnas. Las celdas de la primera fila son los encabezados de las columnas ( ). Las filas segunda a cuarta contienen los datos de la tabla principal ( ). Etiquetas , universal y puede contener no sólo Texto sin formato, pero también todo tipo de etiquetas, ¡incluso otras tablas!

Preste atención a la estructura de la tabla; tiene una estructura jerárquica estrictamente anidada; si la rompe y reorganiza las etiquetas en un orden diferente, la tabla no se mostrará en la página o se mostrará, pero no correctamente. Reglas básicas al diseñar una mesa:

etiqueta emparejada la base de la tabla, todas las demás etiquetas están anidadas dentro de ella;

etiqueta emparejada

el segundo nivel de la tabla o su fila debe estar anidado en una etiqueta

;

Etiquetas emparejadas

y contener datos tabulares;

Si pones cualquier otra etiqueta o texto fuera par de etiquetas

- Sección de encabezados de columna;

- Sección de base de mesa;

- Sección de datos resumidos, que resume toda la tabla;

, , , se colocan dentro de la mesa

El tercer nivel de la tabla o sus celdas deben estar anidados en una etiqueta.

, entonces estos datos serán ignorados y no se mostrarán en la página web;

Título de la tabla

La tabla ofrece la posibilidad de agregar un título usando una etiqueta emparejada.

, que se coloca después de la etiqueta . En principio se puede insertar en cualquier lugar de la tabla; esto no es un error. De forma predeterminada, el texto del encabezado aparece encima de la tabla.

Encabezado de tabla
Título 1	Título 2	Título 3	Título 4	Título 5
Celda 1,1	Celda 1,2	Celda 1.3	Celda 1.4	Celda 1.5
Celda 2.1	Celda 2,2	Celda 2,3	Celda 2.4	Celda 2.5
Resultado 1	Resultado 2	Resultado 3	Resultado 4	Resultado 5

Arroz. 2. Tabla con título.

Secciones de mesa

Usando secciones, que son etiquetas emparejadas, la tabla se puede dividir en partes lógicas. El navegador no los muestra en la página, pero puede establecer una representación diferente para cada uno de ellos. Hay las siguientes tres partes lógicas:

y debe contener etiquetas :

Encabezado de tabla
Título 1	Título 2	Título 3	Título 4	Título 5
Celda 1,1	Celda 1,2	Celda 1.3	Celda 1.4	Celda 1.5
Celda 2.1	Celda 2,2	Celda 2,3	Celda 2.4	Celda 2.5
Resultado 1	Resultado 2	Resultado 3	Resultado 4	Resultado 5

Fusionar celdas

Arriba, vimos una tabla con una estructura simple, pero ¿qué pasa si necesita complicarla, por ejemplo, combinar varias celdas en una? Para este caso existen atributos especiales COLSPAN Y ESPACIO DE FILAS etiquetas Y . El primero se utiliza para combinar horizontalmente, el segundo verticalmente. El valor del atributo es el número de celdas que se fusionarán:

1. Para fusionar horizontalmente las primeras cuatro celdas de la última fila de la tabla, el atributo es obligatorio Etiqueta COLSPAN (que contiene el texto “Total 1”) asigna el valor 4:

Totales (1+2+3+4)

2. Para fusionar celdas verticalmente la parte principal del documento (parte ), utilice el atributo ROWSPAN con un valor de 2:

Celda (1,1+2,1) Celda (1,2+2,2) Celda (1.3+2.3) Celda (1.4+2.4)

Tenga en cuenta que si combina celdas con los atributos COLSPAN o ROWSPAN, debe eliminar las celdas fusionadas del código, excepto aquella con la que comienza la combinación, su número dependerá del valor del atributo COLSPAN, ROWSPAN.

Es decir, en el ejemplo 1 se fusionan cuatro celdas, comenzando por la primera, a la que se le asigna el atributo COLSPAN=4 (ya que con ella comienza la fusión), las tres restantes se deben eliminar (ya que se consideran fusionadas). En el código solo quedará la quinta celda (ya que no está incluida en la unión).

El mismo principio se aplicará a la unificación vertical. En el segundo ejemplo, a las primeras cuatro celdas de la fila se les asigna el atributo ROWSPAN=2, como resultado, las primeras cuatro celdas inferiores se eliminan del código, porque se les considera unidos. Excepto este último, que no está incluido en la asociación.

Encabezado de tabla
Título 1	Título 2	Título 3	Título 4	Título 5
Celda (1,1+2,1)	Celda (1,2+2,2)	Celda (1.3+2.3)	Celda (1.4+2.4)	Celda 1.5
Celda (1,1+2,1)	Celda (1,2+2,2)	Celda (1.3+2.3)	Celda (1.4+2.4)	Celda 2.5
Total 1+ Total 2+ Total 3+ Total 4	Resultado 5

Arroz. 4. Fusionar celdas de tabla usando Atributos de COLSPAN, ESPACIO DE FILAS.

Tocadores con propiedades CSS

Después de crear la tabla usando HTML, ir a siguiente etapa, diseño de tablas usando estilos CSS que se aplican a las etiquetas

.

marcos de celda

Puedes dibujar un borde alrededor de las celdas usando propiedades CSS **borde**, con la siguiente sintaxis:
Borde: “grosor de línea” “tipo de fuente” “color”;
**grosor de la línea**- se puede especificar en píxeles (px), además de utilizar palabras reservadas especiales: delgado (2 px), mediano (4 px) y grueso (6 px);

**tipo de letra**- los valores de los atributos son palabras especiales: punteado (línea de puntos), discontinuo (línea de puntos), sólido (línea), doble (línea doble), etc.

Fig 5. Aplicación a las celdas de la tabla. propiedades de borde, para enmarcar cada celda con un marco.

Si desea que el marco esté solo entre las celdas y no cada una por separado, debe usar la propiedad de estilo. **colapso fronterizo**, tomando el valor:

**colapsar**- sólo hay un cuadro entre las celdas;

**separado**- cada celda está enmarcada por su propio marco;

Figura 6. Aplicación de la propiedad de colapso de borde a una tabla. Las celdas adyacentes están separadas por un marco.

Tamaños de celda

De forma predeterminada, el navegador forma los tamaños de celda según su contenido; si necesita configurar un formulario estático, use la propiedad de estilo ancho, alto; En este caso, si el contenido de la celda no cabe en una línea, se transfiere a la siguiente.

Fig 7. Uso de las propiedades de ancho y alto para establecer el ancho y alto de las celdas.

relleno celular

Hay dos tipos de sangría, externa e interna, el primer tipo de sangría se establece entre los bordes de las celdas adyacentes, el segundo desde los bordes de las celdas hasta su contenido. Las propiedades CSS que crean sangría se enumeran a continuación:

**relleno**- relleno, el valor se establece en píxeles (px);

**espaciado de fronteras** - margen, el valor también se establece en píxeles (px). Este parámetro no debe usarse si (colapso de borde: colapso), porque la sangría se establece entre los bordes de las celdas adyacentes y, si la propiedad especificada está presente, las celdas adyacentes están separadas por un solo marco;

Arroz. 8. Aplicación a la mesa propiedades de relleno, para establecer sangrías.

Ubicación del encabezado

De forma predeterminada, el encabezado de la tabla se encuentra encima de él, pero la posición se puede cambiar usando propiedad de estilo **lado del título**, que toma los siguientes valores:

**arriba**- el título se encuentra encima de la tabla;

**abajo**- el título se encuentra debajo de la tabla;

color de celda

Para colorear una celda un cierto color necesitas usar la propiedad **color de fondo**:

Arroz. 10. Alinear el contenido de las celdas propiedades de alineación de texto y alineación vertical.

Aplicar estilo al contenido de las celdas

El formato del contenido se refiere al formato del texto contenido en las celdas. Lo esencial propiedad CSS, utilizado para este propósito es **fuente**:

Arroz. 11. Decorar el contenido de la celda con la propiedad de fuente.

Todos los estilos CSS aplicados a la tabla.

Muchos webmasters están seguros de que utilizar tablas HTML en plantillas es una mala práctica. Pero en Esta lección sólo consideraremos tablas CSS. ¿Cuál es la diferencia entre tablas HTML y CSS? ¿Debería usar tablas CSS? ¿Si es así, cómo?

Cómo crear una tabla CSS

El modelo de tabla CSS se basa en el modelo de tabla HTML4 y es bien compatible con los navegadores. En ambos modelos, la estructura de la mesa existe paralela a la presentación visual.

Los principales elementos de la estructura son las líneas. La fila se define explícitamente y las columnas dependen de cómo se definen las filas y las celdas.

Probablemente hayas trabajado con tablas HTML antes. En caso afirmativo, no tendrá problemas para crear tablas CSS.

Cada elemento de la tabla HTML tiene un equivalente CSS. La única diferencia es que no hay diferencia entre td y th en la variante CSS.

A continuación se muestra una lista de elementos de la tabla HTML y sus valores CSS correspondientes.

Tabla ( mostrar: tabla ) tr ( mostrar: fila-tabla ) thead ( mostrar: grupo-encabezado-tabla ) tbody ( mostrar: grupo-filas-tabla ) tfoot ( mostrar: grupo-pie-de-tabla ) col ( mostrar: tabla- columna) colgroup (mostrar: grupo-columna-tabla) td, th (mostrar: celda-tabla) título (mostrar: título-tabla)

Los subtítulos se pueden colocar en la parte superior o inferior de la tabla usando la propiedad caption-side:

#caption (lado del título: arriba) #caption (lado del título: abajo)

Es fácil descubrir cómo crear una tabla CSS según la lista siguiente. Aquí hay una tabla de ejemplo.

#table (mostrar: tabla;).row (mostrar: tabla-fila;).cell (mostrar: tabla-celda;)

Si miras el código HTML de ejemplo, entonces podrá distinguir fácilmente la estructura de la tabla (usando elementos div y span con clases e ID en lugar de table, td y tr).

Una cantidad muy pequeña de código CSS representa los elementos div y span de una tabla.

Además de las propiedades anteriores, el modelo de tabla CSS incluye el valor inline-table, que define nueva mesa como display: table , pero dentro del contexto del formato integrado en el código HTML.

Columnas y su agrupación.

Dado que las celdas de la tabla descienden de las filas de la tabla, tiene sentido utilizar algunas propiedades para formar columnas. El modelo de tabla CSS le permite aplicar las siguientes propiedades a las columnas y su agrupación:

**borde**- una propiedad normal, siempre que no se utilice la propiedad de colapso de borde en el elemento de la tabla;

**fondo**— una propiedad normal, siempre que la fila y la celda tengan un fondo transparente;

**ancho**— establecer el ancho de la columna;

**visibilidad**— si el valor está colapsado (el único valor disponible), entonces la celda de la columna no se mostrará (se fusionará con otras columnas y el ancho de la tabla estará alineado).

Pila de tablas CSS

Varios elementos de la mesa tienen nivel diferente en una pila para permitir el uso de diferentes fondos en diferentes capas.

Estas capas se pueden ver en la figura presentada.

tabla - capa más inferior

grupo de columnas

columnas

grupo de cuerdas

líneas

células - la capa superior

El fondo de la capa solo será visible si la capa superior tiene un fondo transparente.

Este gran manera para retiro celdas vacias realmente vacío usando fondo transparente para ellos, a través del cual será visible una fila, columna o tabla.

Algoritmo de plantilla de tabla

El ancho de una tabla CSS se puede calcular utilizando uno de dos algoritmos. El algoritmo se selecciona utilizando la propiedad de diseño de tabla y dos valores:

**fijado**(fijo): el ancho de la plantilla no está determinado por el contenido, sino estableciendo el ancho de la tabla, las celdas, los marcos y la distancia entre las celdas;

**auto**(automático): el ancho de la tabla se establece en función del ancho de las columnas y marcos.

El modelo de plantilla fija se calcula una vez y es muy rápido. A Modo automático(predeterminado) requiere múltiples pasadas a través de la tabla HTML.

Si define explícitamente el ancho de la tabla, entonces debe utilizar un modelo de cálculo de ancho fijo.

De forma predeterminada, la altura de la celda se establece en el mínimo requerido para mostrar el contenido. Pero puedes definir explícitamente la altura de la celda. Todas las celdas de la fila tendrán la altura de la celda con el valor máximo.

La propiedad de alineación vertical determina la alineación del contenido en una línea.

base

abajo

medio

sub, super, texto superior, texto inferior,<длина>, <процент>

El último grupo de valores no se aplica a las celdas, sino al texto que contienen. Las celdas en este caso se alinearán de acuerdo con el valor de referencia.

Bordes de tabla CSS

Hay tres propiedades interesantes para los marcos de mesa:

**colapso fronterizo**- Puede hacer que los valores se colapsen, se separen o se hereden.

**espaciado de fronteras**- puede importar<расстояние_по_горизонтали>, <расстояние_по_вертикали>, o heredar . Define la distancia entre marcos de celda.

**celdas vacias**- Puede hacer que los valores se muestren, oculten o hereden. Si la celda está vacía o tiene propiedad de visibilidad: oculto, entonces el contenido no se mostrará de forma predeterminada. Configurar la propiedad celdas vacías: mostrar mostrará el fondo y el borde de una celda vacía.

¿Necesito usar tablas CSS?

¿Son las tablas CSS mejores que las tablas HTML? En caso afirmativo, ¿cuáles son sus ventajas? Si no es así, ¿por qué no deberían utilizarse? Buena pregunta, para lo cual no hay una respuesta clara.

Cuando analiza el uso de tablas HTML frente a una combinación de divs y código CSS, notará las siguientes desventajas de las tablas:

**Codificación adicional**- Las tablas HTML requieren codificación adicional estructuras versus elementos div. Pero las tablas CSS también requieren el uso de clases e identificadores adicionales.

**Estructura rígida**— Las tablas HTML están estrictamente ligadas al contenido. El orden de las celdas debe ser el mismo que se mostrará. Pero la misma limitación se aplica a las tablas CSS/

**Salida en navegadores**- los navegadores realizan múltiples pasadas estructura HTML mesas. Pero para las tablas CSS la situación será similar.

De acuerdo con lo anterior las tablas no tienen CSS ventajas significativas antes de las tablas HTML cuando se usan en plantillas.

Las tablas CSS son una solución más semántica ya que existe una clara separación entre estructura de datos y presentación. apariencia.

Conclusión

Las tablas CSS son bastante fáciles de aprender y usar. Pero no tienen ventajas obvias sobre las tablas HTML, excepto por un código más semántico.

Quizás la práctica muestre las ventajas o desventajas de las tablas CSS. ¿Tiene experiencia usando tablas CSS en proyectos reales?

Diseñar tablas usando CSS es una actividad 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. Bonito diseño Las tablas CSS implican el uso de diseño de bordes, fondo de tabla, fondo de celda, espacio entre ellos y mucho 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 las celdas.
La palabra sólido significa diseño continuo. Puede especificar otros valores.
Lo más frecuente es que se utilice 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.
,	,

Cómo configurar el color del borde de la tabla en CSS. Color de fondo de la celda. Usando la propiedad de borde

Segundo ejemplo

anchura y altura

lado del título

colapso fronterizo

espaciado de fronteras

celdas vacias

diseño de mesa

Ejemplo de diseño de mesa.

Pie de mesa

Título de la tabla

Secciones de mesa

Fusionar celdas

Tocadores con propiedades CSS

marcos de celda

Tamaños de celda

relleno celular

Ubicación del encabezado

color de celda

Aplicar estilo al contenido de las celdas

Todos los estilos CSS aplicados a la tabla.

Cómo crear una tabla CSS

Columnas y su agrupación.

Pila de tablas CSS

Algoritmo de plantilla de tabla

Bordes de tabla CSS

¿Necesito usar tablas CSS?

Conclusión

Borde de la mesa

Título de la tabla

Fondo de la mesa

Fondo de celda

Espacio entre celdas

diferencia del navegador

CSS: diseño de tablas, ejemplos.

Conclusión