2. El fondo de la propiedad \u003d "URL" - Establece el dibujo de fondo. En lugar de la URL, se debe escribir la dirección de la imagen de fondo.

Ejemplo

Mesa de muestra

Columna 1.

Columna 2.

Convertido a la página Siguiente:

En el ejemplo examinado, nuestra imagen de fondo se encuentra en la carpeta IMG (que se encuentra en el mismo directorio que la página HTML), y la imagen se llama FON.GIF. Tenga en cuenta que en la etiqueta agregamos estilo \u003d "Color: White"; . Dado que el fondo es casi negro, de modo que el texto no se fusiona con el fondo, hicimos el texto blanco.

3. Propiedad Bgcolor \u003d "Color": establece el fondo de color de la tabla. Como color, puede elegir cualquiera de toda la paleta (ver códigos y títulos HTML COLORES)

4. Border \u003d "Número" propiedad: establece el grosor del marco de la tabla. En ejemplos anteriores, señalamos el borde \u003d "1", lo que significa el grosor del marco - 1 píxel.

5. BorderColor \u003d "Color" propiedad - establece el color del marco. Si el borde \u003d "0", el marco no será y el color del marco no tendrá sentido.

6. Propiedad de cellpadding \u003d "Número": sangría desde el marco hasta los contenidos de la celda en píxeles.

7. Propiedad de CellSpacing \u003d "Número": distancia entre celdas en píxeles.

8. La propiedad Cols \u003d "Número" es el número de columnas. Si no lo especifica, el propio navegador determinará el número de columnas. La única diferencia es que es probable que la especificación de este parámetro acelere la descarga de la tabla.

9. Property Frame \u003d "Parámetro" - Cómo mostrar los bordes alrededor de la mesa. Puede tomar los siguientes valores:

• vacío - no dibuje fronteras
• frontera - borde alrededor de la mesa
• arriba - borde en el borde superior de la mesa
• abajo - borde desde la parte inferior de la mesa
• hSIDES: agregue solo límites horizontales (parte superior e inferior de la tabla)
• vsides: dibuje solo bordes verticales (izquierda y derecha desde la tabla)
• rHS - Frontera solo en el lado derecho de la mesa
• lHS - Frontera solo en el lado izquierdo de la mesa

10. Altura \u003d propiedad "Número": establece la altura de la tabla: ya sea en píxeles o en porcentaje.

11. La propiedad es reglas \u003d "parámetro", donde para mostrar los límites entre las celdas. Puede tomar los siguientes valores:

• toda la línea dibuja alrededor de cada mesa de células
• grupos: la línea se muestra entre grupos que están formados por etiquetas.

Atributos y propiedades

1. La propiedad Align \u003d "Parámetro": establece la alineación de una celda de tabla separada. Puede tomar los siguientes valores:

• nivelación izquierda al borde izquierdo
• centro - alineación central
• a la derecha - alineación en el borde derecho

2. La propiedad Background \u003d "URL": establece la imagen de fondo de la celda. En lugar de la URL, se debe escribir la dirección de la imagen de fondo.

3. Bgcolor \u003d "Color" propiedad - establece el color del fondo de la celda.

4. BorderColor \u003d "Color" propiedad: establece el color del marco de la celda.

5. Char \u003d "letra" propiedad: establece la carta desde la cual debe hacer la alineación. El valor de atributo de alinee debe instalarse como char.

6. La propiedad ColSpan \u003d "Número": establece el número de células horizontales combinadas.

7. Altura \u003d propiedad "Número": establece la altura de la tabla: ya sea en píxeles o porcentaje%.

8. Ancho \u003d "Número" Propiedad: establece el ancho de la tabla: ya sea en píxeles o porcentaje%.

9. La propiedad RowSPAN \u003d "Número": establece el número de celdas verticales unidas.

10. Propiedad Valign \u003d "Parámetro": alinee los contenidos de la celda verticalmente.

• tOP: alinee los contenidos de la celda en el borde superior de la línea
• alineación media en el medio
• fondo - alineación en el borde inferior
• línea de base - Alineación de referencia

Para etiqueta

Cómo hacer que los límites de las celdas en la tabla no se peguen.

