Las tablas son sin duda el objeto más importante en la producción de páginas web, porque normalmente las páginas web dependen de tablas para el diseño y la organización de varios elementos. Esto determina directamente si la página web es hermosa y si la organización del contenido es clara. Sin embargo, muchos amigos a menudo descuidan el estudio de las tablas y se concentran en otras capas, imágenes, efectos especiales, etc. De hecho, el uso razonable de las tablas puede embellecer fácilmente su página. También escuchamos a menudo a amigos quejarse de que la página creada por tablas es monótona. , tosco, falta de variedad y, a menudo, escucho a la gente preguntar cómo hacer un borde de tabla de 1 píxel. De hecho, en Dreamweaver podemos refinar su tabla de manera muy conveniente, haciendo así que su página web sea más bella y refinada. Presentaremos cómo perfeccionar su tabla en Dreamweaver en los siguientes tres aspectos.
1. Utilice el panel de propiedades.
Figura 1 Primero debemos comprender los parámetros en los dos paneles de propiedades de la tabla: CellPad y CellSpace. Como se muestra en la Figura 1, CellPad se refiere a la distancia entre dos celdas en la tabla y CellSpace se refiere a la distancia entre cada celda y el contenido en el medio. Al cambiar estos dos parámetros y hacer coincidir el color de fondo, puede crear fácilmente un borde de tabla de 1 píxel.
1. Utilice el panel Objeto para insertar una tabla y definir el ancho, alto, filas y columnas de la tabla. Tenga en cuenta que los valores predeterminados CellPad, CellSpace y Border de la tabla insertada en Dreamweaver son todos 0 en este momento. Como se muestra en la Figura 2;
Figura 2
2. Defina el borde de la tabla en el panel de propiedades como 0, CellPad como 5 (esto mantendrá 5 píxeles entre el contenido de la celda y el borde de la celda como 1 (esto mantendrá 5 píxeles entre las celdas); ) 1 elemento de separación). Como se muestra en la Figura 3;
Figura 3
3. Establezca el color de fondo de la tabla en #999999, como se muestra en la Figura 4;
4. Establezca el color de fondo de la celda en #FFFFFF, como se muestra en la Figura 5;
Figura 5
5. Obtenga una vista previa del efecto en el navegador. Podemos ver que la tabla tiene un borde de píxeles, como se muestra en la Figura 6;
Figura 62
: Uso del anidamiento de mesas.
Siguiendo con el principio fundamental anterior, podemos lograr más efectos utilizando el anidamiento de tablas.
1. Primero, dibujamos una tabla y configuramos los valores y colores de CellPad y CellSpace de esta tabla haciendo referencia al ejemplo anterior. El efecto específico se muestra en la Figura 7;
Figura 7 2. Luego dibuje otra tabla de una sola fila y una sola columna, establezca CellPad=2, CellSpace=1. Los parámetros específicos se muestran en la Figura 8;
Figura 8
3. Mueva la tabla creada en el primer paso a la tabla del segundo paso. La tabla ahora se parece a la Figura 9;
En la Figura 9, vemos que esta tabla tiene un marco exterior de doble línea y un marco interior de una sola línea.
4. Modifique la tabla en el segundo paso a una sola fila y dos columnas, y coloque una tabla en el primer paso en cada celda. La tabla final se verá como la Figura 10;
Redefinir
Figura 10
, definir un estilo .tdstyle por separado, los parámetros específicos se muestran en la Figura 13;
Tenga en cuenta aquí que definimos el ancho del borde superior e inferior en 1 píxel, y el ancho del borde izquierdo y derecho en 0.
4. El efecto de la tabla final se muestra en la Figura 14;
(Imagen 15)
En este momento, la mesa presenta un efecto tridimensional.
6. La tabla de arriba no parece perfecta. No hay bordes a la derecha ni a la parte inferior de toda la tabla. Podemos definir otro style.table1, definir los cuatro lados de este estilo como 1 píxel y adjuntarlo
