| Define el contenido de la tabla. |
|
| Define el nombre de la tabla. |
|
| Define la celda del encabezado de la tabla. |
|
| Define una fila de la tabla. |
|
| Define una celda de datos de tabla. |
|
| Se utiliza para contener el encabezado del grupo en la tabla (encabezado de la tabla). |
|
| Se utiliza para contener el "cuerpo" de la tabla. |
|
| Se utiliza para contener el "pie de página" de la tabla. |
|
| Define las propiedades de columna especificadas para cada columna dentro de una etiqueta. |
|
| Define un grupo de columnas en una tabla. |
Trabajar con relleno en una tabla Usar relleno en una tabla tabla (margen: 0 auto;) td, th relleno: 19px; ) título ( padding-bottom : 19px ; /* establecer el relleno inferior para todos los lados */ )
1
2
3
4
|
2 | | | |
|
3 | | | |
|
4 | | | |
Sangría de tabla
- En este ejemplo nosotros:
- Colocamos la mesa en el centro mediante la técnica de centrado horizontal con sangrías externas (margen: 0 auto).
Para el nombre de la tabla (etiqueta), configuramos el relleno inferior en 19 píxeles. Espero que los números impares no te molesten :) El resultado de nuestro ejemplo: Espacio entre celdas
Después del ejemplo comentado anteriormente, habrás notado que todavía tenemos un espacio entre todas las celdas de la tabla. Veamos cómo eliminar el espacio entre las celdas de la tabla o aumentarlo. Cambiar el espacio entre tablas table ( vertical-align : top ; /* la parte superior del elemento está alineada con la parte superior del elemento más alto */ float : left ; margin-right : 30px ; ) td, th ( border : 1px solid #F50 /* establece un borde sólido de 1 píxel en color #F50 */ padding : 19px ; /* establece relleno para todos los lados */ ) caption ( font-weight : negrita ; /* negrita */ ) .first ( border- espaciado: 30px 10px; / * el espacio entre las celdas de la tabla (el primer valor es horizontal, el segundo es vertical)*/ ) .segundo (espaciado de bordes: 0; ) .tercero (espaciado de bordes: 0.2em; /* el espacio entre celdas de la tabla (horizontal y vertical) */ ) espacio entre bordes: 30 px 10 px;
1
2
3
|
2 | | |
|
3 | | |
espaciado de bordes: 0;
1
2
3
|
2 | | |
|
3 | | |
espacio entre bordes: 0,2 em;
1
2
3
|
2 | | |
|
3 | | |
Sangría de tabla
- flotador: izquierda). Si te perdiste el tema de los elementos flotantes, siempre puedes volver a él en este tutorial: "".
- Además, configuramos el margen derecho de las tablas en 30 px y configuramos la alineación vertical de las tablas (la parte superior del elemento está alineada con la parte superior del elemento más alto). Volveremos a una consideración detallada de esta propiedad en este artículo.
- ) – estilo atrevido.
- Para las celdas de la tabla (encabezado y celdas de datos), configuramos un borde sólido de 1 px con color hexadecimal #F50 y configuramos un relleno de 19 px en todos los lados.
- Para la primera tabla con clase .first establecemos el espacio entre celdas de la tabla (propiedad de espaciado de bordes) igual a 30px 10px, para la segunda tabla con clase .first igual a cero, para la tercera tabla con clase .third igual a 0.2em .
Tenga en cuenta que si solo se especifica un valor de longitud en la propiedad de espaciado de bordes, indica los intervalos, tanto horizontal como verticalmente, y si se especifican dos valores de longitud, el primero determina la distancia horizontal y el segundo la vertical. . La distancia entre los bordes de celdas adyacentes se puede especificar en unidades CSS (px, cm, em, etc.). No se permiten valores negativos.
Para el nombre de la tabla (etiqueta), configuramos el relleno inferior en 19 píxeles. Espero que los números impares no te molesten :) Mostrar bordes alrededor de las celdas de la tabla Puedes decir: - Entonces, eliminamos el espacio entre las celdas usando la propiedad border-spacing con un valor de 0, pero ¿por qué los bordes de nuestras celdas ahora se cruzan?
Los bordes dobles son causados por el hecho de que el borde inferior de una celda se agrega al borde superior de la celda que está debajo de ella, una situación similar ocurre en los lados de las celdas y esto es lógico desde el punto de vista de la visualización de la tabla, pero Afortunadamente, existe una manera de decirle al navegador que no queremos ver un comportamiento tan flexible en los bordes de las celdas.
Para hacer esto, necesita usar la propiedad CSS de colapso de borde. Por extraño que parezca, usar la propiedad de colapso de borde con el valor de colapso es la mejor manera de eliminar el espacio entre celdas sin que se formen bordes dobles entre ellas.
Comparemos el comportamiento de los bordes cuando usamos la propiedad de espaciado de bordes con un valor de 0 y la propiedad de colapso de bordes con un valor de colapso: Un ejemplo de visualización de bordes alrededor de las celdas de una tabla ( float : left ; /* las tablas se convierten en elementos flotantes, desplazadas hacia la izquierda */ margin-right : 30px ; /* establece los márgenes exteriores a la derecha */ ) td, th ( border : 5px solid #F50 /* establece un borde sólido de 5 píxeles en color #F50 */ ancho: 50px /* ancho de las celdas */ alto: 75px /* alto de las celdas */ ) caption (font-weight); : negrita ; /* negrita */ ) .first ( espacio entre bordes : 0 ; /* no hay espacio entre las celdas de la tabla */ ) .segundo ( ) espaciado de bordes: 0;
1
2
3
|
2 | | |
|
3 | | |
colapso fronterizo: colapso;
1
2
3
|
2 | | |
|
3 | | |
Sangría de tabla
- Hicimos que nuestras tablas flotaran y las movimos hacia la izquierda (flotante: izquierda), establecimos su margen exterior a la derecha en 30px.
- Establezca el nombre de la tabla (etiqueta) en negrita.
- Para las celdas de la tabla (encabezado y celdas de datos), configuramos un borde sólido de 5 píxeles con color hexadecimal #F50 y establecemos un ancho fijo de 50 píxeles y una altura de 75 píxeles.
- Para la primera tabla con la clase .first, configuramos el espacio entre las celdas de la tabla en cero (espaciado de bordes: 0;), y para la segunda tabla con la clase .segunda, configuramos la propiedad border-collapse en contraer, lo que fusiona los bordes de las celdas en uno cuando Quizás.
Para el nombre de la tabla (etiqueta), configuramos el relleno inferior en 19 píxeles. Espero que los números impares no te molesten :) Comportamiento de las celdas vacías. Puede utilizar CSS para establecer si los bordes y fondos de las celdas vacías de una tabla deben mostrarse o no. Este comportamiento está controlado por la propiedad de celdas vacías, que de forma predeterminada, como habrás notado en los ejemplos anteriores, muestra celdas vacías.
Pasemos a un ejemplo: Un ejemplo de visualización de celdas de tabla vacías table ( float : left ; /* las tablas se convierten en elementos flotantes, desplazadas hacia la izquierda */ margin-right : 30px ; /* establece los márgenes exteriores a la derecha */ ) td, th ( border : 1px solid #F50 /* establece un borde sólido de 1 píxel en color #F50 */ ancho: 75px ; /* ancho de las celdas */ alto: 50px /* alto de las celdas */ fondo: trigo /* conjunto; el color de fondo de las celdas */) título (fuente -peso: negrita; /* negrita */ .first (celdas vacías: mostrar; /* mostrar celdas vacías (predeterminado) */) .segundo (celdas vacías: ocultar ; /* ocultar celdas vacías */ ) celdas vacías: mostrar;
1
2
3
|
2 | |
☺ |
|
3 |
☺ | |
celdas vacías: ocultar;
1
2
3
|
2 | |
☺ |
|
3 |
☺ | |
Comprender cómo funciona la propiedad de celdas vacías a partir de este ejemplo es muy simple, si está configurada en ocultar, las celdas vacías y el fondo en ellas se ocultarán, si está configurada en mostrar (predeterminado), entonces se mostrarán. Ubicación del encabezado de la tabla Veamos otra propiedad simple para diseñar tablas: caption-side, que establece la posición del encabezado de la tabla (arriba o debajo de la tabla). De forma predeterminada, la propiedad del lado del título está configurada en top , lo que coloca el título encima de la tabla. Para colocar un título debajo de la tabla, debe usar la propiedad con el valor bottom .
Veamos un ejemplo del uso de esta propiedad: Un ejemplo del uso de la propiedad del lado del título td, th ( borde: 1 px azul sólido; /* establecer un borde sólido de 1 píxel en azul */ ) .topCaption ( lado del título: arriba; /* el título de la tabla está encima */ ) .bottomCaption ( lado del título : abajo ; /* el título de la tabla está debajo */ ) Encabezado encima de la tabla Nombre Precio
| Pez | 350 rublos |
| Carne | 250 rublos |
Encabezado debajo de la mesa Nombre Precio
| Pez | 350 rublos |
| Carne | 250 rublos |
En este ejemplo creamos dos clases, que controlan la posición del encabezado de la tabla. La primera clase (.topCaption) coloca el título de la tabla encima, lo aplicamos a la primera tabla, y la segunda clase (.bottomCaption) coloca el título de la tabla debajo, lo aplicamos a la segunda tabla. La clase .topCaption tiene un valor de propiedad predeterminado en el lado del título y está destinada a fines de demostración.
Para el nombre de la tabla (etiqueta), configuramos el relleno inferior en 19 píxeles. Espero que los números impares no te molesten :) Alineación horizontal y vertical En la mayoría de los casos, cuando trabaje con tablas, necesitará ajustar la alineación del contenido dentro del encabezado y las celdas de datos. La propiedad text-align se utiliza para la alineación horizontal, similar a cualquier información de texto. Discutimos el uso de esta propiedad para texto anteriormente en el artículo "".
Para establecer la alineación del contenido en las celdas, debe utilizar palabras clave especiales con la propiedad text-align. Veamos el uso de palabras clave para esta propiedad en el siguiente ejemplo. Un ejemplo de alineación horizontal en una tabla table /* fusiona los bordes de las celdas en uno */ ) td, th ( border : 1px solid ; ) .left ( text-align : left ; /* alinea el texto de la celda a la izquierda */ ). right ( text-align : right ; /* alinea el texto de la celda a la derecha */ ) .center ( text-align : center ; /* alinea el texto de la celda al centro */ ) .justify ( text-align : justify ; /* alinea el texto de la celda al ancho */ )
Descripción del valor
| izquierda | Alinea el texto de la celda a la izquierda. Este es el valor predeterminado (si la dirección del texto es de izquierda a derecha). |
| bien | Alinea el texto de la celda a la derecha. Este es el valor predeterminado (si la dirección del texto es de derecha a izquierda). |
| centro | Alinea el texto de la celda al centro. |
| justificar | Estira las líneas para que cada línea tenga el mismo ancho (estira el texto de la celda para que se ajuste a su ancho). |
En este ejemplo creamos cuatro clases, que especifican diferentes alineaciones horizontales en las celdas y las aplican en orden a las filas de la tabla. El valor en la celda corresponde al valor de la propiedad de alineación de texto.
Para el nombre de la tabla (etiqueta), configuramos el relleno inferior en 19 píxeles. Espero que los números impares no te molesten :)
Además de la alineación horizontal, también puede definir la alineación vertical en las celdas de la tabla utilizando la propiedad de alineación vertical.
Tenga en cuenta que cuando se trabaja con celdas de una tabla, solo se aplican los siguientes valores * de esta propiedad:
*: los valores Sub, super, text-top, text-bottom, length y % aplicados a una celda de la tabla se comportarán como si usaran el valor de referencia.
Veamos un ejemplo de uso: Un ejemplo de alineación vertical en una tabla (border-colapso: colapsar; /* fusionar los bordes de las celdas en uno */) td, th (borde: 1px sólido; /* establecer un borde sólido de 1 píxel */ altura: 55px ; /* establece la altura de las celdas */ ) .baseline ( vertical-align : baseline ; /* alinea la línea base de la celda con la línea base principal */ ) .top ( vertical-align : top ; /* alinea el contenido de la celda verticalmente con el borde superior */ ) .middle ( vertical-align : middle ; /* alinea el contenido de la celda verticalmente a lo largo del medio */ ) .bottom ( vertical-align : bottom ; /* alinea el contenido de la celda verticalmente a lo largo de la parte inferior borde */ )
Descripción del valor
| base | Alinea la línea base de la celda con la línea base del padre. Este es el valor predeterminado. |
| arriba | Alinea el contenido de una celda verticalmente con el borde superior. |
| medio | Alinea el contenido de una celda verticalmente en el medio. |
| abajo | Alinea el contenido de una celda verticalmente a lo largo del borde inferior. |
En este ejemplo creamos cuatro clases, que especifican diferentes alineaciones verticales en las celdas y las aplican en orden a las filas de la tabla. El valor de la celda corresponde al valor de la propiedad de alineación vertical que se aplicó a esa fila. Algoritmo para colocar un diseño de tabla en un navegador CSS utiliza de forma predeterminada un algoritmo para que el navegador organice automáticamente el diseño de la tabla. En este caso, el ancho de la columna lo establece el contenido más amplio y sin interrupciones de la celda. Este algoritmo puede resultar lento en algunos casos porque el navegador debe leer todo el contenido de la tabla antes de determinar su diseño final.
Para cambiar el tipo de diseño de tabla del navegador de automático a fijo, debe usar la propiedad CSS table-layout con el valor fijo.
En este caso, la ubicación horizontal depende únicamente del ancho de la tabla y del ancho de las columnas, y no del contenido de las celdas.
El navegador comienza a mostrar la tabla inmediatamente después de recibir la primera fila. Como resultado, un algoritmo fijo le permite crear un diseño para dicha tabla más rápido que usando la opción automática. Cuando trabaje con tablas grandes, puede utilizar un algoritmo fijo para mejorar el rendimiento. Un ejemplo del uso de la tabla de propiedades de diseño de tabla ( ancho : 50% ; /* establece el ancho de la tabla */ ajuste de palabras : palabra de ruptura ; /* una palabra se puede dividir en cualquier lugar */ ) td, th ( borde : 1px chocolate sólido ; /* establece un borde sólido de 1 píxel en color chocolate */ .test ( table-layout : auto ; /* algoritmo automático para colocar el diseño de la tabla en el navegador (predeterminado) */ ) .test2 (diseño de tabla: fijo; /* algoritmo fijo de colocación del diseño de la tabla por parte del navegador */) diseño de tabla: automático; Nombre 2009 2010 2011 2012 2013 2014 2015 2016
| Trigo |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
diseño de mesa: fijo; Nombre 2009 2010 2011 2012 2013 2014 2015 2016
| Trigo |
125 |
215 |
2540 |
33287 |
695878 |
1222222 |
125840000 |
125 |
Sangría de tabla Aplicar estilos a filas y columnas de tablas Ya hemos abordado parcialmente los métodos para diseñar filas y columnas de tablas en el artículo "". En este artículo, analizamos el uso de la pseudoclase de grupo, que le permite alternar estilos de fila en tablas usando valores pares ( honesto) e impar ( extraño), o según una fórmula matemática elemental.
Repasemos las técnicas que cubrimos anteriormente y exploremos nuevas formas de diseñar filas y columnas en tablas. Pasemos a los ejemplos. Un ejemplo del uso de pseudoclase:nth-child con tablas table ( ancho : 100% ; /* establecer el ancho de la tabla */ border-collapse : colapsar ; /* fusionar los bordes de las celdas en uno */ ) td, th ( borde: 1px sólido; /* establece un borde sólido de 1 píxel de tamaño */) tr:nth-child(even) ( /* selecciona todas las filas pares */ borde: 3px rojo sólido; /* establece un borde sólido de 3 píxeles en rojo */ ) td:nth-child (4n+2) ( /* seleccione cada cuarto elemento, comenzando desde el segundo */ fondo : #E8E8FF ; )
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
2 | | | | | | |
| | | | | | |
|
3 | | | | | | |
| | | | | | |
|
4 | | | | | | |
| | | | | | |
Sangría de tabla
Para el nombre de la tabla (etiqueta), configuramos el relleno inferior en 19 píxeles. Espero que los números impares no te molesten :)
Pasemos al siguiente ejemplo, en el que veremos opciones para aplicar estilo a las filas de la tabla. Un ejemplo de estilo de filas en tablas table ( ancho : 100% ; /* establecer el ancho de la tabla */ border-collapse : colapsar ; /* fusionar los bordes de las celdas en uno */ ) td, th ( border : 1px solid ; /* set un borde sólido de tamaño 1 píxel */ ) tfoot ( color de fondo : coral ; /* establecer el color de fondo */ ) thead ( color de fondo : plata ; /* establecer el color de fondo */ ) tbody tr:hover ( fondo -color: caqui; /* establece el color de fondo */)
Costo del servicio
| Suma |
15 000 |
|
1 |
1 000 |
|
2 |
2 000 |
|
3 |
3 000 |
|
4 |
4 000 |
|
5 |
5 000 |
En este ejemplo nosotros:
- Establecemos el ancho de la tabla al 100% del ancho del elemento principal y establecemos un borde sólido de 1 px de ancho para el encabezado y las celdas de datos.
- Establezca el color de fondo para el elemento (“pie de página” de la tabla) – coral, se configuró el color de fondo para el elemento (“encabezado” de la tabla) plata.
- Para elementos
, que están dentro del elemento (cuerpo de la tabla) establece el color de fondo para que cambie al pasar el mouse (pseudoclase: hover) c blanco por color caqui(toda la línea está resaltada).
Para el nombre de la tabla (etiqueta), configuramos el relleno inferior en 19 píxeles. Espero que los números impares no te molesten :) Arroz. 153 Ejemplo de estilo de filas en tablas El siguiente ejemplo analiza la aplicación del redondeo de esquinas a las celdas de una tabla (propiedad). Un ejemplo de cómo redondear las esquinas de una tabla de celdas (margen: 0 auto; /* centrar horizontalmente con márgenes exteriores */) th (ancho: 50px; /* establece el ancho de la celda */ alto: 50px; /* establece el altura de la celda */ borde: 5px sólido transparente /* establece un borde sólido transparente de 5 píxeles */ ) th:hover ( /* aplica estilo al elemento al que apunta actualmente el cursor del mouse */ fondo: azul; /* establece el color de fondo */ color: naranja /* establece el color del texto */ border-radius: 100% /* establece el radio de redondeo */ border: 5px solid orange /* establece un borde sólido de 5 píxeles en naranja; color */ )
En este ejemplo nosotros:
- Centramos la tabla con márgenes exteriores, establecimos el ancho y alto de las celdas del encabezado en 50 px y especificamos transparente borde de 5 píxeles.
- Establecimos que al pasar el cursor (pseudoclase: hover) sobre la celda del encabezado, recibe un fondo azul bandera, naranja color del texto, borde naranja colores 5 píxeles y radio de redondeo 100%.
- borde transparente es necesario para reservar espacio para el borde, que se mostrará al pasar el cursor; si no se hace esto, la mesa “saltará”.
Para el nombre de la tabla (etiqueta), configuramos el relleno inferior en 19 píxeles. Espero que los números impares no te molesten :)
El siguiente ejemplo cubre el uso de elementos HTML y su estilo. Un ejemplo de cómo resaltar las columnas de una tabla (ancho: 100%; /* establece el ancho de la tabla */ border-collapse: colapso; /* fusiona los bordes de las celdas en uno */) td, th ancho: 25%; /* establece el ancho de las celdas */ ) col:first-child ( background : rgba(0,0,0,.3) ; /* establece el color de fondo */ ) col:nth-of-type(2) ( fondo : rgba(0,0,0,.2) ; /* establece el color de fondo */ ) col:last-child ( fondo : rgba(0,0,0,.1) ; /* establece el color de fondo */ )
Solicitud No. Servicio Precio, frotar. Total
|
1 | Cantando |
6 000 |
6 000 |
|
2 | Lavado |
2 000 |
2 000 |
|
3 | Limpieza |
1 000 |
1 000 |
|
4 | Persistente |
1 500 |
1 500 |
|
5 | Lectura |
3 000 |
3 000 |
En este ejemplo nosotros:
Para el nombre de la tabla (etiqueta), configuramos el relleno inferior en 19 píxeles. Espero que los números impares no te molesten :)
Bueno, el ejemplo final, que es bastante difícil de entender y requiere conocimientos avanzados en CSS, ya que toca temas futuros previstos para un estudio detallado en este curso.
En el ejemplo anterior, nos dimos cuenta de que solo se puede aplicar una propiedad CSS a un elemento HTML: color de fondo (color de fondo), pero no se puede establecer directamente el color de fondo al pasar el cursor (la pseudoclase :hover) sobre este elemento. En este ejemplo, veremos cómo resaltar una columna de una tabla usando solo CSS. Un ejemplo de cómo resaltar columnas y filas de una tabla al pasar el cursor sobre la mesa (ancho: 100%; /* establecer el ancho de la tabla */ border-collapse: colapsar; /* fusionar los bordes de las celdas en uno */ posición: relativa; /* elemento con posicionamiento relativo */ ) td, th ( borde : 1px verde sólido ; /* establece un borde sólido de 1 píxel verde */ ancho : 25% ; /* establece el ancho de las celdas */ alto : 45px ; /* establece el altura de las celdas */ ) tr:hover: not(:first-child) ( /* aplica estilo al elemento al que apunta actualmente el cursor del mouse (pero no a la fila con las celdas del encabezado) */ background : lime ; /* set el color de fondo */ ) td:hover:after ( /* aplica estilo al elemento al que apunta actualmente el cursor del mouse y agrega contenido después de cada elemento */ content : "" /* agrega nuestro contenido */ display : block /* muestra el elemento como un elemento de bloque */ posición: absoluta /* elemento con posicionamiento absoluto */ ancho: 25% /* establece el ancho del bloque que aparecerá */ arriba: 0; /* determina el desplazamiento del elemento posicionado con respecto al borde superior */ bottom : 0 ; /* determina el desplazamiento del elemento posicionado con respecto al borde inferior */ background: forestgreen; /* establecer el color de fondo */ z-index : -1 ; /* determinar el orden de superposición del elemento a lo largo del eje z */ )
Solicitud No. Servicio Precio, frotar. Total
|
1 | Cantando |
6 000 |
6 000 |
|
2 | Lavado |
2 000 |
2 000 |
|
3 | Limpieza |
1 000 |
1 000 |
|
4 | Persistente |
1 500 |
1 500 |
|
5 | Lectura |
3 000 |
3 000 |
En este ejemplo nosotros:
- Configuramos nuestra tabla para que ocupe el 100% del elemento principal, las celdas de la tabla para que ocupen el 25% del elemento principal y tengan un borde verde sólido de 1 píxel, la altura del encabezado y las celdas de datos es de 45px. Eliminamos el espacio entre las celdas usando la propiedad de colapso de borde con el valor
.
- Y así, usando el pseudoelemento ::after agregamos contenido después de cada elemento
al pasar el mouse. El pseudoelemento ::after debe usarse junto con la propiedad content, gracias a la cual insertamos un elemento de bloque que tiene un color de fondo bosque verde y tiene posicionamiento absoluto.
- El posicionamiento absoluto aquí es necesario para desplazar el elemento en relación con el borde especificado de su antepasado, y el antepasado debe tener un valor de posición distinto del predeterminado: estático; de lo contrario, la cuenta regresiva será relativa al borde especificado de la ventana del navegador, para esto razón por la que configuramos la tabla en posicionamiento relativo).
- Establecemos la propiedad superior para nuestro bloque generado, que especifica la dirección en la que el elemento posicionado se desplaza desde el borde superior, y la propiedad inferior, que especifica la dirección en la que el elemento posicionado se desplaza desde el borde inferior. Para ambas propiedades se especificó el valor 0, por lo que el bloque ocupará completamente el elemento de la parte inferior y superior de la tabla, el ancho de este bloque se estableció en 25%, este valor corresponde al ancho de la celda misma.
- Y la propiedad final que configuramos para este bloque: índice z con un valor de "-1" determina el orden de los elementos posicionados según eje Z. Esta propiedad es necesaria para que el texto esté delante de este bloque y no detrás de él; si no establece un valor menor que cero, el bloque cubrirá el texto.
Para el nombre de la tabla (etiqueta), configuramos el relleno inferior en 19 píxeles. Espero que los números impares no te molesten :)
Si en esta etapa de tu estudio no comprendes el proceso de posicionamiento de elementos, entonces no te desanimes, este es un tema difícil de entender, que tampoco consideramos, pero definitivamente lo consideraremos en el próximo artículo de la revista; libro de texto “Posicionamiento de elementos en CSS”. Preguntas y tareas sobre el tema. Antes de pasar al siguiente tema, complete la tarea de práctica:
 Si tiene dificultades para completar la tarea de práctica, siempre puede abrir el ejemplo en una ventana separada e inspeccionar la página para comprender qué código CSS se utilizó.
