Este capítulo detalla los principios del uso de tablas en el marcado HTML. Se trata de una organización tabular de texto, una cuadrícula de coordenadas tabulares y un gráfico organizado en tablas.
Servicios de descripción de tabla HTML
Con el desarrollo de la WWW, quedó claro que los medios integrados en NTML no son suficientes para la visualización de alta calidad de varios tipos de documentos. La desventaja de НТМL fue la falta de instalaciones de exhibición de mesa en su composición. Para ello, el texto preformateado (etiqueta
), en el que la tabla estaba delineada con símbolos ASCII. Pero esta forma de presentación de las tablas no era de alta calidad y estaba fuera del estilo general del documento. Con la introducción de tablas en HTML, los webmasters no solo tienen una herramienta para colocar texto y números, sino una poderosa herramienta de diseño para colocar gráficos y texto en el lugar correcto de la pantalla.Creando tablas en HTML
La etiqueta se usa para describir tablas<ТАВLЕ>... Etiqueta<ТАВLЕ>como muchos otros, traduce automáticamente la línea antes y después de la tabla.
Crear fila de tabla - etiqueta<ТR>
Etiqueta<ТR> (Fila de tabla, fila de tabla) crea una fila de tabla. Todo el texto, otras etiquetas y atributos que deben colocarse en una línea deben colocarse entre las etiquetas lt; TR\u003e.
Definición de celdas de tabla: etiqueta<ТD>
Las celdas con datos generalmente se colocan dentro de una fila de la tabla. Cada celda que contenga texto o imagen debe estar rodeada de etiquetas<ТD>... Número de etiquetas<ТD> por línea define el número de celdas
Mesa
Si una tabla tiene dos etiquetas TR, entonces tiene dos filas. Si hay tres etiquetas TD en una línea, entonces en eso tres columnas. Encabezados de columna de tabla: etiqueta<ТН>
Los encabezados de las columnas y filas de la tabla se establecen mediante la etiqueta de encabezado<ТН> (Table Neader, encabezado de la tabla). Estas etiquetas son como<ТD>... La diferencia es que el texto entre las etiquetas<ТН>, se escribe automáticamente en negrita y se encuentra en el medio de la celda de forma predeterminada. Puede deshacer el centrado y alinear el texto a la izquierda o derecha. Si utiliza<ТD> con etiqueta<В> y atributo<АLIGN=center>, el texto también se verá como un título. Sin embargo, tenga en cuenta que no todos los navegadores admiten texto en negrita en las tablas, por lo que es mejor configurar los títulos de las tablas usando<ТН>.
| El título está centrado por defecto | El encabezado puede combinar columnas | |
|---|---|---|
| El encabezado se puede colocar antes de las columnas | Texto o datos | Texto o datos |
| El encabezado puede concatenar líneas | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | |
| Texto o datos | Texto o datos | |
Uso de encabezados de tabla: etiqueta<САРТIОN>
Etiqueta
| Texto o datos | Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
Atributo NOWRAP
Normalmente, cualquier texto que no quepa en una línea de la celda de una tabla se mueve a la siguiente línea. Sin embargo, cuando se usa el atributo NOWRAP con etiquetas<ТН> o<ТD> la longitud de la celda se expande para que el texto adjunto quepa en una línea.
Atributo COLSPAN
Etiquetas<ТD> y<ТН> modificado utilizando el atributo COLSPAN (Column Span). Si desea hacer una celda más ancha que la parte superior o inferior, puede usar el atributo COLSPAN para estirarla sobre cualquier número de celdas regulares.
| Si desea hacer una celda más ancha que la parte superior o inferior, | puede utilizar el atributo COLSPAN \u003d 2, |
| para estirarlo sobre cualquier número de celdas regulares. | |
Atributo ROWSPAN
Atributo ROWSPAN utilizado en etiquetas<ТD> y<ТН>, es similar al atributo COLSPAN \u003d, excepto que especifica el número de filas para abarcar la celda. Si especificó un número mayor que uno en el atributo ROWSPAN \u003d s, entonces el número correspondiente de filas debe estar debajo de la celda extendida. No se puede colocar al final de la mesa.
Atributo WIDTH
El atributo WIDTH se utiliza de dos formas. Puedes ponerlo en una etiqueta<ТАВLЕ>para dar el ancho de toda la tabla, o puede usarse en etiquetas<ТD> o<ТН>para establecer el ancho de una celda o grupo de celdas. El ancho se puede especificar en píxeles o como porcentaje. Por ejemplo, si establece en la etiqueta<ТАВLЕ> WIDTH \u003d 250, obtiene una tabla de 250 píxeles de ancho independientemente del tamaño de página en su monitor. Al configurar WIDTH \u003d 50% en la etiqueta<ТАВLЕ> la tabla ocupará la mitad del ancho de la página para cualquier tamaño de imagen en la pantalla. Por lo tanto, al especificar el ancho de una tabla como porcentaje, tenga en cuenta que si el usuario tiene una ventana gráfica estrecha, su página puede parecer un poco extraña. Si está utilizando píxeles y la tabla es más ancha que la ventana gráfica, aparece una barra de desplazamiento en la parte inferior para moverse hacia la derecha y hacia la izquierda en la página. Dependiendo de la tarea en cuestión, ambos métodos para configurar el ancho de la mesa pueden ser útiles.
| Texto o datos: 100% de ancho |
| Texto o datos: 50% de ancho |
| Texto o datos: 200 píxeles de ancho |
| Texto o datos: 100 píxeles de ancho |
Aplicar celdas en blanco
Si una celda no contiene datos, no tendrá bordes. Si desea que una celda tenga bordes pero no contenido, debe colocar algo en ella que no sea visible cuando se vea. Puedes usar una línea vacía<ВR>... Incluso puede definir columnas vacías especificando su ancho en píxeles o unidades relativas y no ingresando ningún dato en las celdas resultantes. Esta herramienta puede resultar útil al colocar texto y gráficos en una página.
Atributo CELLPADDING
Este atributo define el ancho del espacio en blanco entre el contenido de la celda y sus bordes, es decir, establece los márgenes dentro de la celda.
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
Los atributos ALIGN y VALIGN
Etiquetas<ТR>, <ТD> y<ТН> se puede modificar usando los atributos ALIGN y VALIGN. El atributo ALIGN determina la alineación horizontal del texto y los gráficos, es decir, hacia la izquierda, hacia la derecha o hacia el centro. La alineación horizontal se puede establecer de varias formas:
ALINEAR \u003d sangrado izquierdo presiona el contenido de la celda al ras contra el borde izquierdo.
ALINEAR \u003d izquierda Alinea el contenido de la celda a la izquierda, teniendo en cuenta la sangría especificada por el atributo CELLPADDING.
ALINEAR \u003d centro centra el contenido de la celda.
ALINEAR \u003d derecha alinea a la derecha el contenido de la celda con el relleno especificado por el atributo CELLPADDING.
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
El atributo VALIGN alinea verticalmente el texto y los gráficos dentro de una celda. La alineación vertical se puede especificar de varias formas:
VALIGN \u003d arriba alinea el contenido de una celda con su borde superior.
VALIGN \u003d medio centra el contenido de la celda verticalmente.
VALIGN \u003d abajo alinea el contenido de una celda con su borde inferior.
| El atributo VALIGN alinea verticalmente el texto y los gráficos dentro de una celda. | parte superior, | medio, | fondo. |
| VALIGN \u003d top Alinea el contenido de la celda con su borde superior. | parte superior, | parte superior, | parte superior. |
| VALIGN \u003d middle Centra el contenido de la celda verticalmente. | medio, | medio, | medio. |
| VALIGN \u003d bottom Alinea el contenido de la celda con su borde inferior. | fondo, | fondo, | fondo. |
Atributo BORDER
En la etiqueta<ТАВLЕ> a menudo determinan cómo se verán los marcos, es decir, las líneas que rodean las celdas de la tabla y la tabla misma. Si no especifica un borde, obtendrá una tabla sin líneas, pero habrá espacio para ellas. El mismo resultado se puede lograr configurando<ТАВLЕ ВОRDER=0>... A veces desea hacer el borde más grueso para que se destaque mejor. Puede establecer bordes excepcionalmente audaces para llamar la atención sobre una imagen o texto. Al crear tablas anidadas, debe hacer bordes de diferente grosor para diferentes tablas para que sean más fáciles de distinguir.
Atributo CELLSPACING
El atributo CELLSPACING especifica el ancho de los espacios entre celdas en píxeles. Si no se especifica este atributo, el valor predeterminado es dos píxeles. El atributo CELLSPACING \u003d le permite colocar texto y gráficos donde desee. Si desea dejar un espacio en blanco, puede ingresar un espacio en la celda.
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos |
Atributo BGCOLOR
Este atributo le permite establecer el color de fondo. Dependiendo de la etiqueta (TABLE, TR, TD) con la que se aplique, el color de fondo se puede establecer para toda la tabla, para una fila o para una sola celda. El valor de este atributo es un código RGB o un nombre de color estándar.
| Texto o datos | Texto o datos | Texto o datos |
| Texto o datos | Texto o datos | Texto o datos |
Atributo de FONDO
Este atributo establece la imagen de fondo de las tablas. Aplicable a etiquetas TABLE y TD. Su valor es la URL del archivo de imagen de fondo. El uso de este atributo se analiza a continuación.
Usar tablas en el diseño de páginas
Lo bueno de las tablas es que puede hacer que sus bordes sean invisibles si lo desea. Esto permite usar la etiqueta<ТАВLЕ> coloque bellamente texto y gráficos en la página. Mientras que la etiqueta<ТАВLЕ> sigue siendo la única herramienta de formato potente en HTML. Los diseñadores de páginas web tienen ahora casi la misma libertad para utilizar "espacios en blanco" que los creadores de páginas impresas. Las tablas son la mejor manera de alejarse de la ubicación jerárquica del texto en las páginas web.
Si el navegador admite tablas, normalmente muestra correctamente los efectos más interesantes obtenidos con ellas.
Universidad Pedagógica Estatal de los Urales¡Bienvenidos!
|
Creando tablas coloridas
Algunos navegadores permiten mostrar colores. Hay varias formas de colorear la mesa, en su mayoría dependen del navegador utilizado.
Bordes de colores en Netscape Navigator. No solo puede rodear la mesa con un bonito marco, sino que también puede establecer un color diferente al del texto y los colores de fondo. Cree un GIF gris simple (o cualquier GIF que le gustaría tener como fondo) y defínalo en la etiqueta<ВODY> como fondo de la página. Luego, establezca el color de fondo de la página. Como resultado, su etiqueta<ВОDY> se verá algo como esto:
Ha creado un fondo doble: GIF y un color determinado. Como resultado, el color de fondo será visible en todos los bordes de la tabla y líneas horizontales (<НR>). Independientemente de si su GIF de fondo es gris o no, las líneas de color y los bordes de las tablas se destacarán notablemente. Si el GIF de fondo no es demasiado complejo, el tiempo de carga de la página solo aumentará ligeramente.
CSS le permite establecer no solo el estilo de borde de la tabla, sino también el estilo de los bordes de celdas individuales. Dado que cada celda tiene sus propios bordes, el borde entre las celdas adyacentes se duplica. Pero es posible fusionar los bordes de las celdas vecinas en una sola. Hay una propiedad de colapso de borde para esto. Toma los valores:
border-collapse: separado - cada celda tiene su propio borde (predeterminado)
border-collapse: colapso - la frontera general
border-collapse: heredar: el valor se toma del elemento principal
Por ejemplo, creemos una tabla y establezcamos un marco para las celdas de todas las tablas que estarán en la página. Primero, no cambiemos nada para ver cómo se verá la tabla:
Estilo:
1 |
Resultado en el navegador: Ahora agreguemos bordes para cada celda. Para hacer esto, simplemente agregue los estilos:
Resultado en el navegador: Cómo eliminar el relleno entre celdas en una tabla HTMLAcepte que un borde definido con CSS no tiene la misma apariencia que le gustaría. Sin duda, desde el punto de vista de la estética, hay trabajo por hacer. En la página del navegador, puede ver que, de forma predeterminada, muestra los bordes de las tablas y las celdas por separado. Un ejemplo lo demuestra claramente. Sin embargo, es muy posible deshacerse de esos bordes, que se denominan dobles, si usamos la propiedad CSS border-collapse. En la práctica, se ve así: Tabla (borde: azul sólido 1px; borde-colapso: colapso;) ... Como resultado, se elimina la distancia entre las celdas: El valor de colapso asignado al atributo de borde elimina los bordes dobles. Como puede ver, el resultado es un colapso de los bordes de las celdas adyacentes, así como los bordes de las celdas y el borde exterior de la tabla. En cuanto a este último, se puede eliminar por completo. Y si es necesario mostrarlo, debe aumentar su ancho. Así, nos deshicimos de los separadores de la tabla. En la próxima lección, hablaremos sobre cómo puede establecer bordes verticales y horizontales. ¡Buena suerte a todos! La especificación CSS ofrece posibilidades ilimitadas para el diseño de tablas. De forma predeterminada, la tabla y las celdas de la tabla no tienen bordes ni fondos visibles, y las celdas 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 ser diferente. La altura de todas las celdas en una fila es la misma y está determinada por la altura de la celda más alta. Formatear tablas1. Borde de los bordes de la tablaLa tabla y las celdas que contiene se muestran en el navegador sin bordes visibles de forma predeterminada. Bordes de mesa establecido por la propiedad de borde: Table (border-collapse: collapse; / * eliminar espacios vacíos entre celdas * / border: 1px solid gray; / * establecer un borde exterior de 1px para la tabla * /) Bordes de celda de encabezado cada columna está configurada para el elemento th: Th (borde: 1px gris sólido;) Bordes de celda Los cuerpos de las tablas se establecen para el elemento td: Td (borde: 1 px gris sólido;) El ancho de los bordes de las celdas adyacentes no se duplica, por lo que puede establecer bordes para toda la tabla de la siguiente manera: Th, td (borde: 1px gris sólido;) El borde exterior de la tabla se puede seleccionar dándole un ancho mayor: Tabla (borde: 3px gris sólido;) Los bordes se pueden establecer parcialmente: / * establecer un borde exterior gris de 3px para la tabla * / table (border-top: 3px solid gray;) / * establecer un borde gris de 1px para la celda del cuerpo de la tabla * / td (border-bottom: 1px solid gray;) Puede leer más sobre la propiedad fronteriza. 2. Cómo configurar el ancho y el alto de la mesaDefecto ancho y alto de la mesa está determinada por el contenido de sus celdas. Si no se especifica ningún ancho, será igual al ancho de la fila más ancha (fila). Ancho de tabla y columna establecer usando la propiedad de ancho. Si se especifica tabla (ancho: 100%;) para una tabla, entonces el ancho de la mesa 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: primer hijo (ancho: 30%;) Altura de la mesa no establecido. La altura de las filas las tablas se pueden manipular agregando relleno superior e inferior a los elementos | y | ... No se recomienda fijar la altura mediante la propiedad height. Th, td (relleno: 10px 15px;) 3. Cómo configurar el fondo de la mesaDefecto fondo de mesa y las celdas son transparentes. Si la página o el bloque que contiene la tabla tiene un fondo, brillará a través de la tabla. Si el fondo está configurado tanto para la tabla como para las celdas, solo el fondo de las celdas será visible en los lugares donde se superponen el fondo de la tabla y las celdas. El fondo de la tabla como un todo y sus celdas pueden ser: 4. Columnas de la tablaEl modelo de tabla CSS se centra principalmente en cadenas (filas) formadas con la etiqueta | |||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Empresa | Q1 | Q2 | Tercer trimestre | Cuarto trimestre |
|---|
Figura: 2. Un ejemplo de cómo mostrar el encabezado debajo de la mesa 6. Cómo eliminar el espacio entre los marcos de las celdas
De forma predeterminada, los bordes de las celdas de la tabla están separados por un pequeño espacio. Si configuramos border-collapse: collapse para la tabla, se eliminará el espacio. La propiedad se hereda.
Sintaxis
Tabla (border-collapse: collapse;) 
Figura: 3. Un ejemplo de tablas con bordes de celda fusionados y divididos
7. Cómo aumentar el espacio entre los bordes de las celdas
Con la propiedad de espaciado de bordes, puede cambiar la distancia entre los bordes de las celdas. Esta propiedad se aplica a la tabla en su conjunto. Heredado.
Sintaxis
Tabla (border-collapse: separado; border-spacing: 10px 20px;) table (border-collapse: separado; border-spacing: 10px;) 
Figura: 4. Un ejemplo de tablas con mayores espacios entre los marcos de las celdas
8. Cómo ocultar celdas de tabla vacías
La propiedad de celdas vacías oculta o muestra celdas vacías. Solo afecta a las celdas que no contienen ningún contenido. Si se especifica un fondo para una celda y la tabla (border-collapse: collapse;) se especifica para una tabla, la celda no se ocultará. Heredado.
| Empresa | Q1 | Q2 | Tercer trimestre |
|---|---|---|---|
| Microsoft | 20.3 | 30.5 | |
| 50.2 | 40.63 | 45.23 |
Figura: 5. Un ejemplo de cómo ocultar una celda de tabla vacía 9. Disposición del diseño de la tabla usando la propiedad table-layout
El diseño de un diseño de tabla se determina mediante uno de dos enfoques: diseño fijo o diseño automático. Diseño en este caso significa cómo se distribuye el ancho de la tabla entre el ancho de las celdas. La propiedad no se hereda.
Sintaxis
Mesa (diseño de mesa: 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 es una línea separada. Puede diseñar tablas como esta en un estilo minimalista colocando un borde de dos píxeles debajo del encabezado. 
| Empleado | Salario | Prima | Supervisor |
|---|---|---|---|
| Stephen C. Cox | $300 | $50 | Beto |
| Josephin bronceado | $150 | - | Annie |
| Joyce ming | $200 | $35 | Andy |
| James A. Pentel | $175 | $25 | Annie |
Con una gran cantidad de filas, este diseño de tablas las hace 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 hace que las tablas que son de estilo minimalista sean más fáciles de leer. Cuando pasa el mouse sobre una celda, el resto de las celdas de la misma fila se seleccionan al mismo tiempo, lo que simplifica el proceso de seguimiento de la información si las tablas tienen varias columnas. 
Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: hover td (background: # e8edff ;)
2. Minimalismo vertical
Aunque estas tablas se utilizan con poca frecuencia, las tablas orientadas verticalmente son útiles para categorizar o comparar descripciones de objetos representados por una columna. Puede diseñarlos en un estilo minimalista agregando un espacio que separe las columnas. 
Th (font-weight: normal; border-bottom: 2px solid # 6678b1; border-right: 30px solid #fff; border-left: 30px solid #fff; color: # 039; padding: 8px 2px;) td (border- derecha: 30px sólido #fff; borde izquierdo: 30px sólido #fff; color: # 669; relleno: 12px 2px;)
3. Estilo "caja"
El estilo más confiable para decorar mesas de todo tipo es el llamado estilo "caja". Es suficiente elegir un buen esquema de color y luego establecer el color de fondo para todas las celdas. Recuerde enfatizar la diferencia entre líneas estableciendo bordes como separadores. 
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; color: # 669; borde superior: 1px sólido transparente; relleno: 8px;) tr: hover td (fondo: #ccddff;)
Lo más difícil es encontrar la combinación de colores que combine armoniosamente con su sitio. Si el sitio está cargado de gráficos y diseño, entonces será bastante difícil para usted usar 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;) th (tamaño de fuente: 13px; peso de fuente: normal; fondo: # e8edff; borde derecho: 1px sólido # 9baff1; borde- left: 1px solid # 9baff1; color: # 039; padding: 8px;) td (background: # e8edff; border-right: 1px solid #aabcfe; border-left: 1px solid #aabcfe; color: # 669; padding: 8px) ;)
4. Cebra horizontal
La mesa Zebra se ve bastante atractiva y práctica. El color de fondo complementario puede servir como una señal visual para que las personas lean la tabla. 
Th (font-weight: normal; color: # 039; padding: 10px 15px;) td (color: # 669; border-top: 1px solid # e8edff; padding: 10px 15px;) tr: nth-child (2n) ( fondo: # e8edff;)
5. Estilo de periódico
Para lograr el llamado efecto periódico, puede aplicar bordes a los elementos de la tabla 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 fondos y un efecto de desplazamiento al pasar el mouse sobre una línea. 
Table (border: 1px solid # 69c;) th (font-weight: normal; color: # 039; border-bottom: 1px discontinue # 69c; padding: 12px 17px;) td (color: # 669; padding: 7px 17px; ) tr: hover td (fondo: #ccddff;)
Table (border: 1px solid # 69c;) th (font-weight: normal; color: # 039; padding: 10px;) td (color: # 669; border-top: 1px dashed #fff; padding: 10px; background: #ccddff;) tr: hover td (fondo: # 99bcff;)
Table (border: 1px solid # 6cf;) th (font-weight: normal; font-size: 13px; color: # 039; text-transform: uppercase; border-right: 1px solid # 0865c2; border-top: 1px solid # 0865c2; borde izquierdo: 1px sólido # 0865c2; borde inferior: 1px sólido #fff; relleno: 20px;) td (color: # 669; borde derecho: 1px discontinuo # 6cf; relleno: 10px 20px;)
6. Fondo de la mesa
Si está buscando una forma rápida y única de diseñar su mesa, elija una imagen o foto atractiva relacionada con el tema de la mesa y colóquela como fondo de la mesa. 
Png ") 98% 86% sin repetición;) th (font-weight: normal; font-size: 14px; color: # 339; padding: 10px 12px; background: white;) td (color: # 669; border- arriba: 1px blanco sólido; relleno: 10px 12px; fondo: rgba (51, 51, 153, .2); transición: .3s;) tr: hover td (fondo: rgba (51, 51, 153, .1); )
