tablas css, html, ....

aldo_rengo · #1 (**permalink**) 29/03/2013, 14:07

hola miren tengo este codigo como veran, en la parte del titulo de cada tabla no coloque un caption . ya que al querer darle una altura ,con caption creo que no se puede, elegi agarrar una celda , hacer un colspan por 2 y listo, luego aplicarle un fondo negro y listo, texto blanco hasta ahi todo bien

pero no se que tiene la tabla, que en la primer celda, donde hice, colspan 2, se me borran el borde de abajo de la primer celda,

este es el codigo

Código PHP:

  <table width="400px"  style="
border: 1px solid #000;
border-collapse: collapse;
caption-side: top;" border="1">
  <tr>
    <td height="35px" colspan="2" style="text-align:center;color:white;background-color:black;font-weight:bold">SUPERVISION MODIFICADA</td>
  
  </tr>
  <tr>
    <td style="height:50px;width:200px;background-color:#CCCCCC;font-weight:bold;color:black;text-align:center;padding:3px;" >Objetivo</td>
    <td style="padding:5px;" >fsdfsfsf</td>
  </tr>
  <tr>
    <td  style="height:50px;width:200px;background-color:#CCCCCC;font-weight:bold;color:black;text-align:center;padding:5px;" >Vigilador</td>
    <td style="padding:5px;" >sdlsdkjsfds</td>
  </tr>
   <tr>
    <td  style="height:50px;width:200px;background-color:#CCCCCC;font-weight:bold;color:black;text-align:center;padding:5px;" >Vigilador Secundario</td>
    <td style="padding:5px;" >ldksfjsfsf</td>
  </tr>
   <tr>
    <td  style="height:50px;width:200px;background-color:#CCCCCC;font-weight:bold;color:black;text-align:center;padding:5px;" >Vigilador Terciario</td>
    <td style="padding:5px;" >ffffffffff</td>
  </tr>
   <tr>
    <td  style="height:50px;width:200px;background-color:#CCCCCC;font-weight:bold;color:black;text-align:center;padding:5px;" >Fecha de registro</td>
    <td style="padding:5px;" >asasasasasasasasasasasasas</td>
  </tr>
   <tr>
    <td  style="height:50px;width:200px;background-color:#CCCCCC;font-weight:bold;color:black;text-align:center;padding:5px;" >Fecha de ingreso</td>
    <td style="padding:5px;" >asasasasasasasasasasasasas</td>
  </tr>
   <tr>
    <td  style="height:50px;width:200px;background-color:#CCCCCC;font-weight:bold;color:black;text-align:center;padding:5px;" >Fecha de egreso</td>
    <td style="padding:5px;" >asasasasasasasasasasasasas</td>
  </tr>
   <tr>
    <td  style="height:50px;width:200px;background-color:#CCCCCC;font-weight:bold;color:black;text-align:center;padding:5px;" >Observaciones</td>
    <td style="padding:5px;" >dddddddddddd</td>
  </tr>
</table>
<br><br><hr><br><br>

aca esta lo que me imprime, osea esta bien que la impresion no tome, los colores, aunque no se por que, pero por dios haceme el borde de la primer celda, que es lo que lo saca???

aca esta la impresion, aun colocando background=color:white; en la primer celda, NO aparece el borde de abajo de la primer celda, asi me imprime...

COLOQUE LOS ESTILOS DE CADA CELDA ASI DE MANERA REPETITIVA, POR QUE AL PARECER LAS CLASSES E ID, EN LOS ENVIO DE EMAIL PHP, NO LOS AGARRA.

temerariomalaga · #2 (**permalink**) 30/03/2013, 06:05

Para empezar, yo pondría el estilo o en una hoja externa o en la etiqueta <head>.
Al tener todas las celdas el mismo estilo declaras el estilo una sola vez y asi te ahorras ponerlo línea por línea. Dentro de ese estilo pones el estilo de la tabla y el de las celdas. Para la primera celda ponle un identificador (por ejemplo <td id="primero">) así distingues esa celda del resto. También le puedes poner un identificador a la primera columna. El código de tu web con los estilos sería así.

Código HTML:

<table>
  <tr>
    <td id="primero" colspan=2>SUPERVISION MODIFICADA</td>
  
  </tr>
  <tr>
    <td class="columna">Objetivo</td>
    <td>fsdfsfsf</td>
  </tr>
  <tr>
    <td class="columna">Vigilador</td>
    <td>sdlsdkjsfds</td>
  </tr>
   <tr>
    <td class="columna">Vigilador Secundario</td>
    <td>ldksfjsfsf</td>
  </tr>
   <tr>
    <td class="columna">Vigilador Terciario</td>
    <td>ffffffffff</td>
  </tr>
   <tr>
    <td class="columna">Fecha de registro</td>
    <td>asasasasasasasasasasasasas</td>
  </tr>
   <tr>
    <td class="columna">Fecha de ingreso</td>
    <td>asasasasasasasasasasasasas</td>
  </tr>
   <tr>
    <td class="columna">Fecha de egreso</td>
    <td >asasasasasasasasasasasasas</td>
  </tr>
   <tr>
    <td class="columna">Observaciones</td>
    <td>dddddddddddd</td>
  </tr>
</table>

Código CSS:

Ver originaltable{
    width: 400px;
    border: 1px solid #111;
    border-collapse: collapse;
    caption-side: top;
    font-weight: bold;
    text-align: center;
    }
#primero{
    height: 35px;
    color: white;
    background-color: black;
    }
td{
    padding: 5px;
    border: 1px solid #111;
    }
.columna{
    height: 50px;
    width: 200px;
    background-color: #CCCCCC;
    color: black;
    }

En table se pone el estilo general de la tabla.
En td el estilo general de las celdas.
En #primero se pone el estilo exclusivo de la celda primera y en .columna el estilo de la primera columna.
Espero que te sea de ayuda.
Un saludo.

aldo_rengo · #3 (**permalink**) 30/03/2013, 15:39

en la web, se ven los colores, SE VEN , los backgroun-color"

pero al imprimir no salen ninguno,

pzin · #4 (**permalink**) 30/03/2013, 15:46

Cita:

Iniciado por aldo_rengo

pero al imprimir no salen ninguno,

Eso es por la configuración de tu impresora. Tienes que configurarla para que imprime los fondos. Por defecto está desactivado, y realmente la mayoría de la gente lo deja desactivado. Y no hay manera de forzar que se active.

Por eso es buena práctica definir ciertos estilos para la impresión. Cosa que se puede hacer usando @media print.

aldo_rengo · #5 (**permalink**) 01/04/2013, 22:20

Cita:

Iniciado por Bonez

Eso es por la configuración de tu impresora. Tienes que configurarla para que imprime los fondos. Por defecto está desactivado, y realmente la mayoría de la gente lo deja desactivado. Y no hay manera de forzar que se active.

Por eso es buena práctica definir ciertos estilos para la impresión. Cosa que se puede hacer usando @media print.

si lei que en el navegador al momento de imprimr se activa la opcion , en firefox es un check,
para imprimir con color, es bastante raro,

capaz es para ahorrar tinta, ja, algunas web tienen bastante colores, tal vez, ja...

pero bueno por lo general los informes son mas simples..