En el caso de usar la frontera (el borde de las células) y los guiones cero entre las células, todavía pegan y resulta un borde doble. Para evitarlo, debe registrarse en la tabla de estilos border-colapse: colapso:

...

Estimado lector, ahora ha aprendido mucho más sobre la etiqueta de la tabla HTML. Ahora te aconsejo que vayas a la siguiente lección.

La tabla es un conjunto de datos distribuidos por líneas y células. En la mayoría de las células, se colocan datos tabulares, el resto contiene encabezados para cadenas y columnas que describen el contenido.

La etiqueta se usa para crear una tabla en el documento HTML

Es un contenedor en el que es todo el contenido de la tabla.

Crear una tabla siempre comienza con filas que se determinan utilizando la etiqueta

Cada línea, a su vez, consiste en células. Etiqueta Puede contener solo etiquetas para crear células.

En HTML hay dos etiquetas diferentes para crear celdas, la primera de ellas es

. Esta pareja significa que creamos una línea en la mesa y cuántas etiquetas se explicarán, tantas filas y será.

Bien, dentro

Ahora ponemos otra pareja - . Esta pareja significa que hemos creado una columna en esta línea, y si en cada TR, registrarán algunos TD, luego en esta línea habrá varias columnas. ¿Claro? Si no, veamos el ejemplo, ya que todo está dispuesto aquí ... Supongamos que quiero crear una tabla de estudiantes y marcas. Luego escribimos lo siguiente dentro de la etiqueta. :

Te permite crear encabezados de mesa. De forma predeterminada, los titulares se centran y se colocan sobre (<САРТION АLIGN=top>), ya sea debajo de la mesa (<САРТION ALIGN=bottom>). El título puede consistir en cualquier texto e imágenes. El texto se dividirá en cadenas correspondientes al ancho de la tabla. A veces etiqueta<САРТION> Se utiliza para la firma bajo el dibujo. Para hacer esto, es suficiente para describir la mesa sin fronteras.

Título sobre la mesa

Texto o datos

Texto o datos

Texto o datos

Texto o datos

Título bajo la tabla

Texto o datos

Texto o datos

Texto o datos

Atributo nowrap

Por lo general, cualquier texto que no se ajuste a una línea de la tabla de la tabla va a la siguiente cadena. Sin embargo, al usar el atributo NOWRAP con etiquetas<ТН> o<ТD> La longitud de la célula se expande tanto para que el texto entró en ella en una línea.

Atributo solsspan.

Etiquetas<ТD> y<ТН> Modificado utilizando el atributo de Colspan (columna, compuesto de columna). Si desea hacer que una celda sea más ancha que la superior o inferior, puede usar el atributo SOLSPAN para estirarlo sobre cualquier número de células ordinarias.

Si desea hacer que una celda sea más ancha que la parte superior o inferior,	puedes usar el atributo Colspan \u003d 2,
para estirarlo sobre cualquier número de células ordinarias.

Atributo de Rowspan

Atributo de Rowspan utilizado en las etiquetas<ТD> y<ТН>, similar al atributo del SLSPAN \u003d, solo establece el número de líneas a las que se estira la celda. Si se especifica en el número de atributos de RAPSPAN \u003d S, más unidades, entonces el número correspondiente de filas debe estar debajo de una celda estirada. En la parte inferior de la mesa es imposible colocarlo.

Atributo widn

El atributo WIDN se aplica en dos casos. Puedes ponerlo en la etiqueta.<ТАВLЕ>Para dar el ancho de toda la tabla, y se puede utilizar en las etiquetas.<ТD> o<ТН>Para establecer el ancho de la celda o el grupo de celdas. Ancho se puede indicar en píxeles o porcentaje. Por ejemplo, si especificó en la etiqueta<ТАВLЕ> Ancho \u003d 250, recibirá una tabla con un ancho de 250 píxeles, independientemente del tamaño de la página en el monitor. Al especificar WIDN \u003d 50% en la etiqueta<ТАВLЕ> La tabla ocupará la mitad del ancho de la página en cualquier tamaño de la imagen en la pantalla. Entonces, señalando el ancho de la mesa como un porcentaje, tenga en cuenta que si el usuario tiene un área de vista estrecha, su página puede parecer algo extraña. Si usa píxeles, la tabla resulta más ancha que el área de visualización, la barra de desplazamiento aparecerá en la parte inferior para moverse hacia la derecha y la izquierda sobre la página. Dependiendo de las tareas y la única, y otra forma de establecer el ancho de la tabla puede ser útil.