2016-2019 Denis Bolshakov, puede enviar comentarios y sugerencias en el sitio a [email protected]
Si siempre hubiera seguido el principio de suficiencia razonable, no estarías leyendo estas líneas ahora. Lo que quiero decir es que, aunque el tema propuesto está bastante bien tratado y las soluciones existentes me satisfacen completamente, todavía no lograron llevarme a un estado de completa tranquilidad... en general, comencé a reinventar la rueda. Hablaremos de tablas HTML "rayadas", es decir. sobre tablas con filas alternas de diferentes estilos. En particular, para mejorar la percepción de los datos, estas líneas pueden ser multicolores. A continuación se muestra un ejemplo de dicha tabla:
Me propuse la siguiente tarea: sin cambiar el archivo HTML:
| Lancetas |
30 tipos |
Esqueleto de cordados |
| pez cartilaginoso |
600 especies |
esqueleto cartilaginoso |
| pez óseo |
20.000 especies |
esqueleto óseo |
| Anfibios |
3.000 especies |
Esqueleto calado |
| reptiles |
6.000 especies |
Esqueleto sólido |
| Aves |
8.000 especies |
Esqueleto sólido |
| Mamíferos |
4.000 especies |
Esqueleto sólido |
establezca clases de estilo separadas para filas de la tabla pares e impares con la clase de rayas.
Ruta estándar En Internet, buscando “mesas rayadas” o “mesas cebra”, es fácil encontrar los materiales necesarios sobre el tema. Como regla general, las soluciones propuestas son diferentes variaciones de la misma idea: usando JavaScript y DOM, encontramos las tablas requeridas (la clase stripy) en el documento HTML y agregamos las clases necesarias (por ejemplo, filas impares y pares) a sus filas, dependiendo de si es una fila par o no. Podría implementarse de esta manera: < tabs.length; e++)
if (tabs[e].className == tabClass)
{
var rows = tabs[e].getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) //las líneas están numeradas empezando desde 0 filas[i].className += ((i % 2) == 0 ? " filas impares": " filas pares "); ) )
Al vincular la llamada a esta función al evento de carga de la página, lograremos el resultado deseado. Esta es quizás la mejor solución hoy en día, pero no deja intacto el código HTML. Estaba interesado en resolver el problema utilizando exclusivamente CSS, o al menos confiarle a CSS la tarea de encontrar estos medios. La solución perfecta
¿Es posible solucionar el problema con CSS “puro”? Sí, si su navegador admite CSS3. Después de estudiar las especificaciones, encontramos una nueva pseudoclase :nth-child() , sin duda influenciada por el tema, y gracias a la cual los estilos necesarios se configuran de manera muy simple:/* fila impar de la tabla de clases rayada */ .stripy tr:nth-child(2n+1)( ... )/* fila par de la tabla de clases rayada */ .stripy tr:nth-child(2n)( ... ) Lamentablemente, la gran mayoría de los navegadores modernos aún no lo admiten. ¿Qué pasa con CSS2? Desafortunadamente, aquí hay muy pocas herramientas adecuadas. El problema se puede resolver parcialmente usando un selector: Rayas tr ( ... )/* 1ª línea */ .stripy tr + tr (...)/* 2da línea */ .stripy tr + tr + tr (...)/* 3ª línea */ .stripy tr + tr + tr + tr (...)/* 4ta línea */ .stripy tr + tr + tr + tr + tr (...)
/* 5ta línea */ sin embargo, este método sólo es adecuado para tablas con un número de filas relativamente pequeño y conocido de antemano y, además, no se puede considerar conveniente. ¿Qué queda? Todo lo que queda es utilizar las capacidades adicionales de cada navegador individual. Intenté encontrar una solución para las versiones de Windows de Internet Explorer, Mozilla y Opera. No hubo dificultades con este navegador. Aprovechando la capacidad de IE para establecer valores de propiedad CSS dinámicamente usando expresión() , el problema de alternar cadenas de colores, por ejemplo, se puede resolver fácilmente de la siguiente manera: Stripy tr( fondo: expresión(this.rowIndex % 2 == 0 ? "#ffe": "#efe"); ) Para usar este método para definir no solo una propiedad, sino un estilo completo para las filas de la tabla correspondientes (agregue clases pares e impares), el código tendrá que ser complicado o usar la tecnología DHTML Behaviors: Stripy tr(comportamiento: url(stripy.htc); ) /* cadena impar *//* línea par */ En el ejemplo dado, el plan está implementado: las clases necesarias se agregan a las líneas, dependiendo de si es una línea par o no. Este comportamiento de la etiqueta tr se describe en el archivo stripy.htc: rayado.htc // Las tecnologías utilizadas se introdujeron por primera vez en la versión 5 de Internet Explorer; por lo tanto, las tablas con la clase stripy se convertirán en "cebradas" a partir de esta versión. Geco También se implementa una extensión similar a DHTML Behaviors en navegadores con motor Gecko. Los desarrolladores web pueden definir nuevos elementos en la página y anular la apariencia, el contenido y el comportamiento de los estándar. Para ello se utiliza XBL (XML Binding Language). Esta tecnología tiene mayores capacidades en comparación con el desarrollo de Microsoft y parecía que no habría dificultades para solucionar el problema, pero no fue así.
En CSS, el enlace XBL se configura de manera similar al comportamiento que usa la propiedad -moz-binding: Stripy tr( -moz-binding: url(stripy.xml); ) Todo lo que quedaba era describir el comportamiento de las etiquetas requeridas en el archivo XBL stripy.xml, sin embargo, a pesar de todos mis esfuerzos, no pude "vincular" ni la etiqueta tr ni otras etiquetas de la tabla. La causa de este problema resultó ser Bugzilla Bug 83830: La unión de células TD (con XBL) no funciona en absoluto. No importa cuán ofensivo fuera, parecía que no deberías contar con XBL. ¡Afortunadamente, se encontró una solución!
La ayuda provino del famoso gurú web Dean Edwards, quien creó un contenedor XBL que permite a los navegadores Gecko usar la tecnología Microsoft DHTML Behaviors, lo que significa que se puede usar el mismo archivo stripy.htc para resolver el problema que para IE.
Para hacer esto, necesitamos dos archivos XBL: moz-behaviors.xml (el contenedor en sí, puede obtenerlo en el sitio web de Dean Edwards, pesa menos de 7K) y vinculantes.xml (un archivo auxiliar intermedio "entre" CSS y moz -behaviors.xml, código a continuación en el texto). Ahora, para que el archivo .htc funcione en Mozilla, necesitas lo siguiente:
.stripy tr( -moz-binding: url(bindings.xml#stripy.htc); ) En general, todo funciona bien, pero aún así no será posible cambiar el comportamiento de la etiqueta tr debido al error mencionado anteriormente, pero el inteligente Edwards logró resolver este problema. Para nuestro caso, el código CSS debería complementarse:
/* adición necesaria para vincular correctamente las etiquetas de la tabla */.stripy( -moz-binding: url(bindings.xml#table); ) /* Comportamiento de HTC usando el enlace XBL */.stripy tr( -moz-binding: url(bindings.xml#stripy.htc); ) /* cadena impar */.stripy .oddrows( fondo:#ffe; ... ) /* línea par */.stripy .evenrows( fondo:#efe; ... ) El contenido del archivo binds.xml debe ser el siguiente: enlaces.xml
Ahora todo funciona muy bien. Las tablas con la clase stripy se convertirán en "cebras" en los navegadores basados en el motor Gecko, a partir de la versión 1.0. Ópera Lamentablemente, este miembro de la familia de exploradores web no dispone de mecanismos de extensión comparables a los de sus competidores. Sí, los widgets aparecieron en la versión 9, pero con su ayuda es imposible influir en el funcionamiento del navegador de ninguna manera. ¿Qué hacer? A la ópera no le quedó más remedio que utilizar la técnica prohibida. A partir de la versión 7, el navegador (así como IE, a partir de la versión 5) tenía una "característica" interesante: la capacidad de ejecutar scripts directamente desde CSS. Para hacer esto, use cualquier propiedad CSS que le permita especificar una ruta de archivo como valor. A continuación se muestra un ejemplo de dicha técnica: Cuerpo (imagen de fondo: url ("javascript: alerta ("Hola");"); ) Opera ejecuta el script sólo en elementos HTML existentes y sólo una vez. ¿Por qué no aprovechar esto y tomar prestado el guión mencionado anteriormente? Hice precisamente eso, aunque debo admitir que hubo ciertas dificultades con esta técnica y no todos los escenarios fueron “obedientes”: Función makeStripy(tabClass) ( var tabs = document.getElementsByTagName("tabla"); for (var e = 0; e< tabs.length; e++)
if (tabs[e].className == tabClass)
{
var rows = tabs[e].getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++)
rows[i].className += ((i % 2) == 0 ? " oddrows" : " evenrows");
}
}
if (window.opera) makeStripy("stripy");
Este script se ejecutará correctamente en Opera y mediante CSS: Stripy tr( imagen de fondo: url("javascript:función makeStripy(tabClass)(var tabs=document.getElementsByTagName("tabla");for (var e=0;e
¿Te gustó el artículo? Compártelo
Los visitantes están discutiendo actualmente
| |
|
Sony Xperia M4 - revisión, especificaciones, precio, críticas
CSS alternando colores en la tabla.
¿Cómo actualizar el teléfono HTC Sensation con firmware oficial?
Engarzar correctamente un cable de Internet Cómo engarzar un cable de red
Canal Mar Blanco-Báltico
Termómetro USB, resultados ambiguos Sensor de temperatura USB DIY
Limitación de la versión básica de 1c cómo solucionarlo