| ... |
| ... |
...
2. Propiedad background="URL": establece la imagen de fondo. En lugar de la URL se debe escribir la dirección de la imagen de fondo.
Ejemplo
| tabla de ejemplo |
| Columna 1 |
Columna 2 |
Se convierte a lo siguiente en la página:
En el ejemplo anterior, nuestra imagen de fondo está ubicada 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:
- vacío - no dibujes fronteras
- borde - borde alrededor de la mesa
- arriba: borde a lo largo del borde superior de la mesa
- abajo - borde en la parte inferior de la tabla
- hsides: agrega solo bordes horizontales (superior e inferior de la tabla)
- vsides: dibuja solo bordes verticales (a la izquierda y a la derecha de la tabla)
- rhs: borde solo en el lado derecho de la tabla
- lhs: borde solo en el lado izquierdo de la mesa
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:
- todo: se dibuja una línea alrededor de cada celda de la tabla
- grupos: se muestra una línea entre los grupos formados por etiquetas , , ,
o
- cols: la línea se muestra entre columnas
- ninguno: todos los bordes están ocultos
- filas: se dibuja un borde entre las filas de la tabla creadas a través de la etiqueta
12. Propiedad width="number" - establece el ancho de la tabla: ya sea en píxeles o en porcentajes.
13. Propiedad class="class_name": puede especificar el nombre de la clase a la que pertenece la tabla.
14. Propiedad style="styles": los estilos se pueden configurar individualmente para cada tabla.
Ahora es el momento de sumergirse en la tabla y observar los atributos de las celdas de la tabla. Estos atributos deben escribirse en la etiqueta de apertura.
.
Atributos y propiedades Y |
1. Propiedad align="parámetro": establece la alineación de una celda de tabla individual. Puede tomar los siguientes valores:
- izquierda - alineación izquierda
- centro - alineación central
- derecha - alineación derecha
2. Propiedad background="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. Propiedad bgcolor="color": establece el color de fondo de la celda.
4. Propiedad bordercolor="color": establece el color del borde de la celda.
5. Propiedad char="letra": especifica la letra a partir de la cual se debe realizar la alineación. El valor del atributo align debe establecerse en char.
6. Propiedad colspan="número": establece el número de celdas horizontales que se fusionarán.
7. Propiedad altura="número": establece la altura de la tabla: en píxeles o como porcentaje.
8. Propiedad width="number" - establece el ancho de la tabla: ya sea en píxeles o como porcentaje.
9. Propiedad rowspan="número": establece el número de celdas verticales que se fusionarán.
10. Propiedad valign="parámetro": alineación vertical del contenido de la celda.
- top: alinea el contenido de la celda con el borde superior de la fila
- alineación media - media
- abajo - alineación con el borde inferior
- línea base - alineación con la línea base
Nota 1 Para etiqueta | Están disponibles las mismas opciones que para | . Parámetros para una etiqueta | se aplicará jerárquicamente a todos dentro de el
Cómo evitar que los bordes de las celdas de una tabla se peguen
Si usa un borde (borde de celda) y relleno de ceros entre celdas, todavía estarán pegadas y obtendrá un borde doble. Para evitar esto, debe especificar border-collapse: contraer en los estilos de tabla:
...
Estimado lector, ahora ha aprendido mucho más sobre la etiqueta de tabla html. Ahora te aconsejo que pases a la siguiente lección.
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 en la mesa no fue suficiente. Alta calidad y destacó 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 como porcentaje. 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 a través de 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% |
o
| Texto o datos - ancho 50% |
o
| Texto o datos: 200 píxeles de ancho |
o
| 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 texto y 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.
Mesa con marcos
| Nombre |
Apellido |
| Larisa |
isaeva |
| Dmitriy |
Kolésnikov |
RESULTADO:
Mesa sin marcos
Mesa con marcos
Atributos de etiqueta | Y | para fusionar celdas
Ejemplo
|
hurones |
| peso |
tamaño |
| machos |
1,2 – 2,5 kilos |
hasta 70cm |
| hembras |
0,7 – 1,0 kilos |
hasta 40cm |
RESULTADO:
|
|
hurones |
| peso |
tamaño |
| machos |
1,2 – 2,5 kilogramos |
hasta 70cm |
| hembras |
0,7 – 1,0 kilogramos |
hasta 40cm |
Según el estándar HTML5, todos los atributos de tabla utilizados anteriormente, como borde, espacio entre celdas, relleno celular etc. ya no son compatibles y el validador considera su uso como errores en el código. Para diseñar tablas, necesita utilizar estilos CSS, con los que puede reemplazar todos los atributos de tabla obsoletos. Por ejemplo, en lugar del atributo espacio entre celdas para cambiar la distancia entre las celdas de la tabla, use la propiedad espaciado de fronteras y para alinear el contenido en las celdas de la tabla – propiedades texto alineado Y alineación vertical. Estilos CSS para diseñar tablas.
Etiquetas de agrupación de filas de tabla HTML
Para crear tablas más complejas puedes usar etiquetas:
Ejemplo
consumo de cerveza
| NOMBRE COMPLETO. |
litros |
| Total |
250 |
| Ivanov Ivan Ivanovich |
133 |
| Petrov Petr Petrovich |
117 |
RESULTADO:
Etiquetas de agrupación de columnas de tabla HTML
Atributo de etiqueta Y
La forma más sencilla de entender cómo utilizar la agrupación de filas y columnas es utilizar el ejemplo de una tabla de Sudoku.
La etiqueta col establece parámetros por separado para cada columna. No importa cómo escribir en el código fuente:
o
Ejemplo
RESULTADO:
No intentes establecer el estilo. texto alineado para etiquetas Y . Texto colocado entre etiquetas ... | , no hereda este estilo porque la etiqueta no es hijo de ninguna etiqueta , sin etiqueta .
La alineación horizontal del texto en una columna de tabla específica se puede cambiar especificando un estilo texto alineado para pseudoclase td:n-ésimo-niño(n), donde n es el número de columna. Sin embargo, este método no funcionará si el atributo está presente entre las celdas de la tabla. colpano.
Ejemplo
| Nombre |
Precio, frote.) |
| Pago por minuto de solarium (a partir de 4 minutos) | 15 |
| 50 minutos de solárium (14 rublos/min, 1 mes) | 700 |
| 100 minutos de solárium (13 rublos/min, 2 meses) | 1300 |
| 200 minutos de solárium (12 rublos/min, 3 meses) | 2400 |
RESULTADO:
Sin embargo, este método no funcionará si el atributo está presente entre las celdas de la tabla. colpano.
En la última lección, creamos un archivo para la página principal del sitio index.html, lo abrimos con el Bloc de notas y le agregamos código HTML que contiene las etiquetas HTML requeridas.
Además, aprendimos cómo cambiar el color de fondo de la página cambiando el valor del parámetro bgcolor de la etiqueta BODY.
Ahora recordemos qué diseño o marco elegimos para el sitio, de esto hablaremos en nuestro curso.
Tenga en cuenta que el diseño del sitio es, de hecho, mesa.
Cabe señalar aquí que una de las formas más comunes de diseñar páginas HTML es utilizar tablas.
De hecho, existen dos tipos principales de diseño de página para sitios web HTML: usar tablas y usar estilos CSS.
Actualmente, es más preferible el diseño que utiliza estilos CSS, pero al crear un sitio en un bloc de notas, es más fácil usar un diseño de tabla, por lo que nos centraremos en la tabla.
En el período inicial de desarrollo de Internet, se utilizaba principalmente el método tabular de diseño de páginas. Uso extensivo de tablas en el diseño. HTML páginas se debió al hecho de que se puede crear una tabla con cualquier número de columnas y filas. El tamaño de la tabla se puede cambiar muy fácilmente mediante parámetros.
Cuando se diseña en forma de tabla, la página HTML se divide en la cantidad requerida de celdas, cada una de las cuales ocupa un lugar muy específico en la página. Como resultado, puede agregar bloques con contenido a las celdas deseadas de la tabla, colocando así el contenido en el lugar correcto.
Bueno, continuemos nuestro trabajo. Abramos el directorio html y busquemos allí una descripción de la etiqueta TABLE. Al principio de la descripción de la etiqueta, preste atención a la observación de que una tabla con un borde invisible se usa ampliamente para el diseño de páginas web, como comentamos anteriormente.
Entonces, la tabla en el código de la página web está especificada por la etiqueta , sabemos que una tabla consta de columnas verticales y filas horizontales que forman las celdas de la tabla. Las filas en una tabla html están especificadas por la etiqueta , y la celda es etiqueta | .
Abramos el archivo index.html de nuestra página web para editarlo usando Notepad++. Y ábralo usando un navegador para ver los cambios en la página.
Al principio de este artículo, hablamos sobre el hecho de que el diseño del sitio que hemos planeado es una mesa.
Además, la tabla de diseño de nuestro sitio constará de tres filas (encabezado, contenido y pie de página) y dos columnas (menú y contenido).
Para agregar una tabla con tres filas y dos columnas, cambiemos nuestro código para agregar lo siguiente:
| 1 fila 1 columna |
1 fila 2 columnas |
| 2 filas 1 columna |
2 filas 2 columnas |
| 3 filas 1 columna |
3 filas 2 columnas |
Para establecer un borde en la tabla, utilice el parámetro de borde. El grosor del borde de la tabla se especifica en píxeles (px).
Agreguemos un parámetro de borde a nuestro código html, con un valor de argumento igual a 1px. Es decir, el grosor del marco de la tabla será igual a un píxel:
| 1 fila 1 columna |
1 fila 2 columnas |
| 2 filas 1 columna |
2 filas 2 columnas |
| 3 filas 1 columna |
3 filas 2 columnas |
Para alinear la tabla en el centro de la ventana del navegador usamos el parámetro align, que puede tomar tres valores: izquierda, centro, derecha. Está claro que para alinear la tabla en el centro de la ventana del navegador, el valor de El argumento del parámetro de alineación debe ser igual a: centro.
Y establezcamos aquí el ancho de la mesa. El ancho de la tabla se especifica mediante el parámetro ancho. Los valores que puede tomar este parámetro se pueden expresar como un número entero en píxeles o como un porcentaje del ancho de la ventana actual del navegador.
Agreguemos alineación y ancho de tabla a nuestro código y, como resultado, obtenemos el siguiente código:
| 1 fila 1 columna |
1 fila 2 columnas |
| 2 filas 1 columna |
2 filas 2 columnas |
| 3 filas 1 columna |
3 filas 2 columnas |
Actualizamos la ventana del navegador de nuestra página web para ver los cambios, vemos que la tabla se ha alineado al centro de la ventana y ha cambiado su ancho.
Ahora volvamos al marco de la tabla, en el código html lo configuramos en 1 píxel usando el valor del argumento del parámetro borde: borde=”1”.
Consulte los parámetros de la etiqueta TABLE en el libro de referencia html; aquí hay dos parámetros que afectan apariencia estructura.
El primer parámetro: espacio entre celdas: establece la distancia entre las celdas de la tabla.
Segundo parámetro: relleno de celda: la distancia desde el marco hasta el contenido de la celda depende del valor del argumento de este parámetro.
Para que todas las distancias y sangrías sean mínimas, establecemos los valores de los argumentos encima de los parámetros anteriores en cero.
Como resultado, el código html de la tabla tomará la siguiente forma:
| 1 fila 1 columna |
1 fila 2 columnas |
| 2 filas 1 columna |
2 filas 2 columnas |
| 3 filas 1 columna |
3 filas 2 columnas |
Como recuerda, nuestra tabla debe tener tres filas, y la primera fila debe tener una celda, la segunda fila debe tener dos celdas y la tercera fila también debe tener una celda.
Si nos fijamos en el aspecto de la tabla, veremos que para darle la forma deseada a la tabla, basta con combinar las celdas horizontales de la primera y tercera fila.
Para hacer esto, usaremos el parámetro colspan. Este parámetro se utiliza en la etiqueta TD. El valor del argumento del parámetro colspan indica el número de celdas horizontales que se fusionarán; en nuestro caso, este valor es 2.
Además de agregar el parámetro colspan, cambiemos las etiquetas en las celdas de la tabla para que coincidan con nuestro diseño.
Después de todos los cambios, el código html completo de nuestra página quedará como sigue:
Cómo crear un sitio web en el bloc de notas
| Encabezamiento |
| menú del sitio |
Contenido |
| Pie de página |
Guardemos nuestro código en el Bloc de notas y actualicemos el archivo index.html en el navegador para ver los cambios.
Entonces, esta lección resultó ser bastante extensa, así que continuaremos trabajando en la tabla html de nuestra página en la próxima lección.
Las tablas en HTML son tan funcionales que puedes usarlas para diseñar sitios web completos (leer). Ahora hablaremos de insertar tablas HTML simples en una página web, analizando solo el marcado, pero sin tocar el diseño, porque es mejor decorar tablas usando estilos CSS.
Etiquetas y atributos de tabla
Estos son los elementos básicos que necesita para crear tablas:
- un contenedor dentro del cual se encuentra la mesa (igual que para marcado o
para listas numeradas).
- borde- un atributo que determina el grosor de los marcos. Es mejor utilizar la propiedad CSS del borde.
-
especifica la firma de la tabla. No es necesario que utilices un contenedor, pero si aun así decides ponerle un título a la tabla, colócalo inmediatamente después de la etiqueta.
, fuera de celdas y filas.
- una etiqueta emparejada que contiene una fila de la tabla (celdas ubicadas en el mismo nivel horizontal).
|
- una etiqueta que crea una celda de encabezado de tabla. Externamente, su contenido difiere del contenido de otras celdas; generalmente el texto dentro |
El navegador lo resalta en negrita y lo coloca en el centro.
- un contenedor con el que se crea una celda simple. ¿Cuántas etiquetas de este tipo contendrá una línea (etiqueta
, habrá tantas celdas en él: una etiqueta, una celda.
-
le permite agrupar columnas, de forma rápida y sin saturar el código, asignarles características comunes. Usando un contenedor, puedes separar las partes lógicas de una tabla entre sí. Colocado después de la etiqueta
, si no está allí, entonces después
.
-
utilizado para el mismo fin que
.
puede contener
, pero no al revés.
- durar- un atributo que especifica el número de columnas a las que se aplican las propiedades del contenedor
.
-
,
Y
- contenedores que permiten dividir la tabla en las partes superior (títulos), principal (cuerpo) e inferior (final), respectivamente. En una tabla HTML, la secuencia de estas etiquetas es la misma que la secuencia de contenedores
,
Y en el documento HTML.
- colpano necesario para combinar celdas en una fila. El valor del atributo contiene un número que especifica el número de celdas que se fusionarán.
- envergadura fusiona celdas en columnas.
Ejemplo de creación de tabla
Cree un documento HTML y copie el siguiente código en él:
tabla de ejemplo
Herramientas de creación de sitios web
| Objetivo | Herramienta |
| Calificación | HTML | HTML |
| Decoración | CSS |
| Desarrollo | PHP | Pitón |
En el navegador, el documento se verá así: Averigüemos qué líneas de código son responsables de qué.
- abrió la mesa, dándole el grosor de los marcos.
-
Herramientas de creación de sitios web
- lo titularon.
- abrió la línea.
|
Objetivo |
- Creé una celda con un diseño de encabezado.|
Herramienta |
- creó una segunda celda de encabezado en la fila. El parámetro colspan indicó que esta celda debe abarcar dos horizontalmente.
- cerró la línea. Las líneas restantes se crearon de la misma forma. |
Calificación |
HTML |
HTML |
- se agregó una segunda fila de la tabla con celdas regulares, en lugar de encabezados. Las filas y celdas posteriores se insertaron de manera similar.
- cerró la mesa.
Popular en la categoría:
Plan de acción para la creación de una terminal de Sberbank - zolnirt -...
leer
Software para trabajar con KKM Stroke-M
leer
Instalación de Microsoft Office en una computadora con Windows
leer
¿Qué es DVDRip, CAMRip, TS, TC, DVDSrc, etc.?
leer
Arriba
| |
| | |
| |
|
