atributos td. Valor CSS predeterminado. Descripción de los parámetros de la etiqueta
Hola, queridos lectores del blog. Les traigo otro artículo, que estará dedicado a qué es una tabla en HTML, qué etiquetas se utilizan para crearla (Tr, Th, Td, Table, Colspan, Cellpadding, Cellspacing), cómo configurar el fondo y los bordes. por ello, y también mucho más.
A pesar de que el diseño tabular del sitio () en lenguaje HTML () está siendo reemplazado gradualmente por el diseño de bloques, aún necesita conocer las etiquetas básicas y la capacidad de personalizar tablas. Por ejemplo, el motor todavía utiliza un diseño obsoleto y, si desea realizar algún cambio en la apariencia de sus páginas, este conocimiento le ayudará.
Incluso la inserción más simple de un código de contador de visitas puede requerir que comprenda los principios de construcción de tablas en HTML. Permítanme recordarles que ya lo hemos considerado, además.
Tablas en HTML - elementos Tabla, Tr, Th, Td
Hoy en día, el diseño de las tablas ha pasado a un segundo plano con la llegada de CSS, pero, sin embargo, a menudo la forma más conveniente de presentar información sigue siendo la vieja tabla y aún es necesario conocer sus etiquetas principales.
Antes, incluso antes implementación de CSS, los webmasters generalmente no podían prescindir de ellos, porque en ellos se basaba todo el diseño de los sitios. No sólo se utilizaron las etiquetas básicas Table, Tr, Th y Td, sino también toda la rica variedad elementos auxiliares(Col, Tbody, Título, Rowspan, Colspan, etc.). Todavía puede encontrar sitios y foros en Internet creados sobre la base de un diseño tabular, lo que puede servirle como un incentivo adicional para estudiar los conceptos básicos de su construcción.
Las tablas en el lenguaje HTML son un elemento especial, porque en esencia, el elemento Tabla es a nivel de bloque, pero al mismo tiempo no ocupa todo el espacio disponible en ancho, como lo hacen otros. elementos de bloque. En términos de ancho, ocupa sólo el espacio necesario para acomodar el contenido, ni más ni menos.
Sin embargo, en todos los demás aspectos, la etiqueta Tabla se comportará exactamente como un elemento de bloque. Por ejemplo, en la página web aparecerán signos seguidos en el código. estar ubicados uno debajo del otro, incluso si su tamaño les permitiera estar en la misma línea. Otra característica es que tienen una estructura bastante compleja, en la que es fácil confundirse.
Se forman según el siguiente principio. Toda la tabla está enmarcada por etiquetas de tabla de apertura y cierre, dentro de las cuales sus filas se crean usando Tr, por ejemplo, así:
Pero dentro de Tr, las células se crean usando Td. También se pueden crear usando Th, y la diferencia entre estas celdas y las creadas usando elementos Td será solo puramente visual. Funcionalmente, los elementos Td y Th funcionan de manera idéntica.
Pero el contenido de una celda creada con la etiqueta Td estará alineado a la izquierda, mientras que el contenido de una celda creada con la etiqueta Th estará alineado al centro y también en negrita en la fuente utilizada. Los propios elementos Th se introdujeron precisamente para crear encabezados de columnas y filas para tablas.
Y es dentro de las celdas Td o Th donde se ubica el contenido. Todo lo que veas en una página web dentro de una tabla estará ubicado exactamente dentro de las celdas que están formadas por las etiquetas Td o Th de apertura y cierre:
Pero la creación de signos en sí ocurre línea por línea: abra Tr y luego cierre Tr. Cuántos pares de elementos Tr tienes, el número de filas que obtendrás. ¿Cuántas columnas habrá?
Exactamente tantas celdas (Td o Th) como crees en cada fila (Tr). Si desea hacer un signo simple y simétrico (vea la imagen de arriba), entonces debe hacer que el número de celdas (Td o Th) en cada línea sea el mismo.
Entonces, las tablas en HTML se forman línea por línea: Tr es responsable de la formación de filas y Td o Th son responsables de la formación de columnas. Lo que es digno de mención es que dentro de Td o Th puedes insertar absolutamente cualquier contenido: texto, elementos en línea o de bloque (, imágenes usando, encabezados, párrafos), etc.
Eso. Resulta que no puede haber una tabla en el código HTML que conste de menos de tres elementos: Tabla, Tr, Td (o Th).
Mesa: el elemento principal de la mesa.
Comencemos con la etiqueta Tabla, es decir, con los atributos que tiene:
De hecho, estos no son todos los atributos, sino sólo los más relevantes y utilizados. este momento. Máximo información detallada para todo tipo de atributos de la etiqueta Tabla, así como cualquier otro elemento.
Porque La mesa es un elemento de bloque que no tiende a ocupar todo. espacio disponible de ancho, lo que significa que podemos aplicar alineación horizontal a la etiqueta Tabla usando el atributo Alinear.
Pero aquí no es tan simple, porque usar los valores izquierdo y derecho en Align no conducirá a alinear nuestro letrero a la izquierda o a la derecha, sino a envolver texto alrededor de él, en completa analogía con cómo lo vimos con . Bueno, si usa el valor Centro para Alinear, simplemente se alineará con el centro sin ningún ajuste.
Usando el atributo Ancho, puede establecer el ancho de la tabla y puede usarlo como valores absolutos en píxeles, y relativo en porcentajes (el 100% corresponderá a todo el espacio disponible en ancho).
Adelante. relleno de celda le permite establecer la sangría del contenido en las celdas (Td o Th) desde sus bordes (en los cuatro lados al mismo tiempo), y Cellspacing le permite establecer la distancia entre celdas adyacentes de la tabla en píxeles (el valor predeterminado es dos píxeles ). Creo que la idea es clara, pero quedará más claro mostrándolo con un ejemplo:
Los siguientes atributos de la etiqueta Tabla son responsables del fondo de nuestra tabla: estos son los elementos Bgcolor y Background. Como probablemente recuerdes, con usando fondo(que, por cierto, se usa solo en la etiqueta Cuerpo y los elementos: Tabla, Tr, Th o Td) puede seleccionar cualquier imagen del archivo como fondo, cuya ruta se especificará como el valor de este atributo .
Esta imagen, como un mosaico, cubrirá toda la página web (en caso de que Etiqueta del cuerpo) o la tabla completa (en el caso de Table), por ejemplo, así:
Cuando utilice el atributo Bgcolor en la tabla, deberá especificar como valor el color con el que desea llenar su tabla. vea el enlace proporcionado.
Adelante. El siguiente es el atributo. Borde, que se encarga de formar el marco. Hay sutilezas al explicar cómo dibujar marcos, pero para simplificar podemos decir que el marco se dibujará alrededor de las celdas y alrededor de la mesa misma. En Borde tendrás la opción de establecer el grosor de este borde en píxeles. De forma predeterminada, no se dibuja ningún borde (borde=0).
Pero hay que tener en cuenta que en marco HTML La mesa está en relieve. Tendrá los colores de los lados claro y oscuro, que parecen como si cayeran desde esquina superior luz de la pantalla. En este sentido, hay que tener en cuenta que en Borde no se establece el ancho de todo el marco. A este espesor se le añadirá luz y lado oscuro. En general, es un poco confuso, pero hay que verlo con un ejemplo.
Con el elemento Tabla consideraremos que hemos terminado y es momento de pasar al siguiente. La peculiaridad de Tr es que es puramente de servicio y no es visible en la página web. En esencia, Tr es un contenedor invisible para el Td o Th que se ubicará en él.
Tr - elemento de fila de tabla en HTML
Usando la etiqueta Tr, simplemente colocamos todas las celdas que contiene (Td o Th) en una línea y listo, Tr en sí no es visible. De esto se desprende una conclusión importante: todos los atributos de esta etiqueta se aplican específicamente a las celdas contenidas en este contenedor. Los atributos Tr más utilizados actualmente se presentan en la figura:
Alinear funciona de la misma manera que para los párrafos o encabezados, el contenido de todas las celdas (Td o Th) de una fila determinada (Tr) se alinea a la izquierda o a la derecha, o se centra.
Valign establece la alineación vertical del contenido en todas las celdas (Td o Th) de una fila determinada (Tr). Los valores Superior, Medio e Inferior establecen la alineación, respectivamente, hacia arriba, medio y centro. borde inferior. La alineación predeterminada es Media.
El valor de Línea base especifica la alineación del texto en Td o Th de esta línea a lo largo de la línea base de fuente. Esto puede ser conveniente cuando tienes diferentes celdas el texto tiene diferente tamaño La fuente y la alineación de la línea base en Valign harán que dicha tabla sea más útil para los lectores (en mi opinión):
Solo las primeras líneas de contenido en las celdas (Td o Th) se alinearán a lo largo de la línea base de la fuente, y todas las demás líneas de contenido se ubicarán tal como sucede.
También puedes utilizar el atributo Bgcolor en la etiqueta Tr, rellenando estas líneas con el color de fondo que necesites. Eso. Todas las celdas de esta línea se rellenan con el color de su elección:
Como puede ver, es Td o Th dentro de este elemento Tr el que se rellena con el color de fondo, porque la línea en sí no es visible en la placa.
Td o Th: elementos de celda de tabla en HTML
Bueno, ahora vayamos al grano. elemento importante— celda, es decir, los atributos de las etiquetas Td y Th, que todavía están en uso:
Alinear y Valign en las etiquetas Td o Th le dicen al navegador exactamente cómo debe alinearse el contenido en ancho y alto, y no en toda la línea, como vimos recientemente. Además, los atributos de una celda específica tendrán prioridad sobre los atributos de filas similares.
Aquellos. en toda la línea, el contenido de las celdas se puede alinear a la derecha, pero en alguna línea individual puede establecer una alineación diferente y tendrá prioridad (interrupción) sobre la alineación que se especificó en la etiqueta Tr.
Ancho y Alto le permiten establecer el alto y el ancho de la celda, tanto en píxeles como en porcentaje (por ancho). Bgcolor y Fondo en elementos HTML Td o Th le permiten establecer un fondo separado (en forma de color o imagen) para cada celda específica:
Nowrap en Td o Th evita que el contenido de la celda se transfiera a nueva línea, a menos que aparezca en el texto de este contenido. Es decir, en este caso, caracteres de espacio en blanco para transferencia automática No se utilizará texto. Probablemente, este atributo pueda considerarse como una especie de análogo del descrito.
Bueno, ahora hemos llegado a atributos muy interesantes y, lo más importante, útiles: Colspan y Rowspan. Se refieren al alcance. Rowspan es el intervalo de filas y Colspan es el intervalo de columnas. Sirven, respectivamente, para combinar celdas en una columna o en una fila.
Si desea combinar varias celdas en una columna de la tabla, necesitará usar Rowspan, porque... cubres varias líneas con una celda. Y si desea combinar varias celdas seguidas, necesitará usar Colspan, porque Debes cubrir varias columnas con una celda.
Colspan y Rowspan están predeterminados en igual a uno, es decir. cada celda pertenece a una columna y una fila. Tan pronto como hayas fusionado las celdas, ya comenzarán a pertenecer a varias columnas o varias filas (o ambas al mismo tiempo).
Título: título de la tabla
Hay otro elemento adicional Lo que es llamado " encabezado HTML tablas" y se forma utilizando etiquetas Caption. Este elemento no se usa más de una vez (o no se usa en absoluto) y se coloca inmediatamente después de la etiqueta de apertura de la Tabla. Solo el contenido en línea puede estar dentro de un Título y no debe haber ningún elemento de bloque allí.
La posición del título se puede establecer usando el atributo Alinear. Los valores Superior e Inferior establecerán la posición del encabezado encima y debajo de la tabla, respectivamente. Los valores Izquierda y Derecha no se utilizan actualmente porque trabajar de manera completamente diferente en diferentes navegadores. Lo mejor sería olvidarse de ellos. Aquellos. En general, el título solo se puede ubicar debajo o encima del signo (este valor se usa de forma predeterminada):
EN caso general, puede dar el siguiente diagrama de bloques de construcción:
Veamos ahora un ejemplo de cómo se puede crear una tabla con celdas de diferentes tamaños, algunas de las cuales abarcarán varias columnas o filas. Como ya te contamos un poquito antes, se crean línea a línea en Html. Confiemos en el diseño que se muestra en la figura ubicada justo arriba.
Primero, escribimos la etiqueta de apertura Tabla e inmediatamente después abrimos la etiqueta de la primera línea Tr. La primera línea de nuestra mesa futura consta de una celda que abarca dos columnas a la vez, por lo que deberá agregar el atributo Colspan=2 a la etiqueta de esta celda:
A continuación cerramos la etiqueta de la primera fila (Tr) y abrimos la etiqueta de la siguiente, que ya tendrá dos celdas. La primera celda de la segunda fila no tiene nada especial y constará de las etiquetas Td o Th habituales de apertura o cierre, entre las cuales se encerrará su contenido.
Pero la segunda celda de la segunda línea es notable, porque cubre dos líneas a la vez y por lo tanto necesitaremos agregar el atributo Rowspan=2 a su etiqueta:
Bueno, sólo nos queda describir la tercera línea. La primera celda de esta línea, nuevamente, no representa nada especial, pero la segunda ya ha sido descrita por nosotros en la segunda línea, lo que significa que ya no estará aquí. Cada celda solo se puede describir una vez., espero que esto quede claro. Eso. la tercera fila de la tabla se verá así:
Bueno, ahora combinemos todo esto en un código y veamos qué sucede:
En realidad, resultó como lo planeamos. Está claro que no hay nada complicado aquí: basta con comprender la lógica de cómo funcionan los atributos Colspan y Rowspan.
Diseño tabular (obsoleto)
Ahora hablemos de un concepto como el diseño tabular y por qué están en el idioma. marcado de hipertexto se convirtió en la herramienta principal en ausencia de CSS (ahora, por supuesto, en todas partes). El caso es que sólo las tablas permitieron resolver de forma bastante sencilla y flexible el problema principal del diseño de un sitio web: colocar elementos de bloque en el código HTML en una fila.
Como ya sabes, los elementos de bloque, cuando se colocan uno tras otro en el código HTML, se colocarán uno debajo del otro en la página web. Por cierto, los mismos signos también son elementos de bloque y puedes usar dos métodos para colocarlos en una fila.
El primero de ellos es asignar el atributo Alinear con el valor Izquierda a la etiqueta Tabla de la primera de las tablas, por lo que la segunda ya estará a la derecha de la primera y presionará contra ella. Escribiendo Align=left y el segundo en la etiqueta Table, podemos poner hasta tres piezas en una fila.
Pero el primer método no nos permite alejarlos entre sí, porque CSS aún no se usaba en ese momento. Por lo tanto, la forma más conveniente de colocar varias tablas (o cualquier otro elemento del bloque) en una fila era crear una Tabla con una fila (Tr) y el número de celdas que necesitábamos (Td o Th), acorde con el número de bloques. elementos que necesitaríamos colocar en una fila.
Entonces, para la colocación más sencilla de varias piezas seguidas, deberá crear las llamadas tablas anidadas, cuando se inserta otra en la celda de una como contenido:
Ahora a elementos HTML Ubicados en las celdas de la tabla que creamos, será posible aplicar todos los atributos descritos anteriormente, tanto para etiquetas Tr como para etiquetas Td o Th. Será posible posicionar el contenido en celdas, establecer sangrías requeridas, rellenar con fondo, etc.
Aquellos. ahora sin usando CSS(que no existía antes) podemos alinear el contenido (nuestros elementos de bloque) y, al hacer invisible el marco del letrero, podemos posicionar el contenido en la página web. Por ejemplo, no será difícil configurar una vista de texto de tres columnas, o lo que desee.
si abres fuente algún sitio antiguo, y también mejor que el foro, entonces con un alto grado de probabilidad verás allí muchos signos anidados dentro de otros, y así sucesivamente hasta completar la confusión.
En diseño tabular Estos diseños se utilizaban en todas partes, y algunas soluciones de aquella época, que ahora se implementarían en poco tiempo, requerían estructuras muy voluminosas hechas de tabletas encajadas unas dentro de otras. En Table se crearon menús horizontales y verticales para sitios web, se dividieron párrafos con textos en columnas y mucho más.
Tbody, Thead y Tfoot: contenedores para filas en una tabla HTML
Pero volvamos a nuestra oveja nuevamente y veamos algunos elementos más que permitieron antes (cuando aún no había CSS) establecer propiedades para una gran cantidad de filas a la vez en la etiqueta Tabla. Los propios Tr son contenedores invisibles para Td o Th, pero además existen otros tres tipos de contenedores, que a su vez sirven como contenedores para Tr.
Utilizándolos, podemos establecer propiedades inmediatamente para grupo grande líneas, por ejemplo, rellenarlas con un fondo, asignarles la alineación deseada, etc. Me refiero a elementos como Thead (para el encabezado), Tbody (para el contenido) y Tfoot (para el final). Al crear una tabla, primero se escribe un grupo de líneas relacionadas con el encabezado (encerrado en etiquetas Thead), luego un grupo de líneas relacionadas con su final (Tfoot), y solo luego un grupo de líneas relacionadas con su contenido principal (Tbody ).
En una tabla HTML, la sección Thead se puede escribir solo una vez o puede no existir en absoluto. Lo mismo se aplica al contenedor fabricado con elementos Tfoot. Pero debe estar presente al menos una sección Tbody.
Pero, por ejemplo, los carteles que se muestran en esta página se muestran perfectamente, aunque no me molesté en agregar las etiquetas Tbody de apertura y cierre. Todo es muy simple: el propio navegador agregó los elementos Tbody al analizar el código, lo cual puede verificar mirando este código resultante:
Pero en la práctica, si los webmasters solían crear tablas complejas, Tbody les resultó muy útil. Digamos que tiene una tabla con un par de miles de filas y necesita ajustar la alineación en todas las celdas de una manera diferente a la predeterminada. Sin usar Tbody, tendrías que agregar el atributo correspondiente a todas las etiquetas de fila un par de miles de veces.
Pero puedes encerrar todos estos miles de líneas en un contenedor Tbody y solo escribir en él atributo requerido con la alineación requerida. Esto puede aliviar en gran medida el código HTML de repeticiones innecesarias. En general, en mesas simples Los elementos Tbody, Thead y Tfoot pueden descuidarse, pero en los complejos su uso sigue siendo relevante incluso en nuestro tiempo, cuando existe tal herramienta poderosa como CSS.
Col: establece el ancho de las columnas de la tabla
Col y Colgroup ahora tienen casi la misma influencia, así que hablemos de su uso usando el elemento Col como ejemplo. Es necesario establecer cómodamente el ancho de columnas y filas. Col tiene dos atributos principales, Span y Width, que le permiten establecer diferentes anchos para todas las columnas encerradas en etiquetas Col.
Span establece el intervalo (el tamaño del contenedor) especificando el número de columnas a las que se aplicará el ancho especificado en Ancho. Por ejemplo, así:
Aquellos. para las dos primeras columnas de la tabla establecí el ancho en 50 píxeles, para la tercera columna en 200 píxeles y para las dos restantes en 100 píxeles cada una. Todo es bastante sencillo y claro, en mi opinión. Pero, de hecho, el ancho de las columnas especificadas mediante elementos de columna, esta es solo su declaración, porque cuando cambia el tamaño de la ventana del navegador, el ancho de las columnas cambiará.
¡Buena suerte para ti! Nos vemos pronto en las páginas del blog.
Puedes ver más vídeos entrando a");">
Tú podrías estar interesado
Seleccionar, Opción, Área de texto, Etiqueta, Conjunto de campos, Leyenda - etiquetas formularios HTML listas desplegables y campo de texto
Cómo se configuran los colores en código HTML y CSS, selección de tonos RGB en tablas, salida de Yandex y otros programas 
MailTo: qué es y cómo crear un enlace en HTML para enviar un correo electrónico 
Formularios HTML para el sitio - Etiquetas de formulario, Entrada y selección, Opción, Área de texto, Etiqueta y otros para crear elementos de formulario web
Cada etiqueta
Como hacer una tabla en html
Pongamos un ejemplo, código HTML:
tabla de ejemplo Columna 1 Columna 2
Presta atención al celular.
Ahora echemos un vistazo más de cerca a todos los atributos de las etiquetas.
| o lineas | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ... | ... |
...
2. Propiedad background="URL" - conjuntos imagen de fondo. En lugar de la URL se debe escribir la dirección de la imagen de fondo. Ejemplo
Se convierte a lo siguiente en la página: En el ejemplo considerado, nuestro imagen de fondo está ubicado en la carpeta img (que está en el mismo directorio que la página html) y la imagen se llama fon.gif. Tenga en cuenta que en la etiqueta agregamos style="color:white;" . Como el fondo es casi negro, para evitar que el texto se mezcle con el fondo, lo hicimos blanco. 3. Propiedad bgcolor="color": establece el color de fondo de la tabla. Puedes elegir cualquier color de toda la paleta (ver códigos y nombres de colores html) 4. Propiedad border="number" - establece el grosor del borde de la tabla. En ejemplos anteriores, especificamos border="1" , lo que significa que el grosor del borde es 1 píxel. 5. Propiedad bordercolor="color" - establece el color del borde. Si border="0" entonces no habrá borde y el color del borde no tendrá significado. 6. Propiedad cellpadding="número": sangría desde el marco hasta el contenido de la celda en píxeles. 7. Propiedad cellspace="número": la distancia entre celdas en píxeles. 8. Propiedad cols="número" - el número de columnas. Si no lo configura, el propio navegador determinará el número de columnas. La única diferencia es que especificar este parámetro probablemente acelerará la carga de la tabla. 9. Propiedad frame="parámetro": cómo mostrar los bordes alrededor de la tabla. Puede tomar los siguientes valores:
10. Propiedad altura="número" - establece la altura de la tabla: ya sea en píxeles o en porcentajes. 11. Reglas de propiedad="parámetro": dónde mostrar los bordes entre celdas. Puede tomar los siguientes valores:
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
