hogar › Teléfono › Cómo crear una tabla en un documento de texto html. Modo casi estándar

Cómo crear una tabla en un documento de texto html. Modo casi estándar

Este modo se basa en el modo estándar con algunas excepciones: la visualización de imágenes dentro de las celdas de la tabla y las imágenes una debajo de la otra se produce como en el modo de compatibilidad. Para cambiar al modo casi estándar, utilice uno de los siguientes tipos de documentos.

Para marcos en HTML:

Para marcos en XHTML:

Imágenes una debajo de la otra

Cuando se muestran imágenes verticalmente con un avance de línea
Las imágenes en modo casi estándar se muestran juntas sin espacios. El ejemplo 1.2 muestra el código para mostrar dos imágenes.

Ejemplo 1.2. Salida de dos imágenes

HTML 4.01 IE Cr Op Sa Fx

Imágenes verticales

Dado que los dibujos anteriormente eran uno y se “recortaban” por conveniencia, forman una sola imagen (Fig. 1.1).

Arroz. 1.1. Salida de imágenes en modo casi estándar

En el modo estándar, aparece un pequeño espacio entre las imágenes (Fig. 1.2).

Arroz. 1.2. Salida de imágenes en modo estándar

Para omitir esta función en el modo estándar, existen dos formas principales:

agregar pantalla: bloque para imágenes;
utilice la propiedad line-height para el contenedor principal.

Consideremos estos métodos con más detalle.

Transformar una etiqueta El elemento de bloque nos ayudará más de una vez a evitar varios problemas asociados con las imágenes. Esta vez aprovecharemos la característica de que los elementos del bloque están alineados uno debajo del otro (no tomamos en cuenta las sangrías). En este caso la etiqueta
Por supuesto, debería eliminarse del código (ejemplo 1.3).

Ejemplo 1.3. Usando la propiedad del bloque

Imágenes verticales

No es necesario utilizar la propiedad de visualización; también puede utilizar la altura de línea, esta propiedad establece el interlineado. Configurando la etiqueta en 1px

Dentro del cual se ubican las imágenes obtendremos un resultado similar (ejemplo 1.4).

Ejemplo 1.4. Usando la propiedad de altura de línea

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Imágenes verticales

Imágenes en tabla

Cuando agrega una imagen a una celda de una tabla, también existen diferencias entre los modos del navegador. Para entenderlo, veamos el siguiente código (ejemplo 1.5). Para hacer visible el borde alrededor de la tabla, se ha agregado una propiedad de borde a los estilos del selector TABLE.

Ejemplo 1.5. Imagen de la tabla

HTML 4.01 CSS 2.1 IE Cr Op Sa Fx

Imágenes en tabla

El resultado de este ejemplo se muestra en la Fig. 1.3a. Para el modo estándar, la salida de la imagen es ligeramente diferente (Fig. 1.3b).


A	b

Arroz. 1.3. Imagen en la tabla. a - modo casi estándar, b - modo estándar

Se nota que en el modo estándar aparece una pequeña sangría en la parte inferior de la imagen. ¿De dónde viene? Si agrega texto a una celda y hace zoom (Fig. 1.4), puede ver claramente que la imagen como elemento en línea está alineada con la línea base del texto y no con su borde inferior. En consecuencia, la diferencia entre la línea de base y el borde inferior del texto es el valor del espacio debajo de la imagen.

Arroz. 1.4. Texto de referencia

Nuevamente, hay varias formas de cambiar el comportamiento de las imágenes en una tabla. El primer método ya se ha mencionado, es la conversión de etiquetas. en un elemento de bloque usando la propiedad de visualización con el bloque de valor (ver ejemplo 1.3). El estilo en este caso será el siguiente:

TABLA IMG (pantalla: bloque;)

Si hay texto dentro de una celda junto con imágenes, este estilo puede tener consecuencias no deseadas. En lugar de colocar la imagen al lado del texto, aparecerá en una nueva línea como un elemento de bloque. En este caso, se recomienda configurar las imágenes para que se alineen hacia abajo usando la propiedad de alineación vertical con el valor inferior (ejemplo 1.6).

