Cómo aplicar estilo a los bordes de las tablas en HTML usando CSS
¿Establecer bordes solo para etiquetas de tabla? - ARRIBA
Solo establecer el estilo de borde para la etiqueta de la tabla generará un borde en la capa más externa de la tabla, pero no se generará ningún estilo de borde dentro de la tabla.
Los detalles del caso son los siguientes:
1. Código CSS correspondiente
lt; stylegt; #F00 }?/*?css comentario: ¿Establecer estilo de borde rojo solo para etiquetas de tabla? */?stylegt;
2, fragmento de código html correspondiente
lt; divclass="table-a"gt;lt; tablewidth="400 "border="0 "cellspacing = "0 "cellpadding="0"gt;lt;trgt;lt;tdwidth="105"gt; Nombre del sitio tdgt;lt;tdwidth="181"gt; URL tdgt;lt;tdwidth="112"gt; ;trgt;lt;trgt;lt;tdgt; DIVCSS5tdgt;lt;tdgt;www.divcss5.comtdgt;lt;tdgt;CSS Aprender tdgt;trgt;lt;trgt;lt;tdgt;CSS5tdgt;lt;tdgt;www. .com.cntd > Se implementará el estilo del borde, pero la parte media del td dará como resultado un borde doble.
El tutorial del caso detallado es el siguiente:
1. Código CSS correspondiente
lt stylegt; ?solid ?#F00}?/*?css comment: ¿Establecer el estilo de borde rojo solo para la etiqueta table?td? */?stylegt;
2, correspondiente al fragmento de código fuente HTML
lt; divclass="table-b"gt;lt; espacio de celdas ="0 "cellpadding="0"gt; trgt; lt; tdwidth="105"gt; tdwidth="112"gt; Descripción tdgt;trgt;lt;trgt;lt;tdgt; DIVCSS5tdgt;lt;tdgt;www.divcss5.comtdgt;lt;tdgt;CSS Learningtdgt;trgt;lt;trgt;lt;tdgt;CSS5tdgt;lt;tdgt;www. css5.com.cntd gt;lt;tdgt;CSS cut tdgt;trgt;tablegt;
3. ¿Cómo configurar los bordes de las tablas y td? - ARRIBA
Como se mencionó en el segundo punto anterior, solo el td del objeto de tabla tiene un estilo de borde único y no hay un borde doble entre las etiquetas td y td en la parte central.
Solución: establezca bordes dobles solo para td y establezca un estilo de borde doble para la tabla al mismo tiempo.
Interpretación: td establece los bordes izquierdo y superior, de modo que solo haya un estilo de borde donde td y td sean adyacentes, por lo que no habrá bordes en los lados derecho e inferior de la tabla. configuramos los bordes derecho e inferior de la tabla, resolvimos el problema de mostrar los lados derecho e inferior, mientras que td dejó los bordes de visualización.
1. Código CSS correspondiente:
lt; stylegt; .table-c?table{border-right: 1px?solid?#F00; #F00}? .table-c?table?td{border-left: 1px?solid?#F00; border-top: 1px?solid?#F00}?/*?Solo establece el borde izquierdo y la parte superior de la tabla?td Borde;?Establezca el borde derecho y el borde inferior de la tabla;?Para facilitar las capturas de pantalla, cambiamos la "Composición tipográfica de ajuste de línea de descripción de comentarios" de CSS a "Configuración tipográfica de ajuste de línea de descripción de comentarios". */?stylegt;
2, fragmento de código fuente HTML correspondiente:
lt; divclass="table-c"gt; cellpacing="0 "cellpadding="0"gt;?lt;trgt;lt;tdwidth="105"gt; Nombre del sitiotdgt;lt;tdwidth="181"gt; Sitio web tdgt;lt;tdwidth="112"gt; Descripciónlt;tdgt;lt;trgt;lt;trgt;lt;tdgt; DIVCSS5tdgt;lt;tdgt;www.divcss5.comtdgt;lt;tdgt;CSS Learningtdgt;trgt;lt;trgt;lt;tdgt;CSS5tdgt; ;www.css5.com.cntd gt;lt;tdgt;CSS cut tdgt;trgt;tablegt;
¿Cuatro? ¿Establecer el fondo de la tabla y td para lograr un borde de tabla perfecto? - ARRIBA
1. Configuración básica
1), primero establezca el fondo CSS de la tabla en rojo
2), establezca el espacio entre celdas de la tabla en 1
Utilice el software DW para ayudar a configurar el espaciado de celdas de la tabla en 1. Específicamente, se describen brevemente los pasos de operación visual del software DW. Primero, seleccione la tabla (modo de vista) y las propiedades de la tabla correspondiente. La tabla en el panel "Propiedades" aparecerá en la parte inferior de la ventana de edición del software DW correspondiente. En la configuración, completamos el "espaciado" como "1". En este punto, veremos que el valor de espacio entre celdas de la etiqueta de la tabla en la tabla es "1" (espacio entre celdas = "1").
Utilice el software DW para establecer el espacio entre las celdas de la tabla
o
establezca el espacio entre celdas="1" directamente en la pestaña
Eso es todo. :
lt; tablewidth="400 "border="0 "cellspace="1 "cellpadding="0"gt
3), establezca el fondo de la tabla en blanco
2. código css:
lt; stylegt; .table-d?table{?background: #F00}?/*?css comentario: Establecer el fondo de la tabla en rojo, Establecer fondo td a blanco? */?stylegt;
3, código fuente HTML correspondiente:
lt; divclass="table-d"gt;lt; tablewidth="400 "border="0 "cellspacing ="1 "cellpadding="0"gt; trgt; lt; tdwidth="105"gt; tdwidth="112"gt; tdgt; lt; trgt; lt; tdgt; com.cntd gt; lt; tdgt; lt; tdgt; divgt ;
¿Resumen de implementación del borde de la tabla V.css? - ARRIBA
Las cuatro implementaciones de la tabla anteriores. Con respecto al método de estilo del borde de la tabla, se recomienda utilizar el tercer y cuarto método para resolver el problema del estilo del borde de la tabla. Espero que el método de diseño de borde de tabla html resumido por DIVCSS5 le resulte útil y pueda dominarlo con habilidad. Debe utilizarlo con flexibilidad en la vida diaria.