miércoles, 1 de agosto de 2012

Cómo repetir encabezados al imprimir una página web

Muchas veces necesitamos hacer un reporte que al imprimirse se repitan los encabezados ya sea de los membretes o de los títlos de las columnas de las tablas. Este es un caso frecuente también al hacer el reporteo vía XSL.

He visto soluciones que van desde contar el número de filas escritas y si pasa de cierta cantidad, escribir un salto de página y volver a escribir el encabezado. Esto funciona bien en reportes sencillos con una sola tabla, pero no es fácil de implementar si el reporte es más complejo. Otra solución es usando un conjunto de divs y manejarlos con javascript midiendo el alto de los divs según se vayan escribiendo los datos, y si sobre pasa el tamaño de la hoja, quitar la última entrada, escribir el salto de página, los encabezados y volver a escribir los datos. Esto es bastante complejo.

La mejor solución hasta el momento es utilizar tablas especificando el thead, el tbody y, opcionalmente, el tfoot si se quiere también aplicar un pie a cada página. Anteriormente había intentado este método, pero no funcionaba en Internet Explorer, pero recientemente encontré un estilo que aplicado al thead y otro para el tfoot, hace que funcione en ese explorador.

Para repetir el membrete en cada página, puede usar el siguiente ejemplo:

<table>
    <thead style="display: table-header-group">
        <tr>
            <td>
                <big>Mi membrete.</big>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> El cuerpo de mi reporte. </td>
        </tr>
    </tbody>
    <tfoot style="display: table-footer-group">
        <tr>
            <td> <small>Mi pié de página.</small> </td>
        </tr>
    </tfoot>
</table>

Para repetir el membrete y además, los títulos de las columnas, puede basarse en este ejemplo:

<table>
    <thead style="display: table-header-group">
        <tr>
            <td>
                <big>Mi membrete.</big>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <table>
                    <thead style="display: table-header-group">
                        <tr>
                            <th>Cantidad</th>
                            <th>Descripcion</th>
                            <th>Precio</th>
                            <th>Importe</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2</td>
                            <td>Computadoras</td>
                            <td>10,000.00</td>
                            <td>20,000.00</td>
                        </tr>
                        .
                        .
                        .
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
    <tfoot style="display: table-footer-group">
        <tr>
            <td> <small>Mi pié de página.</small> </td>
        </tr>
    </tfoot>
</table>

El ejemplo anterior puede servir de base para reportes más complejos simplemente anidando tablas dentro de otras tablas.

También podemos usar este mismo método para realizar documentos estructurados.

<table>
    <thead style="display: table-header-group">
        <tr>
            <td>
                <big>Mi membrete.</big>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <table>
                    <thead style="display: table-header-group">
                        <tr>
                            <td>Capítulo 1 - Mi capítulo</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Texto de mi documento</td>
                        </tr>
                    </tbody>
                </table>
                <table>
                    <thead style="display: table-header-group">
                        <tr>
                            <td>Capítulo 2 - Mi otro capítulo</td>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Texto de mi documento</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
    <tfoot style="display: table-footer-group">
        <tr>
            <td> <small>Mi pié de página.</small> </td>
        </tr>
    </tfoot>
</table>

lunes, 30 de julio de 2012

Presentación

Hola.

Antes que nada, déjenme presentarme.

Mi nombre es César Valentín Murillo Robles. Soy desarrollador desde 1998. La mayor parte de mi tiempo como desarrollador, he trabajado con tecnología Microsoft. He aprendido a programar desde 1991 con

  • GW-Basic
  • QBasic
  • Turbo Pascal
  • Visual Basic 4
  • HTML
  • Clipper
  • Visual Basic 6
  • Perl (CGI)
  • T-SQL
  • ASP
  • VBScript
  • javascript
  • Visual Basic.NET
  • ASP.NET
  • C#
  • XML
  • Linq
  • XSL
  • XSD
  • jQuery
  • Ajax
  • PL-SQL
  • y lo que venga.

En este blog quiero dar a conocer algo de lo que he aprendido a lo largo de estos años, pretendiendo con esto aportar un poco de mi experiencia.

Espero que este blog sea útil para muchos.

Atte.

César Valentín Murillo Robles
LUSARSOFT