Texto o datos - 100% ancho

o

Texto o datos - 50% Ancho

o

Texto o Datos - Ancho 200 Píxeles

o

Texto o datos - Ancho 100 píxeles

Aplicación de celdas vacías.

Si la celda no contiene datos, no tendrá bordes. Si se requiere que las celdas tengan fronteras, pero no hubo contenido, es necesario poner algo que no sea visible al ver. Puedes usar una cadena vacía<ВR>. Incluso puede especificar columnas vacías definiendo su ancho en píxeles o unidades relativas y sin ingresar los datos en las celdas seleccionadas. Esta herramienta puede ser útil cuando se coloca en la página de texto y en los gráficos.

Atributo Sellaldding

Este atributo determina el ancho del espacio vacío entre los contenidos de la celda y sus límites, es decir, establece los campos 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 alinean y valinen

Etiquetas<ТR>, <ТD> y<ТН> Puede modificar usando atributos de alineación y valinencia. El atributo de alinee define la alineación del texto y los gráficos horizontalmente, es decir, en el borde izquierdo o derecho, o en el centro. La alineación horizontal se puede especificar de varias maneras:

Align \u003d Blydleft. Certo de los contenidos de la celda cerca del borde izquierdo.

Align \u003d izquierda. Alinea los contenidos de la celda a lo largo del borde izquierdo, teniendo en cuenta la incitación especificada por el atributo de Cellpadding.

Align \u003d CENER. Hay un contenido celular en el centro.

Align \u003d derecha Alinea los contenidos de la celda en el borde derecho, teniendo en cuenta el depósito especificado por el atributo de 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 realiza alineación de texto y gráficos dentro de la célula vertical. La alineación vertical se puede especificar de varias maneras:

Valign \u003d top. Alinea los contenidos de la celda en su límite superior.

Valign \u003d medio Centrar los contenidos de la célula verticalmente.

Valign \u003d fondo Alinea los contenidos de la celda en su límite inferior.

El atributo Valign realiza alineación de texto y gráficos dentro de la célula vertical.	cima,	medio	fondo.
Valign \u003d Líneas arriba Los contenidos de la celda en su borde superior.	cima,	cima,	cima.
Valign \u003d Centro medio centra los contenidos de la célula verticalmente.	medio	medio	medio.
Valign \u003d Líneas abajo Los contenidos de la celda en su límite inferior.	fondo,	fondo,	fondo.

Borde de atributo

En teg<ТАВLЕ> A menudo, determine cómo se verán los marcos, es decir, las líneas que rodean las tablas de la mesa y la mesa en sí. Si no especifica el marco, obtendrá una tabla sin líneas, pero se le asignará el espacio debajo de ellos. El mismo resultado se puede lograr preguntando<ТАВLЕ ВОRDER=0>. A veces quieres hacer la frontera a fondo para que se destaca. Es posible dibujar bordes extremadamente gordos para llamar la atención sobre el dibujo o el texto. Al crear tablas incrustadas, es necesario hacer para diferentes tablas de los límites de varios espesores para que sean más fáciles de distinguir.

Atributo CellSpacing

El atributo de CellSpacing determina el ancho de las brechas entre las celdas en los píxeles. Si este atributo no está especificado, el valor predeterminado se establece en dos píxeles. Usando el atributo CellSpacing \u003d, puede colocar texto y programar dónde necesita. Si desea dejar un lugar vacío, puede ingresar un espacio a 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 (tabla, TR, TD), se puede configurar el color de fondo para toda la tabla, para una cadena o para una celda separada. El valor de este atributo es el código RGB o el nombre de color estándar.

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

Fondo de atributo.

Este atributo establece la imagen de fondo para las tablas. Aplicar a las etiquetas de la tabla y TD. Su valor es una URL de archivo con una imagen de fondo. El uso de este atributo se discute a continuación.

Uso de tablas en diseño de página

