Tablas DW

Topic created · 2 Mensajes · 674 Visitas
  • toi haciendo una tabla con DreamWeaver pero quiero quitar el borde que separa las celdas sin tener que juntarlas
    ke kede divididas en partes pero toda junta , por que ami me sale diviida como por 1 px y kero toda junta xd

    de antemano grasias xD

  • al crear la tabla en dreamweaver te sale un asistente donde le puedes decir número de celdas, columnas, espacio entre ellas, borde, blablabla.
    pero como al fin y al cabo todo eso es código, te explico el código que así le sirve a cualquiera independientemente de si usa dreamweaver o un editor cualquiera.
    Al crear la tabla, en la primera línea es donde tenemos todas las cosas interesantes:

    Ahí concretamente no hay NADA interesante _xD_ así que vamos a añadir cosas. Por ejemplo, le diremos que la tabla no tenga borde (por si acaso):

    Qué más qué más, también le podemos decir que las celdas de la tabla tengan cierto margen, que lo que se escriba dentro de cada celda no quede pegado a los bordes:

    Bien, qué más, que las celdas no queden una pegada con la otra verdad? fácil también:

    Ya lo tienes, 5 pixels de espacio entre celda y celda. Y luego 4 pixels más de espacio entre la celda y su contenido.

    Lo malo es que las tablas, aun con espacios y toda la pesca, si les pones un borde quedan bastante feas mira (con 1px de border):

    Verdaderamente infame. Hay que mejorarlo cambiando el estilo de borde, pero mi consejo es que le apliques un poco de estilo de la siguiente forma, un truquillo:
    Por un lado, la tabla:

    Y el correspondiente estilo:

    .tablas {
    	background-color:#333;
    }
    .tablas td {
    	background-color:#999;
    }
    

    Y así es como queda:

    Más limpio, y si agrandas el cellspacing el borde sigue estando limpio, y no queda todo lleno de bordecitos. Queda más homogéneo. Por ejemplo, con un cellspacing de 4 como en el ejemplo cutre:

    ¿qué he hecho? Ponerle un fondo a la tabla, a toda. Un gris oscuro concretamente. Y a continuación le he puesto un fondo (el mismo color que el fondo de la página) a todas las celdas (con el .tablas td). Por eso parece que las celdas tienen borde, en realidad no es un borde como tal, es que se ve lo de detrás, es decir, el fondo oscuro de la tabla.

    ¿quedaría igual si usásemos bordes? Sep, usando un borde para las celdas (ya sabes, .tables td), podríamos conseguir el mismo acabado:

    border: 4px solid #333;
    

    Sin embargo, si lo haces como te digo (sin usar el "border"), podrás conseguir efectos más sofisticados después. Por ejemplo, si combinas ambas fórmulas:

    He usado el color de fondo de la tabla, sumado a un border de las celdas, sumado a un border de toda la tabla. Y lógicamente se puede hacer más complicado, por ejemplo si le añades la propiedad:

    .tablas td:hover {
    	border-color:#FFF;
    }
    

    Al pasar el puntero por cada celda, el borde se iluminará sin perder el otro borde de fondo. Te dejo todo el código para que lo pruebes tú mismo:

        a
        b
        c
      
    
    
      
        d
        e
        f