Ejemplo 1.6. Alinear imágenes

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Imágenes en tabla

Texto

Si bien todos los navegadores en este ejemplo alinean la imagen en la parte inferior, la alineación del texto en sí es ligeramente diferente. Los navegadores Firefox, Safari, IE7 alinean el texto con el borde inferior de la imagen y Opera, IE8, IE9, con el borde superior.

Dibujos de un solo píxel

Durante la época del diseño de la mesa, se utilizó activamente una imagen transparente que mide uno por un píxel, la llamada imagen de un píxel. Colocada en una celda de la tabla, dicha imagen no permitía reducirla hasta ciertos límites, pero se escalaba fácilmente, estableciendo así el ancho o el alto de la celda. Como el dibujo es transparente, puedes establecer el color de fondo de la celda y obtener líneas horizontales o verticales de un grosor determinado.

En el modo estándar, esperamos los mismos problemas que cuando usamos imágenes normales dentro de las celdas. La altura de la celda se ampliará a medida que se agregue relleno inferior a las imágenes. Este problema se resuelve de forma mucho más sencilla y no requiere el uso de un estilo adicional. Los navegadores modernos muestran perfectamente los tamaños de celda determinados incluso sin imágenes adicionales en su interior. Por lo tanto, basta con eliminar un dibujo de un píxel de una celda.

Aquí la clase de línea especifica las dimensiones de la celda.

Tengo una tabla de dos celdas. La primera celda tiene un ancho de 200 px, se inserta una imagen de 200 px * 1000 px en ella, la imagen está alineada con el borde superior: align="top", los atributos de espacio entre celdas y relleno de celdas para toda la tabla están establecidos en "0". . El contenido de la segunda celda es pequeño y no ocupa mucho espacio, por lo que la altura de la tabla está determinada por el tamaño vertical de mi imagen. Pero por alguna razón, aparece un pequeño espacio entre el borde inferior de la imagen y el borde inferior de la tabla: cinco píxeles, aunque, como dije, cellpadding="0". ¿De dónde viene esta terrible brecha? Mi imagen es un elemento decorativo, debe ir por el borde de la página de arriba a abajo, este espacio vacío lo estropea todo.

Alina, asegúrate de que después del corchete de cierre de la etiqueta el de cierre venia enseguida:

...

de lo contrario, los caracteres de espacio, nueva línea o tabulación se mostrarán como espacios.

Además, es mejor alinear el contenido de una celda sin utilizar align="top" en y agregando valign="top" a la etiqueta .

Aún es más fácil usar una búsqueda con expresiones regulares, pero no tiene sentido discutir: todo depende de la situación y debe usar cualquiera de los dos métodos aceptables (por ejemplo, si la imagen es una imagen en línea, es decir , insertado en una línea de texto, luego
no guardará).

DE ACUERDO. Lo más probable es que Alexey diera el consejo/respuesta correcta inmediatamente en la segunda publicación; diseños tipográficos
debe morir para siempre, y el hecho de que sea más rápido ocultar un error que corregirlo ("Es más fácil agregar byer a mil imágenes en celdas que presionar retroceso y eliminar espacios en estas celdas después de las imágenes") no significa que es necesario agregar otros nuevos a los errores existentes: la práctica demuestra que los errores ocultos tienen una tendencia desagradable (pero lógica) a aparecer más tarde en los lugares más inesperados.

Maryana: una observación muy interesante con respecto a hspace=0, vspace=0. Nunca he observado que indicar explícitamente el relleno cero en las imágenes cambiara algo. Le agradecería un ejemplo (solo curiosidad :-)).

Vladislav Pustynsky, no deberías hablar así de eso
y retrocesos.
- sólo un caso aislado.
Pero todavía me atrevo a señalar que aún no se ha encontrado una solución más general.
después .
Una tarea bastante típica:

. . .

Y pase lo que pase, la imagen estará inmediatamente “debajo de la mesa” sin ninguna ausencia.
Aunque, por supuesto, este ejemplo no niega que necesitas escribir sin "entradas" ni espacios después .