Las tablas son buenas en eso si lo deseas, puedes hacer que sus fronteras sean invisibles. Esto permite la etiqueta<ТАВLЕ> Bellamente publicar en la página de texto y gráficos. Mientras etiqueta<ТАВLЕ> Sigue siendo la única herramienta poderosa para el formato en HTML. Las páginas web diseñadoras ahora tienen casi la misma libertad de usar el "espacio vacío" como los creadores de las páginas impresas. Las tablas mejor ayudan a alejarse de la colocación de texto jerárquico en las páginas web.

Si el navegador admite tablas, generalmente muestra correctamente los efectos más interesantes obtenidos de ellos.

Universidad pedagógica del estado Ural ¡Bienvenidos! Curso de formación "Conceptos básicos de Masterización Web"

Creación de tablas multicoloras

Algunos navegadores hacen posible mostrar colores. Hay varias formas de pintar la mesa, principalmente dependen del navegador utilizado.

Fronteras de color en Netscape Navigator. No solo rodearás la mesa con un hermoso marco, sino también para pedirle su color, diferente de los colores de texto y el fondo. Cree un simple GIF gris (o cualquier gif que le gustaría tener como fondo) y definirlo en la etiqueta<ВODY> Como fondo de páginas. Luego configura el color del color del color. Como resultado, tu etiqueta<ВОDY> Se verá así:

Usted creó un doble fondo - GIF y un color específico. Como resultado, el color de fondo será visible en todos los bordes de tablas y líneas horizontales (<НR>). Independientemente de si su Fondo GIF es gris o no, líneas de colores y los límites de las tablas se destacan notablemente. Si el Fondo GIF no es demasiado difícil, el tiempo de carga de la página aumentará un poco.

Bueno todo el tiempo del día, mis queridos amigos. ¿Cómo va el verano? Espero que todos estén bien. Bueno, hoy continuaremos estudiando los fundamentos de HTML y hoy seremos probablemente la última lección sobre este tema, porque entonces nos sumergiremos en CSS. Entonces, hablando de HTML, no puedo decirle la mesa, ya que también son un tema bastante significativo.

Toma al menos el mismo wordpress. De forma predeterminada, la tabla no se puede crear en este motor. Necesito una adición especial (plugin), o un código de programa especial (script). Pero puedes simplemente hacer lo que queremos con la ayuda de etiquetas simples. En general, hoy le diré cómo crear una tabla en HTML, ya que realmente puede ayudarlo mucho.

Recuerdo cómo mis primeros sitios i vertal con un diseño de mesa, es decir. El límite, las barras laterales, el bloque de aderezo y contenido eran solo los elementos de la mesa. Mencioné esto en mi artículo sobre. VERDADERO HOY, los sitios no se toman en absoluto con la ayuda de mesas, pero esto no significa que no sean necesarios. Más bien, por el contrario.

Lo que es bueno, así que esto es lo que ni siquiera tendrás que dibujar nada. Todo se realiza en el cuaderno habitual (bueno u otro, como Bloc de notas ++), y con bastante facilidad. En general, sintonicemos para trabajar.

Etiquetas

Aquí, el markup se produce algo más complicado que en otras etiquetas, pero se recuerda rápidamente. Así que nos fijamos y no nos distraemos.

Cualquier mesa siempre se encuentra en una etiqueta de pareja.

. Esos. Estas señales le dan al equipo que la mesa se ubicará aquí.

Dentro de la mesa pone una etiqueta de par.

