Hogar › Tarifas › Tabla HTML con marco. Cómo aumentar el espacio entre los marcos de las celdas. color del borde

Tabla HTML con marco. Cómo aumentar el espacio entre los marcos de las celdas. color del borde

datos tabulares- información que se puede mostrar en una tabla y dividir lógicamente en columnas y filas. La etiqueta HTML se utiliza para mostrar datos tabulares en páginas web.

, que es un contenedor con el contenido de la tabla. El contenido de una tabla HTML se describe línea por línea, cada línea comienza con una etiqueta de apertura. y termina con una etiqueta de cierre .

Dentro de una etiqueta

se ubican las celdas de la tabla representadas por etiquetas

. Son las celdas que contienen todo el contenido de la tabla que se muestra en la página web.

Marco de mesa

De forma predeterminada, una tabla HTML en una página web se muestra sin borde; para agregar un borde a la tabla, como todos los demás elementos, se utiliza la propiedad de borde CSS. Pero vale la pena prestar atención al hecho de que si agrega un marco solo a un elemento

, luego se mostrará en toda la tabla. Para que las celdas de la tabla también tengan un borde, deberá establecer la propiedad de borde para los elementos , entonces cuando era necesario dejar una celda sin contenido pero mostrar el color de fondo, se agregaba un espacio no separado () dentro de la celda. El espacio no siempre es adecuado, especialmente cuando es necesario establecer la altura de la celda en 1-2 píxeles, razón por la cual los gráficos transparentes de un solo píxel se han generalizado. De hecho, dicha imagen se puede escalar a su discreción, pero no se muestra en la página web de ninguna manera.

Afortunadamente, la era de los dibujos de un solo píxel y todo tipo de espaciadores basados en ellos ha pasado. Los navegadores funcionan bastante correctamente con tablas incluso sin la presencia de contenidos de celda.

Para controlar la apariencia de las celdas vacías, use la propiedad de celdas vacías; cuando está configurada para ocultar, el borde y el fondo no se muestran en las celdas vacías. Si todas las celdas de una fila están vacías, toda la fila está oculta. La celda se considera vacía en los siguientes casos:

no hay ningún símbolo en absoluto;
la celda contiene solo una nueva línea, tabulación o espacio;
la visibilidad está configurada como oculta.

Agregar un espacio sin separación se percibe como contenido visible, es decir. la celda ya no estará vacía (ejemplo 2.10).

Ejemplo 2.10. Celdas vacías

Ejemplo 2.4. Campos en tablas

Usando celdas vacías

Tabla, th, td (borde: 1px negro sólido;) Intente »

Ahora tanto la tabla como las celdas tienen bordes, y cada celda y tabla tienen sus propios bordes. Como resultado, apareció un espacio vacío entre los marcos; el tamaño de este espacio se puede controlar mediante la propiedad de espaciado de bordes, que se establece para toda la tabla. En otras palabras, no puedes controlar el espacio entre diferentes celdas individualmente.

Incluso si elimina los espacios entre celdas usando el valor 0 de la propiedad de espaciado de bordes, los bordes de las celdas se tocarán entre sí, duplicando el tamaño. Para combinar bordes de celda, use la propiedad de colapso de borde. Puede tomar dos significados:

separado: es el valor predeterminado. Las celdas se muestran a poca distancia una de otra, cada celda tiene su propio borde.
colapsar: une marcos adyacentes en uno, todos los espacios entre celdas, así como entre las celdas y el marco de la tabla, se ignoran.

Título del documento

Nombre	Apellido
Homero	simpson
Margarina	simpson

Nombre	Apellido
Homero	simpson
Margarina	simpson

Intentar "

Tamaño de la mesa

Después de agregar bordes a las celdas de la tabla, se hizo evidente que el contenido de las celdas estaba demasiado cerca de los bordes. Para agregar espacios en blanco entre los bordes de las celdas y su contenido, puede usar la propiedad de relleno:

Th, td ( padding: 7px; ) Pruébalo »

El tamaño de una mesa depende de su contenido, pero a menudo surgen situaciones en las que la mesa es demasiado estrecha y es necesario estirarla. El ancho y el alto de la tabla se pueden cambiar usando las propiedades de ancho y alto, estableciendo las dimensiones deseadas en la tabla misma o en las celdas:

