Tecnología

Inicio

Tabla HTML Marco y tamaños de las columnas

Tabla HTML Marco y tamaños de las columnas


Dentro de una tabla HTML, los desarrolladores pueden enumerar las filas, columnas y contenido que el navegador Web mostrará usando una disposición tabular. Cuando se determina la presentación de tablas y columnas de las tablas, los desarrolladores pueden optar por especificar las propiedades de estilo en el formato HTML o en el código de Cascading Style Sheet separada. tablas HTML, y sus columnas, pueden incorporar una gran cantidad de posibles configuraciones y opciones de estilo.

Estilo de tabla

El uso de declaraciones de CSS, puede especificar las propiedades de las tablas HTML, columnas y celdas. La siguiente línea de código HTML ejemplo crea un elemento de tabla simple:
<Table>
<Tr> <td> Una célula </ td> </ tr>
<Tr> <td> Otro teléfono </ td> </ tr>
</ Table>

El elemento "tr" representa una fila de la tabla, mientras que el elemento "td" es una sola célula dentro de una fila. El contenido de cada celda se encuentra entre la apertura y cierre de etiquetas "TD". Esta página puede incluir declaraciones de CSS, ya sea en la sección de cabecera o en un archivo CSS independiente vinculado a partir de ahí. El siguiente ejemplo de código CSS muestra cómo establecer algunos elementos particulares de estilo de tabla:
mesa {border: 1px solid # 000000; anchura: 60%; }
td {padding: 3px; }

Este código establece las propiedades de tabla incluyendo la anchura, con relación al elemento padre de la mesa, más ancho del borde, estilo y color. La declaración "td" para el relleno afecta a todas las celdas de la tabla en la página, añadir el espacio entre el contenido de una celda y su borde.

Los elementos HTML

Las páginas web pueden utilizar el elemento HTML "col" para definir las propiedades de las columnas de la tabla. El marcado siguiente cuadro modificado muestra el uso del elemento:
<Table>
<Col align = "left">
<Col align = "right">
<Tr> <td> Una célula </ td> <td> Otro teléfono </ td> </ tr>
</ Table>

Las etiquetas "col" aquí dictan la alineación de las dos columnas dentro de la tabla. Otros atributos del elemento permiten a los desarrolladores para definir las propiedades de alineación vertical y para aplicar un estilo de múltiples columnas. El elemento "colgroup" especifica el formato de un grupo de columnas dentro de una tabla de la siguiente manera:
<Table>
<Colgroup lapso = "2" align = "right"> </ colgroup>
<Tr> <td> Una célula </ td> <td> Otro teléfono </ td> </ tr>
</ Table>

Este elemento dicta alineación para ambas columnas de la tabla.

Estilo de la columna

Las páginas web pueden dictar el estilo de "col" y "elementos" COLGROUP utilizando código CSS, ya sea en línea, como parte del lenguaje de marcado HTML, o por separado, dentro de los archivos CSS. La siguiente línea de código HTML de ejemplo demuestra la adición de un atributo de clase a un elemento:
<Clase col = "maincol">

Dentro del código CSS para esta página, el código de ejemplo podría especificar reglas de estilo para las columnas con este valor de atributo de clase en particular:
col.maincol {
color: # 330000;
background-color: #CCCCCC;
}

Para especificar los elementos "col" dentro de las tablas con un atributo particular de clase, CSS puede utilizar el siguiente código:
table.maintable col {padding: 5px; }

atributos

elementos HTML para las tablas, celdas y columnas pueden incluir todos los atributos que determinan ciertas propiedades de peinado. Por ejemplo, el elemento de la tabla se pueden caracterizar por un elemento de anchura como sigue:
<Table width = "500px">

Algunos de los atributos de estilo para las tablas y las células se han convertido en desuso en las últimas versiones de HTML, con los desarrolladores les anima a utilizar CSS lugar, aunque la mayoría de los navegadores todavía apoyan los atributos. Por ejemplo, el elemento de celda de la tabla puede incluir anchura y la altura atributos como sigue:
<Td altura = "50px" width = "100px">

El elemento de mesa también tiene atributos opcionales para el color de fondo y la alineación, ambos de los cuales están en desuso. Cuando una propiedad se convierte en obsoleto, esto significa que no se admita en futuras versiones de HTML, por lo general no se recomienda para su uso en sitios actuales.


Artículos relacionados