, Crea células ordinarias con datos. Predeterminado, etiqueta contenido	Hojas al borde izquierdo. La segunda etiqueta para crear células es una etiqueta.	Le permite determinar las células que contienen encabezados para columnas o cadenas, los contenidos de dichas células se muestran en negrita y se alinean en el centro. Etiquetas	y	Estos incluyen cualquier elemento HTML que esté disponible para su uso en el cuerpo del documento. Primer titulo Segundo encabezado fila 1, celular 1 fila 1, Cell 2 fila 2, Cell 1 fila 2, Cell 2 Intentar Mesa dentro de la mesa HTML tiene la capacidad de crear tablas anidadas, es decir, tas tablas que se encuentran dentro de otras mesas. Para hacer la tabla anidada, necesita un código de tabla que desea hacer incrustado, colóquese dentro de cualquier etiqueta	. Por ejemplo, tomaremos la tabla que anteriormente anteriormente y poner este código en la segunda línea de la segunda celda: Primer titulo Segundo encabezado fila 1, celular 1 fila 1, Cell 2 fila 2, Cell 1 fila 2, Cell 2 Primer titulo Segundo encabezado fila 1, celular 1 fila 1, Cell 2 fila 2, Cell 1 fila 2, Cell 2 En esta conferencia, los principios de aplicación de tablas en el marcado HTML se consideran en detalle. Esta es una organización de texto de texto, y una tabla de coordenadas de la tabla, y organizada en la tabla gráfica. Descripciones de tablas en HTML A medida que se desarrolla WWW, ha quedado claro que los fondos que se colocan en NTML no son suficientes para mostrar cualitativamente varios tipos de documentos. La desventaja de NTML fue la ausencia de herramientas de visualización de tabla. Para este propósito, el texto preformado se usó comúnmente (etiqueta ), en el que la mesa fue descrita por caracteres de Assii. Pero esta forma de presentación de las tablas no fue suficiente de alta calidad y eliminó el estilo general del documento. Después de ingresar las tablas en HTML, las web-Crafts aparecieron no solo una herramienta para colocar texto y datos numéricos, pero una herramienta de diseño potente para acomodar en el lugar deseado de imágenes gráficas de pantalla y texto. Creación de tablas en HTML La etiqueta se utiliza para describir las tablas.<ТАВLЕ>. Etiqueta<ТАВLЕ>, como muchos otros, traduce automáticamente la cadena antes y después de la tabla. Creando una fila de tabla - etiqueta<ТR> Etiqueta<ТR> (Fila de tabla, cadena de tabla) Crea una cadena 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> Dentro de la línea de la tabla generalmente colocó celdas con datos. Cada celda que contiene texto o imagen debe estar rodeada de etiquetas.<ТD>. Número de TAGOV<ТD> La línea determina el número de celdas. Mesa Si la tabla es dos etiquetas Tr, entonces hay dos líneas en ella. Si la línea es de tres etiquetas TD, que en ne tres columnas. Encabezados de columna de mesa - etiqueta<ТН> Los encabezados para columnas y filas de la tabla están configurados usando la etiqueta del título<ТН> (Toble Nodader, título de la tabla). Estas etiquetas son como<ТD>. La diferencia es que el texto encerrado entre las etiquetas.<ТН>Grabado automáticamente por negrita y la ubicación predeterminada se encuentra en el medio. El centrado se puede cancelar y alinear el texto en el borde izquierdo o derecho. Si utiliza<ТD> con etiqueta<В> y atributo<АLIGN=center>El texto también se verá como un encabezado. Sin embargo, debe tenerse en cuenta que no todos los navegadores se mantienen en la fuente de grasa de las tablas, por lo que es mejor establecer títulos de mesa utilizando<ТН>. El encabezado está centrado por defecto El título puede combinar columnas. El título puede estar ubicado frente a columnas. Texto o datos Texto o datos El título puede combinar líneas. Texto o datos Texto o datos Texto o datos Texto o datos Texto o datos Texto o datos Usando encabezados de mesa - etiqueta<САРТIОN> Etiqueta

	Matemáticas	idioma ruso	Historia
Mededrev	3	5	5
Smirnov	5	5	5
Sokolov	3	2	3

¿Qué hicimos aquí? E hicimos cuatro líneas (TR), cada una de las cuales contiene cuatro tablas (TD). En el primer bloque TR, escribimos el nombre de las disciplinas de capacitación, mientras dejaba la primera columna en blanco para no interrumpir la tabla.

Al lado de cada primer par tD. Insertimos los nombres de los estudiantes, y todos los demás. tD. Llene las estimaciones en la celda apropiada. En general, escríbelo y guarde el archivo, luego ábralo en el navegador, entonces usted mismo entiende todo lo que sucede.

Pero yendo al documento, vemos que la mesa no es del todo similar a lo que planeamos. ¿Y qué falta aquí? Correcto - fronteras. Pero no te preocupes. Te lo contaré justo debajo.

Pero para la decencia, le mostraré otra etiqueta que destaca y centre los datos en las tablas. Esta etiqueta esta escrita como