Tabla (ancho: 70%; ) º (alto: 50px; ) Probar »

Alineación de texto

De forma predeterminada, el texto de las celdas del encabezado de la tabla está alineado al centro, mientras que el texto de las celdas normales está alineado a la izquierda. Con la propiedad text-align puede controlar la alineación horizontal del texto.

La propiedad CSS de alineación vertical le permite controlar la alineación vertical del contenido del texto. De forma predeterminada, el texto se alinea verticalmente con el centro de las celdas. La alineación vertical se puede anular utilizando uno de los valores de propiedad de alineación vertical:

arriba: el texto está alineado con el borde superior de la celda
medio: alinea el texto al centro (predeterminado)
abajo: el texto está alineado con el borde inferior de la celda

Título del documento

Nombre	Apellido
Homero	simpson
Margarina	simpson

Intentar "

Alternar el color de fondo de las filas de la tabla

Al visualizar tablas grandes que contienen muchas filas con mucha información, puede resultar difícil realizar un seguimiento de qué datos pertenecen a una fila en particular. Para ayudar a los usuarios a orientarse, puede utilizar dos colores de fondo diferentes alternativamente. Para crear el efecto descrito, puede utilizar el selector de clases, agregándolo a cada segunda fila de la tabla:

Título del documento

Nombre	Apellido	Posición
Homero	simpson	padre
Margarina	simpson	madre
Bart	simpson	hijo
Lisa	simpson	hija

Intentar "

Agregar un atributo de clase a cada dos líneas es bastante tedioso. La pseudoclase:nth-child se agregó a CSS3 para proporcionar una solución alternativa a este problema. Ahora el efecto de entrelazado se puede lograr únicamente utilizando CSS, sin tener que recurrir a cambiar el formato HTML del documento. Usando la pseudoclase:nth-child, puede seleccionar todas las filas pares o impares de una tabla usando una de las palabras clave: par (par) o impar (impar):

