En las páginas web, normalmente utilizamos tablas para mostrar algunos datos, como tablas de rendimiento, estados financieros, etc. Sin embargo, de forma predeterminada, el estilo de las tablas no es bonito y ni siquiera coincide con el estilo de la página. CSS proporciona propiedades que te permiten modificar el estilo de una tabla y mejorar enormemente su apariencia.
1. Borde de la tabla HTML
En la parte del tutorial de HTML, utilizamos el atributo de borde para configurar la tabla. El código es el siguiente:
<tableborder=1><thead><th>Nombre</th><th>Sexo</th></thead><tbody><tr><td>Zhang San</td><td>Hombre</td </tr><tr><td>李思</td><td>Mujer</td></tr></tbody></table>
Resultados de ejecución:
De hecho, este método no se recomienda. Porque el diseño web sigue el principio de que HTML representa contenido, mientras que CSS describe estilo.
Para las tablas, el contenido de la tabla es el texto en las filas y columnas, y el borde es un embellecimiento de la apariencia de la tabla y pertenece a la parte de estilo, por lo que es más adecuado describirlo con CSS.
2. Borde de la tabla de configuración CSS
Puede utilizar el borde CSS para establecer el borde de la tabla. El código es el siguiente:
<!DOCTYPEhtml><html><head><style>table{float:left;}.table_one{border-collapse:separate;}.table_two{margin-left:20px;border-collapse:collapse;}</style> </head><body><tableclass=table_oneborder=1><tr><th>Número</th><th>Nombre</th><th>Edad</th></tr><tr><td >1</td><td>Zhang San</td><td>15</td></tr><tr><td>2</td><td>李思</td><td> 11</td></tr></table><tableclass=table_twoborder=1px><tr><th>Número</th><th>Nombre</th><th>Edad</th></tr ><tr><td>1</td><td>Zhang San</td><td>15</td></tr><tr><td>2</td><td>李思< /td><td>11</td></tr></table></body></html>Los resultados de ejecución son los siguientes:
(1) diseño de tabla: establece el algoritmo de diseño de la tabla. Hay dos algoritmos de diseño, a saber, el algoritmo de diseño de tabla fija y el algoritmo de diseño de tabla automático;
(2) colapso de borde: establezca si los bordes de las celdas de la tabla se fusionarán o separarán según los estilos HTML estándar;
(3) espaciado de bordes: establece el espaciado horizontal y vertical entre dos bordes adyacentes cuando los bordes de la tabla están separados;
(4) lado del título: establece la posición del título de la tabla en relación con la tabla;
(5) Celdas vacías: establezca si se mostrará el borde de la celda cuando no hay contenido en la celda de la tabla.