Vladislav Pustynsky: Sí, yo también me lo agradeceré :) Tan pronto como lo entienda, te lo diré. Una vez intenté experimentar y nada funcionó, dudé de mis sospechas, pero luego en mi trabajo el mismo caso volvió a surgir varias veces... Lo intento en mi tiempo libre...

Dmitriy: Me temo que no entendí muy bien el problema típico... En combinación

100

la imagen estará inmediatamente debajo de la tabla sin ninguna sangría en ningún caso, ya sea que coloques un salto de línea después de la imagen o no. No hay que esperar nada más: la tabla es un elemento de bloque. Un espacio vertical entre la mesa y la imagen sólo puede aparecer si se coloca explícitamente allí (no escriba
! ¡no está bien! tu solo puedes
,

¡Etc.!) Ni siquiera entiendo qué puede afectar
después de la imagen excepto por la posición de los elementos que siguen a la imagen :-) O tal vez no entendí algo...

Después es especialmente eficaz en aquellos casos (y es la única solución, entre nosotros) cuando no invertido en nada más, es decir, “por sí solo”. Luego, después no habrá espacios colgantes ni sangrías "incorrectas".

La forma más confiable de evitar la aparición de espacios adicionales (coordinación de cuatro nombres en genitivo :-)) es no colocar estos espacios durante el proceso de diseño de la página (tres nombres en genitivo). No es necesario dejar un espacio después de la imagen. ¡¡¡NO LO PONGAS!!!

Comparar diseños:

- hay una brecha desagradable. Por supuesto, podemos poner después de la imagen.
. Esto no agregará lógica al documento, pero existirá la amenaza de que algún navegador del mañana actúe de manera más lógica y no ignore arbitrariamente las filas vacías en la parte superior e inferior de la tabla (este comportamiento no está documentado en ninguna parte, ya que hasta donde sé). ¿No es más fácil eliminar el error en sí que eliminarlo con otro error? Por cierto, sustitución

en lugar de
conduce al mismo resultado "positivo", aunque además también viola el anidamiento... :-(

Sí, eliminé el espacio, todo salió bien de inmediato :)
Sí, y la alineación estaba en la etiqueta de mi celda, cometí un error con align="top"

que idea para poner
?? ¿Cuál es el truco aquí? Cuando instalé
El espacio se ha hecho aún más grande, así que no te entiendo... La imagen no se inserta en la línea, sirve como fondo para el menú...
¿Y qué es "regexp" te preguntarás?
Y te equivocas en que al autor no le interesa el problema :)) Al autor le interesa mucho, solo que el autor no tiene Internet, o mejor dicho, la tiene, pero solo de noche, y yo no estoy acostumbrado. a sentarse por la noche :))
Lo siento, otra pregunta: si uso mi imagen como fondo, la asigno primero y luego uso el posicionamiento absoluto para superponer otras imágenes de botones, ¿cómo puede cerrarse la celda inmediatamente después de la primera imagen? Por cierto, hay una pregunta más sobre esto: cuando estaba experimentando, tratando de entender de dónde viene la maldita brecha (por cierto, ¿por qué el navegador interpreta el salto de línea de esta manera? Obtuve:

,
pero leí que el navegador no interpreta esos saltos de línea en absoluto si no hay un formato preliminar

Esto no siempre es así, ¿verdad?)
Entonces, cuando estaba experimentando, hice que el ancho de la celda de la tabla fuera mayor que el ancho de la imagen. Y descubrí que a la derecha de la imagen y justo debajo había una franja de color de unos 5 píxeles de largo. Luego quité todos mis botones y comencé a aplicarlos uno por uno. Configuré border="1" para ellos y descubrí que las dos primeras imágenes de enlace tienen un borde morado y el resto tiene un borde azul (no puedo entender qué significa esto y por qué es así), y que mi franja también Tiene un color que pasa del morado al azul. Y con cada botón la tira se hace más larga... ¿¿Qué es esto hermanos?? Luego inserté mi imagen de fondo no inmediatamente después de abrir la celda, sino antes de cerrarla, es decir. Primero, los botones están absolutamente posicionados y al final hay un fondo. La raya ha desaparecido. Es cierto que esto no afectó mi desgana :) ¿Qué fue, nadie me lo explicará?
Y aquí hay otro. Pensé que como mis botones no tienen un índice z y luego inserto el fondo, debería superponerse y cubrir todo. Pero, obviamente, las imágenes absolutamente posicionadas y las imágenes simples son cosas cualitativamente diferentes, y el enfoque habitual no es aplicable a ellas, es decir, ¿Lo que se escribe después se apila encima a menos que tenga un índice z más alto? ¿O este índice z es obviamente mayor para las imágenes absolutamente posicionadas que para las normales?