Tr:nth-child(impar) (color de fondo: #EAF2D3; ) Pruebe »

Cambiar el fondo de la fila al pasar el mouse

Otra forma de mejorar la legibilidad de los datos tabulares es cambiar el color de fondo de una fila cuando pasa el mouse sobre ella. Esto ayudará a resaltar el contenido deseado de la tabla y aumentará la percepción visual de los datos.

Implementar tal efecto es muy simple; para hacer esto, debe agregar una pseudoclase: pase el cursor al selector de fila de la tabla y establezca el color de fondo deseado:

Tr:hover (color de fondo: #E0E0FF; ) Intente »

Centrar una mesa

Centrar una tabla HTML sólo es posible si el ancho de la tabla es menor que el ancho de su elemento principal. Para alinear la tabla con el centro, debe usar la propiedad de margen, dándole al menos dos valores: el primer valor será responsable del margen exterior de la tabla en la parte superior e inferior, y el segundo valor será responsable de alineación automática al centro:

Tabla (margen: 10px auto;) Pruebe »

Si necesita márgenes diferentes en la parte superior e inferior de la tabla, puede establecer la propiedad de margen en tres valores: el primero será responsable del margen superior, el segundo de la alineación horizontal y el tercero del margen inferior:

Tabla (margen: 10px auto 30px;)

Las tablas en sí tienen un aspecto bastante pobre y los navegadores muestran algunas características de las tablas, en particular los marcos, a su manera. Al mismo tiempo, estas deficiencias se pueden corregir fácilmente utilizando el poder de los estilos. Al mismo tiempo, las herramientas para diseñar tablas se han ampliado enormemente, lo que le permite adaptar las tablas con éxito al diseño del sitio y presentar los datos tabulares con mayor claridad.

Color de fondo de la celda

El color de fondo de todas las celdas de la tabla al mismo tiempo se establece mediante la propiedad de fondo, que se aplica al selector TABLE. En este caso, conviene recordar las reglas de uso de estilos, en particular, la herencia de las propiedades de los elementos. Aunque la propiedad de fondo no se hereda, el valor de fondo predeterminado para las celdas es transparente, es decir. transparencia, por lo que el efecto de relleno de fondo también se obtiene para las celdas. Si, simultáneamente con TABLE, configura un color para el selector TD o TH, entonces este color se establecerá como fondo de la celda (ejemplo 2.3).

Ejemplo 2.3. Color de fondo

Mesas

Título 1	Título 2
Celda 3	Celda 4

En este ejemplo, obtenemos un color de fondo azul para las celdas (etiqueta

) y rojo en el título (etiqueta

). Esto se debe a que el estilo del selector TH no está definido, por lo que el fondo del padre, en este caso el selector TABLE, se "muestra".

Y el color del selector TD se especifica explícitamente, por lo que las celdas se "rellenan" de azul.

El resultado de este ejemplo se muestra en la Fig. 2.4.

Arroz. 2.4. Cambiar el color de fondo

Márgenes dentro de las células

El margen es la distancia entre el borde del contenido de una celda y su borde. Normalmente, para este fin se utiliza el atributo cellpadding de una etiqueta.

. Define el valor del margen en píxeles en todos los lados de la celda. Es posible utilizar la propiedad de estilo de relleno agregándola al selector TD, como se muestra en el Ejemplo 2.4.

Ejemplo 2.4. Campos en tablas

Mesas

Título 1	Título 2
Celda 3	Celda 4

En este ejemplo, al agrupar selectores, los campos se configuran simultáneamente para los selectores TD y TH. El resultado del ejemplo se muestra en la Fig. 2.5.

Arroz. 2.5. Campos en celdas

Si la propiedad de estilo de relleno se aplica a las celdas de la tabla, entonces el efecto del atributo de relleno de celda de la etiqueta

ignorado.

Distancia entre celdas

Para cambiar la distancia entre celdas, use el atributo de espacio entre celdas de la etiqueta.

. El efecto de este atributo es claramente visible cuando utiliza bordes alrededor de las celdas o cuando llena las celdas con un color que se destaca del fondo de la página. La propiedad de estilo border-spacing actúa como reemplazo del espaciado de celdas; establece la distancia entre los bordes de las celdas. Un valor establece la distancia vertical y horizontal entre los bordes de las celdas. Si esta propiedad tiene dos valores, entonces el primero determina la distancia horizontal (es decir, a la izquierda y a la derecha de la celda) y el segundo determina la distancia vertical (arriba y abajo).

La propiedad de espaciado de bordes solo tiene efecto si el selector TABLE no tiene la propiedad de colapso de bordes configurada para contraer (Ejemplo 2.5).

Ejemplo 2.5. Distancia entre los bordes de las celdas

XHTML 1.0 CSS 2.1 IE 7 IE 8+ Cr Op Sa Fx

Reemplazo de espacio entre celdas

leonardo	5	8
Rafael	4	11
Miguel Ángel	24	9
Donatello	2	13

El resultado de este ejemplo se muestra en la Fig. 2.6.

Arroz. 2.6. Vista de tabla cuando se utiliza el espaciado de bordes

Internet Explorer versión 7 y posteriores no admite la propiedad de espacio entre bordes, por lo que las tablas de este navegador utilizarán el valor de espacio entre celdas predeterminado (normalmente 2 píxeles).

Al agregar una propiedad de colapso de borde con un valor de colapso a un selector TABLE, el atributo de espaciado de celdas se ignora y el valor de espaciado de borde se restablece a cero.

Bordes y marcos

De forma predeterminada, inicialmente no hay ningún borde en la tabla y su adición se produce utilizando el atributo de borde de la etiqueta.

. Los navegadores muestran dicho borde de manera diferente, por lo que es mejor no especificar este atributo en absoluto y dejar el dibujo de los bordes en manos de los estilos. Veamos dos métodos directamente relacionados con los estilos.

Usando el atributo de espacio entre celdas

Se sabe que el atributo de espacio entre celdas de la etiqueta

establece la distancia entre las celdas de la tabla. Si usa diferentes colores de fondo para la tabla y las celdas, aparecerá una cuadrícula de líneas entre las celdas, cuyo color coincide con el color de la tabla y el grosor es igual al valor del atributo de espacio entre celdas en píxeles. El ejemplo 2.3 anterior muestra este efecto, por lo que no lo repetiré.

Tenga en cuenta que esta no es una forma muy conveniente de crear límites, ya que tiene un alcance limitado. De esta manera sólo podrás obtener una cuadrícula de un solo color, y no líneas verticales u horizontales en los lugares correctos.

Usando la propiedad de borde

La propiedad de estilo de borde establece simultáneamente el color, el estilo y el grosor del borde alrededor de un elemento. Cuando necesite crear líneas separadas en diferentes lados, es mejor usar los derivados: borde izquierdo, borde derecho, borde superior y borde inferior, estas propiedades definen respectivamente el borde izquierdo, derecho, superior e inferior. .

Al aplicar la propiedad de borde a un selector TABLE, agregamos un borde alrededor de la tabla en su conjunto, y a un selector TD o TH agregamos un borde alrededor de las celdas (Ejemplo 2.6).

Ejemplo 2.6. Agregar un marco doble

Ejemplo 2.4. Campos en tablas

Mesas

Título 1	Título 2
Celda 3	Celda 4

Este ejemplo utiliza un borde doble negro alrededor de la tabla y un borde blanco sólido alrededor de cada celda. El resultado del ejemplo se muestra en la Fig. 2.7.

Arroz. 2.7. Borde alrededor de la tabla y las celdas.

Tenga en cuenta que se forman líneas dobles donde se unen las celdas. Se obtienen nuevamente por la acción del atributo de espacio entre celdas de la etiqueta.

. Aunque este atributo no aparece en ninguna parte del código de ejemplo, el navegador lo utiliza de forma predeterminada. si estableces

, entonces no obtenemos líneas dobles, sino simples, pero de doble espesor. Para cambiar esta característica, use la propiedad de estilo de colapso de borde con el valor colapso, que se agrega al selector TABLA (ejemplo 2.7).

Ejemplo 2.7. Creando un solo marco

Ejemplo 2.4. Campos en tablas

Mesas

Título 1	Título 2
Celda 3	Celda 4

Este ejemplo crea una línea verde sólida entre las celdas y una línea negra alrededor de la tabla. Todos los bordes dentro de la tabla tienen el mismo grosor. El resultado del ejemplo se muestra en la Fig. 2.8.

Arroz. 2.8. Borde alrededor de la mesa

Alinear el contenido de las celdas

De forma predeterminada, el texto de una celda de la tabla está alineado a la izquierda. La excepción a esta regla es la etiqueta.

, define un encabezado que está centrado. Para cambiar el método de alineación, utilice la propiedad de estilo de alineación de texto (ejemplo 2.8).

Ejemplo 2.8. Alinear el contenido de la celda horizontalmente

Ejemplo 2.4. Campos en tablas

Mesas

Título 1	Celda 1	Celda 2
Título 2	Celda 3	Celda 4

En este ejemplo, el contenido de la etiqueta

está alineado a la izquierda y el contenido de la etiqueta

- en el centro. El resultado del ejemplo se muestra a continuación (Figura 2.9).

Arroz. 2.9. Alinear texto en celdas

La alineación vertical en una celda siempre está centrada a menos que se indique lo contrario. Esto no siempre es conveniente, especialmente para tablas cuyo contenido de celda varía en altura. En este caso, la alineación se establece en el borde superior de la celda usando la propiedad de alineación vertical, como se muestra en el Ejemplo 2.9.

Ejemplo 2.9. Alinear el contenido de la celda verticalmente

Ejemplo 2.4. Campos en tablas

Mesas

Título 1	Título 2
Celda 1	Celda 2

Este ejemplo establece la altura del encabezado.

como 40 píxeles y el texto está alineado con el borde inferior. El resultado del ejemplo se muestra en la Fig. 2.10.

Arroz. 2.10. Alinear texto en celdas

Celdas vacías

Los navegadores muestran una celda sin nada dentro de manera diferente. "Nada" en este caso significa que no se agregó ninguna imagen ni texto dentro de la celda y el espacio no se tiene en cuenta. Naturalmente, la apariencia de las celdas sólo difiere si se coloca un borde a su alrededor. Cuando se utiliza un borde invisible, la apariencia de las celdas, independientemente de si hay algo en ellas o no, es la misma.

Los navegadores más antiguos no mostraban el color de fondo de las celdas de vista vacías

leonardo	5	8
Rafael		11
Miguel Ángel	24
Donatello		13

La vista de tabla en el navegador Safari se muestra en la Fig. 2.11a. La misma tabla en el navegador IE7 se muestra en la Fig. 2.11b.

A. En el navegador Safari, Firefox, Opera, IE8, IE9

b. En el navegador IE7

Arroz. 2.11. Vista de una tabla con celdas vacías.

Se hizo popular, los diseñadores web utilizaron principalmente el método de diseño de tablas y obtuvieron muy buenos resultados.

Etiquetas utilizadas para construir una tabla en html

mesa- una etiqueta requerida que abre y cierra la mesa
subtítulo- etiqueta opcional que indica el título de la tabla
th- una etiqueta opcional, cuyas etiquetas de apertura y cierre contienen el nombre de la columna. Normalmente aparece en negrita
tr- una etiqueta requerida que abre y cierra la línea
td- una etiqueta requerida que indica la apertura y el cierre de una celda en una fila

Código de ejemplo para una tabla simple

tabla HTML

Nombre de la tabla
Stobets 1	Stobets 2
Texto en la primera celda	Texto en la segunda celda

El navegador mostrará

Propósito de las tablas en html

¡La lección sobre las tablas es muy importante! Gracias a las tablas, puedes organizar no sólo texto, sino también imágenes, enlaces y mucho más. En la tabla puedes especificar fondo(o su color), sangría, ancho, borde Y otros parámetros lo que le dará una hermosa apariencia. Tabla: el primer paso para comprender diseño web! Anteriormente, muchos sitios estaban completamente organizados en forma de tablas, es decir, todo lo que veía el usuario (menú lateral, menú superior, contenido) era el contenido de las celdas de una tabla grande.
En ese sentido, pasemos directamente a los atributos que hacen que la mesa sea hermosa...

Propiedades y parámetros de tablas html: sangría, ancho, color de fondo, borde (marco)

Ud. etiqueta de mesa tiene los siguientes atributos:

ancho- ancho de la mesa. Puede estar en píxeles o en % del ancho de la pantalla.
colorbg- color de fondo de las celdas de la tabla
fondo- llena el fondo de la mesa con un patrón
borde- marco y bordes en la mesa. El espesor se indica en píxeles.
relleno celular- relleno de píxeles entre el contenido de la celda y su borde interno
Como antes, escribimos el valor del atributo entre comillas.

Veamos el uso de estos atributos usando un ejemplo. Para hacer esto, creemos una tabla (pero ya sin el título extremadamente poco utilizado y las etiquetas th) y establezca el parámetro en el atributo borde, ancho (ancho de tabla, fila o celda) Y bgcolor (color de celda)

tabla HTML

Como resultado, se mostrará la siguiente tabla en el navegador:

marco- un atributo que indica el marco alrededor de la mesa. Existen los siguientes valores:

Vacío - sin marco,
arriba - solo el marco superior,
abajo - solo marco inferior,
lados: solo los marcos superior e inferior,
vsides: solo marcos izquierdo y derecho,
lhs - solo marco izquierdo,
rhs - solo marco derecho,
caja: las cuatro partes del marco.

normas- un atributo que indica los límites dentro de la tabla, entre celdas. Existen los siguientes valores:

Ninguno: no hay fronteras entre celdas,
grupos: límites solo entre grupos de filas y grupos de columnas (se discutirá un poco más adelante),
filas: límites solo entre filas,
cols: límites solo entre columnas,
todo: muestra todos los bordes.

Veamos el ejemplo de código.

tabla HTML

Stobets 1	Stobets 2

Resultado

Ahora intentemos crear una mesa hermosa. Para hacer esto, comencemos a usar alineación de la mesa. Para ello, existen los siguientes parámetros ya familiares:

alinear- alineación de la mesa. Se puede colocar a la izquierda (izquierda), a la derecha (derecha), en el centro (centro)
espacio entre celdas- distancia entre celdas de la tabla. Especificado en píxeles (predeterminado 0 píxeles)
relleno celular- relleno en píxeles entre el contenido de la celda y su borde interno (por defecto 0 píxeles)
Veamos un ejemplo

tabla HTML

Stobets 1	Stobets 2
Texto en la primera celda de la primera columna.	Texto en la segunda celda de la segunda columna.

El navegador mostrará una tabla centrada similar a esta:

tr filas y celdas td en tablas HTML

Permítanme recordarles nuevamente que las tablas se forman fila por fila (tr). Las filas (tr) ya contienen celdas (td). Si especifica un parámetro para una cadena (tr), será válido para todas las celdas(td) en esta línea, si es para una celda específica, entonces solo para ella. En los ejemplos anteriores, especifiqué el color de la fila; este parámetro se distribuyó en consecuencia a todas las celdas.

Para las etiquetas tr y td existen las siguientes

alinear- alineación del texto dentro de una celda. Borde izquierdo (izquierda), borde derecho (derecha), centro (centro)
vilipendiar- alineación vertical del texto dentro de una celda. Arriba (arriba), abajo (abajo), centro (medio)
colorbg- establece el color de la línea
ancho- el ancho de la columna (todas las celdas siguientes aceptarán este parámetro) se indica en píxeles o como porcentaje, donde 100% es el ancho de toda la tabla
altura- altura de la celda (todas las celdas de la fila aceptarán este parámetro)

Veamos el código donde el contenido de las celdas (td) está alineado por diferentes bordes: en el primero a la izquierda, en el segundo a la derecha:

tabla HTML

Stobets 1	Stobets 2
Texto en la primera celda de la primera columna.	Texto en la segunda celda de la segunda columna.
Stobets 1	Stobets 2

Resultado

Usando tablas puedes crear una muy buena página. ¡No olvides que puedes insertar no solo texto en las celdas, sino también imágenes, enlaces, etc.!)

¡Gracias por su atención! Espero que el material haya sido útil!

El marco de la mesa es un elemento importante. Es universal y de uso frecuente. Este tutorial cubrirá cómo enmarcar una tabla, celda y fila usando un atributo, pero la mayor parte del tutorial se centrará en las propiedades CSS porque el borde se vuelve universal cuando se usan estilos CSS.

Crear un marco usando un atributo

Generalmente no es un atributo extensible, yo diría que no tiene sentido. El atributo de borde establece el grosor del borde y listo. A continuación se muestra un ejemplo:

Stobets 1	Stobets 2
Texto en la primera celda de la primera columna.	Texto en la segunda celda de la segunda columna.

Celda 1

Celda 2

Una forma sencilla de crear un borde alrededor de un elemento.

Diré de inmediato que no daré notas detalladas, ya que en el futuro habrá una gran lección sobre la propiedad fronteriza, y tal vez más de una. La propiedad universal border puede establecer el grosor, el estilo y el color de los bordes (marcos) a la vez. El grosor puede ser cualquiera, el color de los bordes se establece en formato hexadecimal, formato rgb y palabras clave (rojo, negro, etc.). Qué estilos hay, la imagen a continuación (imagen tomada del sitio htmlbook.ru) y el siguiente ejemplo:

td(
borde: 5px sólido #CCCCCC;
}

Marco izquierdo, derecho, inferior y superior

Cuando se utiliza un borde, se crea un marco en todos los lados. Pero podemos controlar de qué lado dibujar el marco. Borde izquierdo borde izquierdo: 2px negro sólido; borde-derecho borde-derecho: 1px punteado #FF0000; borde inferior: 10px sólido #000000; borde superior: 1px verde sólido. Como ves, no tienen por qué tener los mismos valores, y también se pueden combinar, es decir, escribir varios, por ejemplo, borde izquierdo y derecho (marco), etc. Todo. No voy a ir más lejos, este es un tema para otra lección. Ejemplo:

mesa (
borde izquierdo: 5px sólido #CCCCCC;
borde derecho: 5px sólido #CCCCCC;
}
td(
borde superior: 5px sólido #CCCCCC;
borde inferior: 5px sólido #CCCCCC;
}

Esquinas redondeadas

Ahora toquemos un poco el tema de la “belleza” y la usabilidad. Para redondear los bordes de los bordes, existe una propiedad de radio de borde. Esta también es una lección aparte, no entraremos en demasiados detalles. Se necesita un número diferente de argumentos. Escribiremos (solo en esta lección) un argumento, y si escribimos un valor, habrá el mismo redondeo en todos los lados (esquinas). El valor puede estar en diferentes "medidas", como píxeles y porcentajes. A continuación se muestra un ejemplo:

td(
borde: 5px sólido #CCCCCC;
radio del borde: 10px;
}

Márgenes o relleno

Para evitar que el texto quede alineado con el marco, debe aplicarle sangría. La propiedad padding nos ayudará con esto. También es multifuncional, pero lo consideraremos parcialmente, todo por el mismo motivo. Usaremos solo un valor. El valor puede estar en diferentes "medidas", como píxeles y porcentajes. A continuación se muestra un ejemplo:

td(
borde: 5px sólido #CCCCCC;
radio del borde: 10px;
relleno: 10px;

Vlad Merzhevich

Usando CSS, puedes agregar un borde a un elemento de varias maneras. Básicamente, por supuesto, se utiliza la propiedad border, como la más universal, así como contorno y, sorprendentemente, box-shadow , cuya tarea principal es crear una sombra. A continuación, consideraremos estos métodos y sus diferencias entre ellos.

propiedad de esquema

La propiedad más simple para crear marcos. Tiene los mismos parámetros que border , pero difiere significativamente en algunos detalles:

el contorno se muestra alrededor del elemento (borde interior);
el contorno no afecta las dimensiones del elemento (el borde se agrega al ancho y alto del elemento);
el contorno sólo se puede establecer alrededor de todo el elemento, pero no en lados individuales (el borde se puede usar para cualquier lado o para todos a la vez);
el contorno no se ve afectado por el radio de empalme especificado por la propiedad border-radius (el borde se ve afectado).

Surge la pregunta: ¿en qué casos es necesario un esquema cuando su papel, a pesar de las diferencias enumeradas, lo asume completamente la frontera? No hay muchas situaciones, pero se dan:

crear complejos marcos multicolores;
agregar un marco a un elemento cuando pasa el mouse sobre él;
ocultar el borde que el navegador agrega automáticamente a algunos elementos cuando recibe el foco;
para el contorno, puede establecer la distancia desde el borde del elemento hasta el marco usando la propiedad de desplazamiento del contorno, para crear un archivo .

Marcos multicolores

Debe comprender que el contorno no reemplaza de ninguna manera al borde y puede coexistir fácilmente con él, como se muestra en el ejemplo 1.

Ejemplo 1: creación de un marco

borde y contorno

En este ejemplo, se agrega un marco negro alrededor del elemento, que está separado del fondo por un borde blanco (Fig. 1).

Arroz. 1. Marco alrededor del elemento.

Marco cuando se usa: flotar

Al agregar un marco a través del borde, el ancho del elemento aumenta, lo cual es bastante notable cuando se combina el borde y la pseudoclase :hover. Hay dos maneras de “ganar” esto. Lo más sencillo es sustituir borde por contorno, que como sabemos no afecta al tamaño del elemento (ejemplo 2).

Ejemplo 2: fotograma al pasar el mouse

describir

El contorno no siempre es adecuado, aunque solo sea porque redondear las esquinas no lo afecta. El segundo método es adecuado aquí: agregue un marco invisible o un marco que coincida con el color de fondo y luego cambie sus parámetros al pasar el cursor (ejemplo 3). Entonces no se producirá ningún desplazamiento del elemento, ya que inicialmente el marco ya existe. Pero siempre recordamos que el ancho del elemento es la suma de los valores de ancho, borde a la izquierda y borde a la derecha. La situación es similar con la altura.

Ejemplo 3: fotograma al pasar el mouse

borde

Borde alrededor de los campos del formulario

En algunos navegadores (Chrome, Safari, últimas versiones de Opera), se muestra un pequeño marco de color alrededor de los campos del formulario cuando reciben el foco (Fig. 2). Para eliminarlo, simplemente agregue el valor none a la propiedad de contorno en los estilos, como se muestra en el ejemplo 4.

Arroz. 2. Encuadre alrededor de los márgenes.

Ejemplo 4. Quitar el marco

aporte

Marcos a través de box-shadow

Aunque la propiedad box-shadow está destinada a agregar una sombra alrededor de un elemento, también se puede usar para crear bordes que no se pueden crear usando border o contorno. Todo esto se debe al hecho de que el número de sombras puede ser ilimitado, cuyos parámetros se enumeran separados por comas.

Para obtener un marco, los primeros tres parámetros deben establecerse en cero; son responsables de la posición de la sombra y su desenfoque; El cuarto parámetro en este caso es responsable del grosor del borde y el quinto establece el color del borde. Para el segundo marco, el cuarto parámetro es igual a la suma de los espesores de los dos marcos.

El ejemplo 4 muestra cómo agregar dos marcos y un borde a la derecha usando una única propiedad de sombra de cuadro.

Ejemplo 4: uso de sombra de cuadro

sombra de caja

El resultado de este ejemplo se muestra en la Fig. 3.