Ahora veamos cómo usar la gramática CSS para embellecer las tablas. NOTA: A menos que se especifique lo contrario, los valores de Papacing, CellSpadding y borde de las tablas insertadas en los ejemplos mencionados en este artículo son 0. Ejemplo 1: 1PX Tabla
Muchas personas están interesadas en hacer formularios 1PX, por lo que inventaron varios métodos, que pueden ser mucho más flexibles cuando se usan con CSS. Si desea hacer una tabla 1x1 1px, simplemente defina el valor del borde. Primero insertamos una tabla 1x1 con DreamWeaver con un ancho de 50, y luego definimos el borde: 1 té sólido en la mesa o TD. El efecto de la tabla realizado es el siguiente:
Sin embargo, es un poco más problemático crear una mesa no 1x1 (como 2x2), porque si define directamente el borde de estilo TD: 1 té sólido, el efecto de visualización es el siguiente:
Encontrará que la caja externa de la tabla es 1px, mientras que el interior se convierte en 2px, lo que se debe a la superposición. Para resolver este problema podemos hacer esto:
Primero defina el estilo para TD: Border:#CC0000 Sólido; ancho de borde: 0 1 1 0 , por lo que la tabla se expresa como
Luego defina el estilo para la tabla :: Border:#CC0000 Solid; Border-Width: 1 0 0 1 , para que pueda convertirlo en una tabla completa de 1px.
Ejemplo 2: 1px tabla con bordes gruesos
La línea de cuadrícula interna de esta tabla es 1px y el borde exterior es de 3px. No es difícil hacerlo con la base del ejemplo 1. Simplemente modifique el valor de ancho de borde.
El código para el estilo utilizado por la tabla es: borde: azul sólido; ancho de borde: 3 2 2 3 , y el código para el estilo utilizado por el TD es: borde: sólido azul; ancho de borde: 0 1 1 0 Ejemplo 3: tabla de caja punteada
La práctica es similar al Ejemplo 1, y el estilo de borde se cambia de sólido a discontinuo. El código para el estilo utilizado en la tabla es: borde: negro discontinuo; ancho de borde: 1 0 0 1 , y el código para el estilo utilizado en el TD es: borde: negro discontinuo; ancho de borde: 0 1 1 0 Ejemplo 4: Tabla de borde punteada y de línea
Tenga en cuenta que el píxel mínimo de punteado es 2. El código para el estilo utilizado en la tabla es: borde: punteado verde; ancho de borde: 2 0 0 2. El código para el estilo utilizado en el TD es: borde: punteado verde; ancho de borde: 0 2 2 0 Ejemplo 5: doble línea borde de borde de línea de doble línea
Tenga en cuenta que el píxel mínimo de una línea doble es 3. El código para el estilo utilizado en la tabla es: Border: Teal 4 Dou . El código para el estilo utilizado en el TD es: Border: Teal 1 Ejemplo sólido 6: Tabla de marco externo
El código para el estilo utilizado por la tabla es: border: 3 de principio
El código para el estilo utilizado por la tabla es: Border: 3 recuadro , y el código para el estilo utilizado por el TD es: Border: 1 Ejemplo sólido 8: Tabla de marco exterior de cresta
El código para el estilo utilizado por la tabla es: Border:#EE0000 3 Ridge El código para el estilo utilizado por el TD es: Border: 1 Sólido
Página anterior 1 2 3 Página siguiente Lea el texto completo