Alina, la primera respuesta general en casos poco claros, cuando es difícil describir el efecto (con todo tipo de modos de posicionamiento y superposición) es "muestre su código, preferiblemente con un enlace".

Para algunas de las otras preguntas, simplemente crearé una página de ejemplos. Será mejor para todos.

Alina: Pido disculpas por la conclusión incorrecta sobre su pérdida de interés en el tema :-)))

> de donde viene la maldita brecha (por cierto,
> ¿Por qué el navegador interpreta los saltos de línea de esta manera? Yo he tenido:
>
>
> ,
> pero leí que el navegador no interpreta esos saltos de línea en absoluto

Es sencillo. Tienes una celda. Vea qué elementos hay en la celda. Primero que nada, esta es una imagen. En segundo lugar, estos son dos restablecimientos de línea posteriores. Como no hay marcas adicionales, el navegador trata cada línea restablecida como un espacio y luego convierte los dos espacios resultantes en uno. Así, la imagen y el espacio que la sigue permanecen en la celda, y para el navegador se ubican en la misma fila. El navegador por sí solo no “mata” este último espacio; para él es un símbolo completamente legal. Al diseñar, el navegador se esfuerza por comprimir la celda horizontalmente tanto como sea posible. En este sentido, rompe la fila existente de dos elementos, moviendo el último de ellos (es decir, el espacio) a una nueva línea. Es decir, el salto no nace de un salto de línea en tu código, sino de un elemento de espacio adicional que está implícitamente presente en tu código, representado por dos saltos de línea.

La segunda parte de su pregunta (experimentar con código) requiere una fuente. Muestre su código, o mejor aún, publique los frutos de sus experimentos en Internet.

Si no especifica explícitamente un índice z, entonces los elementos posicionados absoluta y relativamente en realidad se ubican encima de los elementos estáticos, y los elementos definidos posteriormente se superponen a los definidos anteriormente y se superponen a todos los elementos estáticos (los elementos estáticos no pueden superponerse en principio, aunque a veces los navegadores "fallo" y esto se está violando la ley). El orden de superposición se puede cambiar configurando explícitamente el índice z en los estilos. De forma predeterminada, todos los elementos tienen un índice z 0, pero los elementos posicionados absoluta y relativamente siempre se colocarán encima de los estáticos, independientemente de dónde estén definidos, a menos que el índice z especifique lo contrario.

>por qué está mal escribir:
??
HTML es un lenguaje de marcado lógico y este diseño viola la lógica del documento. Cualquier documento consta de elementos de bloque, con elementos en línea ubicados dentro de los elementos de bloque. Los elementos en línea no deben colocarse fuera de los elementos de bloque. En la construcción anterior, el elemento en línea
colocado en un lugar en la secuencia donde, por definición, no hay definición de ningún elemento de bloque, es decir, el elemento en línea no es un sucesor de ningún elemento de bloque. Estoy corrigiendo mi propio error: por el motivo indicado, el diseño
también incorrecto.
Enlaces

Las tablas son uno de los elementos más importantes, pero al mismo tiempo complejos, que deben estar presentes en las páginas web. Con su ayuda, conviene presentar información importante y útil de forma bastante concisa. Por supuesto, la mayoría de los editores de plantillas que se ejecutan en varios motores le permiten insertar automáticamente una tabla en una página de un sitio web o en una publicación separada, pero ¿qué pasa si el diseño de un recurso web y sus páginas se crean desde cero? Entonces, un maestro novato puede enfrentarse a un problema: cómo hacer. Averigüemos cómo crear este elemento de forma correcta y rápida.

Elegir un editor

En primer lugar, al empezar a crear una tabla, debes decidir el editor en el que trabajarás. Por supuesto, la forma más sencilla es elegir el programa en el que creará el código del sitio principal. Pero es mejor utilizar un bloc de notas antiguo y en buen estado para estos fines.

Quizás te preguntes por qué complicarte la vida, porque si haces todo a la vez en el editor, podrás ver el resultado de inmediato y también podrás utilizar las sugerencias del programa.

Sí, esto es cierto, pero al crear una tabla desde cero, no solo podrá estudiar a fondo el principio mismo de su creación, sino también evitar molestos errores tipográficos y en el código principal. A veces sucede que el cursor se mueve accidentalmente hacia abajo y, durante el proceso de escritura, se introduce un error en el código, que a veces es difícil de encontrar. Después de crear una tabla en el Bloc de notas, puede copiar su código y pegarlo en el lugar que necesite.

Algoritmo para crear una tabla.

Primero, creemos un breve algoritmo sobre cómo crear una tabla en HTML. Esto es necesario para que comprenda la secuencia de cada paso. Luego descubriremos exactamente cómo realizar cada uno de los puntos.

Comencemos con los pasos preparatorios.

1. Dibuja una representación esquemática de la mesa en una hoja de papel.

2. Cuente el número de filas y celdas. Si el número de estos últimos es diferente, lo contamos para cada fila por separado.

3. Determine la cantidad de celdas del encabezado en la fila (por ejemplo, celdas “Núm.”, “Nombre”, etc.).

4. Anote los principales parámetros de la tabla - color, alto y ancho, alineación del texto - en general, todo lo que le parezca necesario.

1. Inserte etiquetas de tabla.

2. Inserte etiquetas de línea según la cantidad que necesite.

3. En las líneas, inserte etiquetas de celda (normales y en mayúscula), también según el número que está escrito en su papel.

4. Establezca los parámetros para la tabla en su conjunto.

5. Si es necesario, configure indicadores para celdas individuales.

6. Llene nuestras celdas con texto.

Crear una tabla

Entonces, ha elegido un editor, ahora descubramos cómo crear una tabla en HTML. Una etiqueta con la que se inserta una tabla en el código de la página (

), está emparejado, es decir, nuestra construcción comienza con esta etiqueta y termina

Después de insertar etiquetas de tabla, pasamos a crear filas y celdas.

Observemos inmediatamente que estos elementos también están emparejados. Etiqueta especifica las líneas, y - células.

Para celdas de encabezado, use un elemento de par .

Como ya se mencionó, lo primero que debes hacer es crear las filas, luego escribir las celdas en ellas. Para no confundirse, recomendamos hacer una o dos líneas de sangría entre cada bloque, o escribir un nuevo bloque de elementos usando la tecla “Tab”.

¿Cómo podría verse esto? Como eso:

;
;
;
;
;
;
;
;
No. Apellido
1 ;
Ivánov
.

Como puede ver, esto no tiene nada de complicado. Lo principal es no confundirse con el número de filas y celdas. De lo contrario, la mesa podría torcerse.

Hemos hablado de la creación de una tabla en HTML, ahora podemos pasar a los parámetros tanto de la propia matriz como de sus filas y celdas.

Opciones de tabla

Cuando se escribe el código, se debe prestar atención a los siguientes puntos: alineación con los bordes, fondo, texto, etc.

Los parámetros de la tabla se especifican en la etiqueta.

. Éstas incluyen:

1. Borde - ancho del borde. Especificado como un número entero. De forma predeterminada, los límites de cualquier tabla son cero.

2. Color del borde: color del borde. Se puede especificar mediante un código de color hexadecimal (#00008B) o por su nombre en inglés (DarkBlue). Por defecto siempre es gris.

3. Bgcolor: también se especifica mediante un código o nombre.

4. Alinear: alineación del texto detrás de la mesa. Por defecto: alineado a la izquierda. Existen las siguientes opciones para este parámetro:

izquierda - fluye hacia la derecha;
derecha - fluye hacia la izquierda;
centro: muestra la mesa en el centro sin envolverla.

5. Ancho y alto: ancho y alto de la mesa. Se puede especificar en píxeles o como porcentaje (en relación con el tamaño de la ventana del navegador).

Al prescribir tal o cual indicador, se debe prestar especial atención al diseño. Después de especificar el parámetro, debe haber un signo "igual", después del cual el valor especificado se indica entre comillas.

En cuanto al color del texto, está diseñado de la misma forma que el texto normal en formato HTML.

Ejemplo de diseño de mesa:

;

No.	Apellido
1	;	Ivánov

Opciones de fila

Entonces, ya hemos descubierto cómo hacer una tabla en HTML y especificar sus parámetros principales. Pero ¿y si necesitamos resaltar una línea? ¿Debería tener un formato diferente al del texto principal de la tabla?

Los parámetros de línea están escritos en la etiqueta. exactamente igual que los datos de la tabla. Se pueden configurar las siguientes variables para una línea:

1. Ya conoces border, bordercolor y bgcolor.

2. Alinear: alineación del texto en una línea. Puede tomar los valores izquierda, centro y derecha.

3. Valign: esta etiqueta alinea el texto verticalmente. Toma los siguientes valores:

arriba: el texto está alineado con el borde superior;
medio - en el centro;
abajo - a lo largo del borde inferior.

Ejemplo de formato de línea:

;
No.;
Apellido;
.

Opciones de celda

Y lo último a lo que vale la pena prestar atención para aquellos que quieran saber cómo hacer una tabla en HTML son los parámetros de las celdas individuales, tanto regulares como en mayúsculas. Básicamente, todo se hace exactamente igual que para una tabla o fila. Lo único es que se añaden dos elementos más importantes:

1. Colspan: este parámetro especifica el número de columnas que puede abarcar la celda.

2. Rowspan: indica el número de filas que ocupa esta celda.

Dado que el diseño no es diferente de escribir una línea, no daremos un ejemplo de código.

conclusiones

Hacer una mesa no es tan difícil como parece a primera vista. Lo principal a la hora de escribir su código es la perseverancia y la atención.

En cuanto a cómo insertar una tabla en HTML, sólo necesita copiar y pegar su código exactamente en el lugar de su página donde cree que debería estar ubicado.

No tengas miedo de experimentar y pronto dominarás la técnica de crear tablas a la perfección. ¡Buena suerte!

Esta conferencia analiza en detalle los principios del uso de tablas en el marcado HTML. Esto incluye una organización tabular de texto, una cuadrícula de coordenadas tabulares y gráficos organizados en tablas.

Herramientas para describir tablas en HTML

A medida que se desarrolló la WWW, quedó claro que los recursos contenidos en HTML no eran suficientes para una visualización de alta calidad de varios tipos de documentos. La desventaja de HTML era la falta de herramientas para mostrar tablas. Para ello se utiliza texto preformateado (etiqueta

), en el que la tabla estaba delineada en caracteres ASCII. Pero esta forma de presentación de los cuadros no era de la calidad suficiente y destacaba del estilo general del documento. Después de la introducción de las tablas en HTML, los webmasters no solo tenían una herramienta para colocar texto y datos numéricos, sino también una poderosa herramienta de diseño para colocar imágenes gráficas y texto en el lugar correcto de la pantalla.

Creando tablas en HTML

La etiqueta se utiliza para describir tablas.<ТАВLЕ>. Etiqueta<ТАВLЕ>, como muchos otros, traduce automáticamente la línea antes y después de la tabla.

Crear una fila de tabla - etiqueta<ТR>

Etiqueta<ТR>(Fila de tabla) crea una fila de tabla. Todo el texto, otras etiquetas y atributos que deban colocarse en una línea deben colocarse entre las etiquetas lt;TR>.

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>en una fila 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 ello	tres columnas.

Encabezados de columnas de tabla: etiqueta<ТН>

Los encabezados de las columnas y filas de la tabla se establecen mediante la etiqueta de encabezado<ТН>(TableHeader, título de la tabla). Estas etiquetas son similares<ТD>. La diferencia es que el texto encerrado entre las etiquetas.<ТН>, se escribe automáticamente en negrita y se coloca en el medio de la celda de forma predeterminada. Puede descentrar el texto y alinearlo hacia la izquierda o hacia la 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 fuentes en negrita en las tablas, por lo que es mejor configurar los encabezados de las tablas usando<ТН>.

El encabezado está centrado por defecto	El encabezado puede unir 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

Usando encabezados de tabla - etiqueta<САРТIОN>

Etiqueta le permite crear encabezados de tabla. De forma predeterminada, los títulos están centrados y colocados encima (<САРТION АLIGN=top>), o debajo de la mesa (<САРТION ALIGN=bottom>). El título puede consistir en cualquier texto e imágenes. El texto se dividirá en líneas correspondientes al ancho de la tabla. A veces etiqueta<САРТION>Se utiliza para firmar una imagen. Para ello, basta con describir una tabla sin bordes.

Encabezado encima de la tabla
Texto o datos	Texto o datos	Texto o datos	Texto o datos

Encabezado debajo de la mesa
Texto o datos	Texto o datos	Texto o datos

Atributo NOWRAP

Normalmente, cualquier texto que no quepa en una fila de una celda de la tabla pasa a la siguiente fila. Sin embargo, cuando se utiliza el atributo NOWRAP con etiquetas<ТН>o<ТD>La longitud de la celda se expande para que el texto que contiene quepa en una línea.

Atributo COLSPAN

Etiquetas<ТD>Y<ТН>modificado utilizando el atributo COLSPAN (Column Span, conexión de columna). 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 normales.

Si desea hacer que cualquier celda sea más ancha que la parte superior o inferior,	puedes usar el atributo COLSPAN=2,
para estirarlo sobre cualquier número de celdas regulares.

atributo ROWSPAN

Atributo ROWSPAN utilizado en etiquetas<ТD>Y<ТН>, es similar al atributo COLSPAN=, solo que especifica el número de líneas sobre las cuales se extiende la celda. Si especificó un número mayor que uno en el atributo ROWSPAN=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 ANCHO

El atributo WIDTH se utiliza en dos casos. 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 porcentajes. Por ejemplo, si configura en la etiqueta<ТАВLЕ>WIDTH=250, obtendrá una tabla de 250 píxeles de ancho independientemente del tamaño de página en su monitor. Al configurar WIDТН=50% en la etiqueta<ТАВLЕ>la tabla ocupará la mitad del ancho de la página en cualquier tamaño de imagen en la pantalla. Entonces, al especificar el ancho de la tabla como porcentaje, tenga en cuenta que si el usuario tiene una ventana gráfica estrecha, su página puede verse un poco extraña. Si está utilizando píxeles y la tabla es más ancha que el área de visualización, aparecerá una barra de desplazamiento en la parte inferior para moverse hacia la izquierda y hacia la derecha en la página. Dependiendo de las tareas en cuestión, cualquiera de los métodos para establecer el ancho de la mesa puede resultar útil.

Texto o datos - ancho 100%

Texto o datos - ancho 50%

Texto o datos: 200 píxeles de ancho

Texto o datos: 100 píxeles de ancho

Aplicar celdas vacías

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 cadena vacía.<ВR>. Incluso puedes especificar columnas vacías definiendo su ancho en píxeles o unidades relativas y sin ingresar ningún dato en las celdas resultantes. Esta herramienta puede resultar útil al colocar texto y gráficos en una página.

Atributo CELLADDING

Este atributo determina el ancho del espacio vacío 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

Atributos ALINEAR y VALIGNAR

Etiquetas<ТR>, <ТD>Y<ТН>se puede modificar utilizando los atributos ALIGN y VALIGN. El atributo ALIGN determina si el texto y los gráficos están alineados horizontalmente, es decir, hacia la izquierda, hacia la derecha o centrados. La alineación horizontal se puede configurar de varias maneras:

ALIGN=sangrado a la izquierda presiona el contenido de la celda cerca del borde izquierdo.

ALINEAR=izquierda Alinea el contenido de la celda a la izquierda, teniendo en cuenta la sangría especificada por el atributo CELLPADDING.

ALINEAR=centro Centra el contenido de la celda.

ALINEAR=derecha Alinea el contenido de una celda a la derecha, teniendo en cuenta la sangría especificada 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 configurar de varias maneras:

VALIGN=arriba Alinea el contenido de una celda con su borde superior.

VALIGN=medio Centra el contenido de la celda verticalmente.

VALIGNAR=abajo Alinea el contenido de una celda con su borde inferior.

El atributo VALIGN alinea verticalmente texto y gráficos dentro de una celda.	arriba,	medio,	abajo.
VALIGN=top Alinea el contenido de una celda con su borde superior.	arriba,	arriba,	arriba.
VALIGN=middle Centra el contenido de una celda verticalmente.	medio,	medio,	medio.
VALIGN=bottom Alinea el contenido de una celda con su borde inferior.	abajo,	abajo,	abajo.

atributo FRONTERA

en la etiqueta<ТАВLЕ>a menudo determinan cómo se verán los bordes, es decir, las líneas que rodean las celdas de la tabla y la tabla misma. Si no especifica un marco, obtendrá una tabla sin líneas, pero se les asignará espacio. El mismo resultado se puede lograr estableciendo<ТАВLЕ ВОRDER=0>. A veces quieres hacer el borde más grueso para que resalte mejor. Para llamar la atención sobre una imagen o un texto, puede establecer bordes exclusivamente en negrita. Al crear tablas anidadas, debe hacer bordes de diferentes grosores 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. Usando el atributo CELLSPACING=, puede colocar texto y gráficos donde los necesite. Si quieres dejar un espacio vacío, puedes escribir 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 con qué etiqueta (TABLE, TR, TD) se use, el color de fondo se puede configurar para toda la tabla, para una fila o para una celda individual. El valor de este atributo es el código RGB o nombre de color estándar.

Texto o datos	Texto o datos	Texto o datos
Texto o datos	Texto o datos	Texto o datos

atributo ANTECEDENTES

Este atributo especifica la imagen de fondo de las tablas. Se aplica a las 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 puedes hacer que sus bordes sean invisibles si quieres. Esto permite usar la etiqueta.<ТАВLЕ>coloque bellamente texto y gráficos en la página. Adiós etiqueta<ТАВLЕ>sigue siendo la única herramienta de formato potente en HTML. Los diseñadores de páginas web ahora tienen casi la misma libertad con respecto al uso del espacio en blanco que los diseñadores 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 mostrará correctamente los efectos más interesantes obtenidos al utilizarlas.

Universidad Pedagógica Estatal de los Urales

¡Bienvenido!

Curso de formación "Conceptos básicos de masterización WEB"

Creando mesas coloridas

Algunos navegadores le permiten mostrar colores. Hay varias formas de colorear una tabla, principalmente según el navegador que esté utilizando.

Bordes de colores en Netscape Navigator. No sólo puedes rodear la mesa con un hermoso borde, sino que también puedes configurarlo en un color diferente al del texto y los colores de fondo. Crea un GIF gris simple (o cualquier GIF que quieras tener como fondo) y defínelo en una etiqueta<ВODY>como fondo de página. Luego configure el color de fondo de la página. Como resultado, tu etiqueta<ВОDY>se verá así:

Ha creado un fondo doble: GIF y un color específico. Como resultado, el color de fondo será visible en todos los bordes de la tabla y en las líneas horizontales (<НR>). Ya sea que su GIF de fondo sea gris o no, las líneas de colores y los bordes de la tabla se destacarán notablemente. Si el GIF de fondo no es demasiado complejo, el tiempo de carga de la página sólo aumentará ligeramente.

Popular en la categoría: