Cómo agregar líneas de borde a tablas html

Cómo agregar líneas de borde a tablas HTML:

Cómo agregar líneas de borde a tablas HTML

Solo la etiqueta de la tabla tiene un estilo de borde establecido. Se generará un borde en el borde más externo de la tabla, pero no se generará ningún estilo de borde dentro de la tabla.

La situación específica es la siguiente:

1. El codelt css correspondiente; stylegt;?

.table-a?table{border: 1px?solid ?# F00}?

/*?css comentario: ¿Establecer estilo de borde rojo solo para etiquetas de tabla? */?

lt;/stylegt;

2. Fragmento de código html correspondientelt;div?class="table-a"gt;?

lt; table?width="400"?border="0"?cellspacing="0"?cellpadding="0"gt;?

lt;trgt;?

lt ;td ?width="105"gt;Nombre de la estaciónlt;/tdgt;?

lt;td?width="181"gt;URLlt;/tdgt;?

lt; width="112"gt;Descripciónlt;/tdgt;?

lt;/trgt;?

lt;trgt;?

lt;tdgt ;DIVCSSlt ;/tdgt;?

lt;tdgt;Dominiolt;/tdgt;?

lt;tdgt;Aprendizaje CSSlt;/tdgt;?

lt;/trgt;?

lt;trgt;?

lt;tdgt;CSS5lt;/tdgt;?

lt ;tdgt;Dominiolt;/tdgt;?

lt;tdgt;CSS Cutlt;/tdgt;?

lt;/trgt;?

lt;/tablegt;?

lt;/divgt;

Captura de pantalla del caso<. /p>

2. Establecer el borde en el td

Establecer el estilo del borde en la tabla td El td dentro del objeto de la tabla implementará el estilo del borde, pero la parte media del td lo hará. provocar una doble frontera.

El tutorial detallado del caso es el siguiente:

1. El código CSS correspondiente; stylegt;?

.table-b?table?td{border: 1px?solid?#F00}?

/*?css Nota: ¿El estilo del borde rojo solo se aplica a las etiquetas table?td? */?

lt;/stylegt;

2. Fragmentos de código fuente html correspondientes

3. Capturas de pantalla del caso

3. ¿Establecer bordes de tabla para table y td?

Como se muestra en el segundo punto anterior, solo el objeto de tabla td tiene un estilo de borde único, y aparece un fenómeno de doble borde entre las etiquetas td y td en la parte central .

Solución: establecer bordes dobles solo para td y establecer un estilo de borde doble para la tabla al mismo tiempo.

Interpretación: Establezca el borde izquierdo y el borde superior de td para que solo haya un estilo de borde cuando td sea adyacente a td. De esta manera, no habrá borde en el lado derecho ni en la parte inferior. mesa En este momento, configuramos el lado derecho de la mesa. Los bordes laterales e inferiores resuelven el problema de la visualización en el lado derecho y el borde restante en la parte inferior del TD.

1. El código CSS correspondiente: lt; stylegt;?

.table-c?table{border-right: 1px?solid?#F00; ¿sólido?#F00}?

.table-c?table?td{border-left: 1px?solid?#F00; borde superior: 1px?solid?#F00}?

/*?

css?

¿Establecer los bordes izquierdo y superior solo para table.td?

Establecer los bordes derecho e inferior de la tabla;?

Para las capturas de pantalla, ¿vamos a utilizar css?

*/?

lt;/stylegt;

2, el html correspondiente Fragmento de código fuente:lt;div?class="table-c"gt;?

lt;table?width="400"?border="0"?cellspacing="0"?cellpadding=" 0" gt;?

lt; trgt;?

lt; td?width="105"gt; Nombre de la estaciónlt;/tdgt;?

lt ;td?width="181"gt;URLlt;/tdgt;?

lt;td?width="112"gt;Descripciónlt;/tdgt;?

lt;/ trgt;?

lt;trgt;?

lt;tdgt;DIVCSSlt;/tdgt;?

lt;tdgt;Dominiolt;/tdgt;?

lt;tdgt;Aprendizaje de CSSlt;/tdgt;?

lt;/trgt;?

lt;trgt;?

lt;tdgt;CSS5lt;/tdgt;?

lt ;tdgt;Dominiolt;/tdgt;?

lt;tdgt;CSS Cutlt;/tdgt;?

lt;/trgt;?

lt;/tablegt;

3. Captura de pantalla del caso de implementación del borde de la tabla

4. ¿Y td establece el fondo para lograr un borde de mesa perfecto?

1), primero configure el fondo de table?css en rojo

2), establezca el espacio entre unidades de la tabla en 1

Utilice el software DW para ayudar en la configuración el espaciado de la unidad de la tabla es 1. Permítanme explicar brevemente los pasos específicos de visualización del software DW. Primero, seleccione la tabla (modo de visualización). La configuración de los atributos de la tabla correspondiente aparecerá en el panel "Propiedades" debajo de la edición del software DW correspondiente. ventana Completaremos el "espaciado" como "1". En este punto veremos que el valor de espacio entre celdas de la etiqueta de la tabla es "1" (espacio entre celdas = "1").

Utilice el software DW para establecer el espacio entre celdas de la tabla

o

establezca el espacio entre celdas="1" directamente en la etiqueta

: ?width ="400"?border="0"?cellspacing="1" ?cellpadding="0"gt;

3), establezca el fondo td de la tabla en blanco

2, código CSS: lt; stylegt;?

.table-d?table{?fondo: #F00}?

.table-d?table?td{?fondo: # FFF }?

/*?

css Nota: ¿Establecer el fondo de la tabla en rojo y el fondo td en blanco? */?

lt;/stylegt;

3, código fuente html correspondiente: lt;div?class="table-d"gt;?

lt;table?width="400"?border="0"?cellspacing="1"?cellpadding="0"gt;?

lt;trgt;?

lt ；td?width="105"gt;Nombre de la estaciónlt;/tdgt;?

lt;td?width="181"gt;URLlt;/tdgt;?

lt ; td?width="112"gt;Descripciónlt;/tdgt;?

lt;/trgt;?

lt;trgt;?

lt; ;DIVCSSlt;/tdgt;?

lt;tdgt;Domainlt;/tdgt;?

lt;tdgt;Aprendizaje CSSlt;/tdgt;?

lt;/trgt;?

lt;trgt;?

lt;tdgt;CSS5lt;/tdgt;?

lt ;tdgt;Dominiolt;/tdgt;?

lt;tdgt;CSS Cutlt;/tdgt;?

lt;/trgt;?

lt;/tablegt;?

lt;/divgt;

4. Captura de pantalla

5. ¿Resumen de la implementación del borde de la tabla CSS?

Para que los cuatro métodos anteriores logren el estilo del borde de la tabla, se recomienda utilizar el tercer y cuarto método para resolver el estilo del borde de la tabla. . No todo el mundo puede dominar el método de diseño del borde de la tabla y, por lo general, es necesario utilizarlo con flexibilidad.