Las tablas son un elemento muy utilizado para presentar diversos datos en presentaciones, conferencias, folletos 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 porcentajes, píxeles, ems o cualquier otra unidad 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
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 queremos hacer un patrón de cebra, que es el nombre que se le da a las líneas alternas de diferentes colores, entonces deberíamos 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 gris Se resaltarán las filas impares.
De manera similar, las columnas, no las filas, se resaltan con color; para esto, debes usar el selector tbody td:nth-child(even) .
Márgenes dentro de las células
El margen es la distancia entre el borde de la celda y su contenido. Sin márgenes, el texto de la 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 especifica 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 ( border-spacing: 3px; /* Espacio 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 (
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
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.
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
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 las celdas 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.
Las tablas son un elemento integral del lenguaje de hipertexto. marcado HTML, que sigue siendo relevante para estructurar y presentar cómodamente diversos datos.
Hace mucho tiempo, cuando los sitios web se presentaban principalmente en forma de tablas, las tablas tenían una gran demanda y constituían casi todo el marco del nuevo recurso. Posteriormente, la importancia del elemento disminuyó en popularidad en relación con los bloques (div), con la ayuda de lo cual las capacidades de diseño se ampliaron tanto para el escritorio como para el escritorio. versiones móviles sitios.
Actualmente las tablas se utilizan, por ejemplo, para listas de precios, listados, características, cuestionarios y mucho más, y con el uso de Hojas de Estilo en Cascada (CSS), podemos mejorar la presentación visual de las tablas en un documento. Aquí presentaré varios ejemplos de diseño de tablas HTML con código fuente, que luego podrás utilizar al desarrollar tu proyecto.
Aplicar estilo a las tablas con CSS
El estilo de tabla es una tabla lista para usar construida en HTML con propiedades CSS especificadas para ciertas etiquetas. Espero que sepas como y donde pegar lo recibido. código fuente para mostrar el resultado en la pantalla.
Primero, daré el código HTML general de la tabla, al que posteriormente le aplicaremos estilo.
| Nombre | Descripción | Precio |
| Nombre | Características | Precio |
| Nombre #2 | Características | Precio |
| Nombre #3 | Características | Precio |
Plantillas CSS
Las plantillas no pretenden ser originales, pero pueden resultar útiles para muchos.
Tabla (ancho: 100%; colapso del borde: colapso;) tabla td (relleno: 12px 16px;) encabezado de la tabla tr (peso de fuente: negrita; borde superior: 1px sólido #e8e9eb;) tabla tr (borde inferior: 1px sólido #e8e9eb;) cuerpo de tabla tr:hover (fondo: #e8f6ff;)
Por cierto, si no usáramos la etiqueta , entonces podrías establecer tus propios estilos para la primera fila usando pseudo-class:nth-child(1) . Tabla (ancho: 100%; colapso del borde: colapso;) título de la tabla tr (color: #ffffff; peso de fuente: negrita; fondo: #00bf80;) título de la tabla tr td (borde: 1px sólido #01ab73;) cuerpo de la tabla tr td (borde: 1px sólido #e8e9eb;) table tbody tr:nth-child(2n) (fondo: #f4f4f4;) table tbody tr:hover (fondo: #ebffe8;) Tabla (ancho: 100%; colapso de borde: separado; espacio entre bordes: 4px;) encabezado de tabla tr (color: #ffffff; peso de fuente: negrita;) encabezado de tabla tr td (radio de borde: 4px 4px 0 0; fondo: #2e82c3;) tabla tbody tr td (borde: 1px sólido #2e82c3; radio del borde: 4px; fondo: #cbdfef;) tabla tbody tr td:hover (fondo: #a2c3dd; duración de la transición: 0,2 s;) Tabla (ancho: 100%; alineación de texto: centro; borde inferior: 2px sólido #dfdfdf; radio de borde: 6px; colapso de borde: separado; espaciado de bordes: 0px;) encabezado de tabla tr (color: #ffffff; peso de fuente: negrita; fondo: #c83240;) table tr td (borde derecho: 1px sólido #dfdfdf;) table tr td:last-child (borde derecho: 0px;) table tbody tr:nth-child(1n ) (fondo: #f6f6f6;) tabla tbody tr:nth-child(2n) (fondo: #e6e6e6;) tabla tbody tr:hover (fondo: #ffe8e8; duración de la transición: 0,6 s;) ¿Qué significan las propiedades CSS utilizadas en las plantillas? datos tabulares- información que se puede mostrar en una tabla y dividir lógicamente en columnas y filas. Se utiliza para mostrar datos tabulares en páginas web. etiqueta HTML Dentro de una etiqueta De forma predeterminada, una tabla HTML en una página web se muestra sin borde; para agregar un borde a la tabla, así como a todos los demás elementos, use propiedad CSS borde . Pero vale la pena prestar atención al hecho de que si agrega un marco solo a un elemento Tabla, th, td (borde: 1px negro sólido;) Intente » Ahora tanto la tabla como las celdas tienen bordes, y cada celda y tabla tienen sus propios bordes. Como resultado, apareció un espacio vacío entre los marcos; el tamaño de este espacio se puede controlar mediante la propiedad de espaciado de bordes, que se establece para toda la tabla. En otras palabras, no puedes controlar el espacio entre diferentes celdas individualmente. Incluso si elimina los espacios entre celdas usando el valor 0 de la propiedad de espaciado de bordes, los bordes de las celdas se tocarán entre sí, duplicando el tamaño. Para combinar bordes de celda, use la propiedad de colapso de borde. Puede tomar dos significados: Después de agregar bordes a las celdas de la tabla, se hizo evidente que el contenido de las celdas estaba demasiado cerca de los bordes. para agregar espacio libre Puede utilizar la propiedad de relleno entre los bordes de las celdas y su contenido: Th, td ( padding: 7px; ) Intente » El tamaño de una mesa depende de su contenido, pero a menudo surgen situaciones en las que la mesa es demasiado estrecha y es necesario estirarla. El ancho y el alto de la tabla se pueden cambiar usando las propiedades de ancho y alto, estableciendo las dimensiones deseadas en la tabla misma o en las celdas: Tabla (ancho: 70%; ) º (alto: 50px; ) Probar » De forma predeterminada, el texto de las celdas del encabezado de la tabla está alineado al centro, mientras que el texto de las celdas normales está alineado a la izquierda. Con la propiedad text-align puede controlar la alineación horizontal del texto. La propiedad CSS de alineación vertical le permite controlar la alineación vertical del contenido del texto. De forma predeterminada, el texto se alinea verticalmente con el centro de las celdas. La alineación vertical se puede anular utilizando uno de los valores de propiedad de alineación vertical: Al visualizar tablas grandes que contienen muchas filas con mucha información, puede resultar difícil realizar un seguimiento de qué datos pertenecen a una fila en particular. Para ayudar a los usuarios a orientarse, puede utilizar dos colores de fondo diferentes alternativamente. Para crear el efecto descrito, puede utilizar el selector de clases, agregándolo a cada segunda fila de la tabla:
Agregar un atributo de clase a cada dos líneas es bastante tedioso. La pseudoclase:nth-child se agregó a CSS3 para proporcionar una solución alternativa a este problema. Ahora el efecto de alternancia se puede lograr exclusivamente. usando CSS sin cambiar el formato HTML del documento. Usando la pseudoclase:nth-child, puedes seleccionar todas las filas pares o impares de una tabla usando uno de palabras clave: par (par) o impar (impar): Tr:nth-child(impar) (color de fondo: #EAF2D3; ) Pruebe » Otra forma de mejorar la legibilidad de los datos tabulares es cambiar el color de fondo de una fila cuando pasa el mouse sobre ella. Esto ayudará a resaltar el contenido deseado de la tabla y aumentará la percepción visual de los datos. Implementar tal efecto es muy simple; para hacer esto, debe agregar una pseudoclase: pase el cursor al selector de fila de la tabla y establezca el color de fondo deseado: Tr:hover (color de fondo: #E0E0FF; ) Intente » alineación HTML Centrar una tabla solo es posible si el ancho de la tabla es menor que el ancho de su elemento principal. Para alinear la tabla con el centro, debe usar la propiedad de margen, dándole al menos dos valores: el primer valor será responsable del margen exterior de la tabla en la parte superior e inferior, y el segundo valor será responsable de alineación automática al centro: Tabla (margen: 10px auto;) Pruebe » Si necesita márgenes diferentes en la parte superior e inferior de la tabla, puede establecer la propiedad de margen en tres valores: el primero será responsable del margen superior, el segundo de la alineación horizontal y el tercero del margen inferior: Tabla (margen: 10px auto 30px;) Las tablas en sí tienen un aspecto bastante pobre y los navegadores muestran algunas características de las tablas, en particular los marcos, a su manera. Al mismo tiempo, estas deficiencias se pueden corregir fácilmente utilizando el poder de los estilos. Al mismo tiempo, las herramientas para diseñar tablas se han ampliado enormemente, lo que le permite adaptar las tablas con éxito al diseño del sitio y presentar los datos tabulares con mayor claridad. 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 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 un color para el selector TD o TH, entonces este color se establecerá como fondo de la celda (ejemplo 2.3). Ejemplo 2.3. Color de fondo
En este ejemplo, obtenemos un color de fondo azul para las celdas (etiqueta 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 . Define el valor del margen en píxeles en todos los lados de la celda. Es posible utilizar la propiedad de estilo de relleno agregándola al selector TD, como se muestra en el Ejemplo 2.4. Ejemplo 2.4. Campos en tablas
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 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
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 de Internet La versión 7 y posteriores de Explorer no admite 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. Al agregar una propiedad de colapso de borde con un valor de colapso a un selector TABLE, el atributo de espacio entre celdas se ignora y el valor de espacio de borde se restablece a cero. 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. Se sabe que el atributo de espacio entre celdas de la etiqueta 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 líneas verticales u horizontales en los lugares correctos. 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 diferentes lados, es mejor usar los derivados: 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
Este ejemplo utiliza un borde doble negro alrededor de la tabla y un borde blanco sólido 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. Ejemplo 2.7. Creando un solo marco Ejemplo 2.4. Campos en tablas
Este ejemplo crea una línea verde sólida entre las celdas y una línea negra alrededor de la tabla. 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 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. Ejemplo 2.8. Alinear el contenido de la celda horizontalmente Ejemplo 2.4. Campos en tablas
En este ejemplo, el contenido de la etiqueta 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 la propiedad 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
Este ejemplo establece la altura del encabezado. Arroz. 2.10. Alinear texto en celdas 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. Cuando se utiliza un borde invisible, la apariencia de las celdas, independientemente de si hay algo en ellas o no, es la misma. Los navegadores más antiguos no mostraban el color de fondo de las celdas de vista vacías 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: Agregar un espacio sin separación 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
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 el navegador Safari, Firefox, Opera, IE8, IE9 b. En el navegador IE7 Arroz. 2.11. Vista de una tabla con celdas vacías. Y en este artículo hablaré de su diseño con usando CSS. Los estilos en cascada utilizan las siguientes propiedades para dar formato a las tablas: 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. Tabla (ancho: 450 px; alto: 80%;) Especifica dónde se colocará el encabezado de la tabla descrito por la etiqueta. 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;) Ayuda a evitar situaciones en las que los bordes de las celdas formen bordes 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 de fronteras: colapso;(el resultado se muestra en la siguiente figura). 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: Especifica si el fondo y los bordes de una celda se muestran si está vacía. La propiedad puede tener uno de dos valores: Le indica al navegador cómo determinar el ancho de las celdas de la tabla en función de su contenido. No olvides que puedes establecer otras reglas universales para la mesa, por ejemplo, como hicimos con la altura ( altura) y ancho ( ancho). Teniendo esto en cuenta, creemos una tabla simple, comentando parcialmente el código.
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; Dale a la tabla un marco coloreado de 4 píxeles de espesor. colapso de fronteras: 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.Nombre Descripción Precio
Samsung Galaxy S8, S8 Plus 2400 rublos
Xiaomi Redmi 4A, 4X 520 rublos
Meizu M3S, M5S 720 rublos
Propiedades CSS
, que es un contenedor con el contenido de la tabla. Contenido tablas HTML descrito línea por línea, cada línea comenzando con una etiqueta de apertura
y termina con una etiqueta de cierre .
se ubican las celdas de la tabla representadas por etiquetas o . Son las celdas que contienen todo el contenido de la tabla que se muestra en la página web.
Marco de mesa
, luego se mostrará en toda la tabla. Para que las celdas de la tabla también tengan un borde, deberá establecer la propiedad de borde para los elementos
Y .
Nombre Apellido Homero simpson Margarina simpson
Intentar " Nombre Apellido Homero simpson Margarina simpson Tamaño de la mesa
Alineación de texto
Intentar " Nombre Apellido Homero simpson Margarina simpson Alternar el color de fondo de las filas de la tabla
Intentar "Nombre Apellido Posición Homero simpson padre Margarina simpson madre Bart simpson hijo Lisa simpson hija Cambiar el fondo de la fila al pasar el mouse
Centrar una mesa
Color de fondo de la celda
Título 1 Título 2 Celda 3 Celda 4 ) y rojo en el título (etiqueta ). Esto se debe a que el estilo del selector TH no está definido, por lo que el fondo del elemento principal, en este caso el selector TABLE, se "muestra".
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.
Título 1 Título 2 Celda 3 Celda 4 
Si la propiedad de estilo de relleno se aplica a las celdas de la tabla, entonces el efecto del atributo de relleno de celda de la etiqueta
ignorado.
Para cambiar la distancia entre celdas, use el atributo de espacio entre celdas de la etiqueta.
leonardo 5 8 Rafael 4 11 Miguel Ángel 24 9 Donatello 2 13 
Bordes y marcos
. 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
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é.
Usando la propiedad de borde
Título 1 Título 2 Celda 3 Celda 4 
. 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).
Título 1 Título 2 Celda 3 Celda 4 
Alinear el contenido de las celdas
, define un encabezado que está centrado. Para cambiar el método de alineación, utilice la propiedad de estilo de alineación de texto (ejemplo 2.8).
Título 1 Celda 1 Celda 2 Título 2 Celda 3 Celda 4 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).
Título 1 Título 2 Celda 1 Celda 2 como 40 píxeles y el texto está alineado con el borde inferior. El resultado del ejemplo se muestra en la Fig. 2.10.
Celdas 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.
leonardo 5 8
Rafael 11
Miguel Ángel 24
Donatello 13
ancho y alto
. Los valores se establecen en cualquier unidad de longitud CSS, pero a menudo se utilizan píxeles ( píxeles) y el interés ( %
). Este último establece el ancho relativo al elemento principal, mientras que el primero establece el valor absoluto.
lado del título
colapso fronterizo
espaciado de fronteras
celdas vacias
diseño de mesa
Ejemplo de diseño de mesa.
Precios 2014
2015 2016
Pan 16
18 21
Azúcar 35
44 50
Sal 8
8,50 9
