Centrar tabla en XHTML

zerart245 · #1 (**permalink**) 13/03/2012, 10:10

Hola como están, necesito su ayuda:

Quiero centrar distintos objetos verticalmente, trabajo con la librería TCPDF, como tablas imágenes.

La librería solo permite XHTML, por lo cual no puedo utilizar div.

Gracias.

emprear · #2 (**permalink**) 13/03/2012, 11:46

Cita:

Iniciado por zerart245

Hola como están, necesito su ayuda:
La librería solo permite XHTML, por lo cual no puedo utilizar div.

Eso no tiene sentido,
de dónde sacaste esa conclusión?

zerart245 · #3 (**permalink**) 13/03/2012, 12:11

Googleando, y probando. Lo primero que hice fue tratar de centrarlo con los div, algo que no hacia, luego lei que la libreria TCPDF ,su funcion WriteHTML, solo utiliza XHTML

zerokilled · #4 (**permalink**) 13/03/2012, 12:34

¡buenas!
llevo un rato rompiendome la cabeza tratando de entender tu argumento. antes, comentar que desconozco como trabaja tcpdf. se me hace muy extraño tu comentario porque dices que tcpdf utiliza xhtml pero no puedes utilizar DIV. ¿sabes que DIV es parte de XHTML? en todo caso, un DIV por si solo no tiene formato propio. entonces, ¿tcpdf acepta o interpreta css? si es el caso, entonces por ahí va tu solución.

emprear · #5 (**permalink**) 13/03/2012, 12:41

mirá los ejemplos 6 y 61 de TCPDF

Funciona perfectamente, solo tenes que definir los estilos, dentro de style o inline, tanto para divs como para otros elementos

Saludos

emprear · #6 (**permalink**) 13/03/2012, 12:44

Cita:

Iniciado por zerokilled

¡buenas!
llevo un rato rompiendome la cabeza tratando de entender tu argumento. antes, comentar que desconozco como trabaja tcpdf. se me hace muy extraño tu comentario porque dices que tcpdf utiliza xhtml pero no puedes utilizar DIV. ¿sabes que DIV es parte de XHTML? en todo caso, un DIV por si solo no tiene formato propio. entonces, ¿tcpdf acepta o interpreta css? si es el caso, entonces por ahí va tu solución.

Para que te des una idea @zerokilled
http://www.tcpdf.org/examples.php
ahi están códigos php/html y salida pdf
Saludos

zerart245 · #7 (**permalink**) 13/03/2012, 14:42

Cita:

mirá los ejemplos 6 y 61 de TCPDF

Gracias no habia visto el 61 me sirvio de mucho pero aun asi no puedo centrar

Código PHP:

  <style>
#tabla{
    text-align:center; 
    bottom:middle; 
    margin:auto; 
    vertical-align:middle;
}
</style>
<div align="right"><table cellpadding="8" cellspacing="0" border="0" style="text-align:left; width:640px"><tr><td width="40" ></td><td align="center" border="1" style="padding:6px; text-align:center " width="115"><img width="91px"  height="135px" src="" /></td><td border="1" style="padding:6px;" width="485"><table id="tabla" cellpadding="0" cellspacing="0" border="0" style="text-align:left; width:500px">
<tr><td  style="padding:6px;" width="135">Apellidos y nombres </td><td   style="padding:6px;" width="350"><strong>'.$nom.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">'.$tip_doc.'</td>    <td   style="padding:6px;" width="350"><strong>'.$dni.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Fecha de nacimiento </td><td   style="padding:6px;" width="350"><strong>'.$fec_nac.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Estado civil </td><td   style="padding:6px;" width="350"><strong>'.$estado.'</strong></td></tr><tr><td  style="padding:6px;" width="135">Sexo</td><td   style="padding:6px;" width="350"><strong>'.$sexo.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Tel&eacute;fonos</td><td   style="padding:6px;" width="350"><strong>'.$telefonos.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Correos electr&oacute;nicos </td><td   style="padding:6px;" width="350"><strong>'.$correos.'</strong></td></tr>
</table></td></tr></table></div>

Si me pudieras ayudar se los agradecería bastante.

emprear · #8 (**permalink**) 13/03/2012, 14:59

Primero te aclaro que tu html está bastante "desprolijo" por decirlo de alguna manera
probá con esto, removes el div contenedor y pones otra tabla

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
 
<style type="text/css">
html,body{
height: 100%;
}
</style>
</head>
<body>
 
<table style="height:100%; width: 100%;" border="1">
<tr>
    <td align="center" valign="middle">
 
<table cellpadding="8" cellspacing="0" border="0" style="text-align:left; width:640px">
<tr><td width="40" ></td><td align="center" border="1" style="padding:6px; text-align:center " width="115"><img width="91px"  height="135px" src="" /></td><td border="1" style="padding:6px;" width="485">
<table id="tabla" cellpadding="0" cellspacing="0" border="0" style="text-align:left; width:500px">
<tr><td  style="padding:6px;" width="135">Apellidos y nombres </td><td style="padding:6px;" width="350"><strong>'.$nom.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">'.$tip_doc.'</td><td style="padding:6px;" width="350"><strong>'.$dni.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Fecha de nacimiento </td><td style="padding:6px;" width="350"><strong>'.$fec_nac.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Estado civil </td><td style="padding:6px;" width="350"><strong>'.$estado.'</strong></td></tr><tr><td style="padding:6px;" width="135">Sexo</td><td   style="padding:6px;" width="350"><strong>'.$sexo.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Tel&eacute;fonos</td><td style="padding:6px;" width="350"><strong>'.$telefonos.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Correos electr&oacute;nicos </td><td   style="padding:6px;" width="350"><strong>'.$correos.'</strong></td></tr>
</table></td></tr></table>
 
</td>
</tr>
</table>  
 
</body>
</html>

y fijate el css que pone html y body al 100%;

Saludos

zerart245 · #9 (**permalink**) 13/03/2012, 15:18

Gracias por la ayuda pero, probé, y no hubo movimiento la imagen sigue al lado y la tabla en la parte superior.

zerart245 · #10 (**permalink**) 14/03/2012, 13:25

Probé por todos los métodos que pude el centrado vertical pero en TCPDF no lo hace.

jcorrea · #11 (**permalink**) 14/03/2012, 13:54

Porque no pones el codigo talvez estas haciendo algo mal

emprear · #12 (**permalink**) 14/03/2012, 14:52

Cita:

Iniciado por zerart245

Probé por todos los métodos que pude el centrado vertical pero en TCPDF no lo hace.

Lo qu pasa es que esa librería tiene tres millones de opciones, no alcanza con el html.

Algo se puede lograr, pero no dispongo de tiempo para estudiar todas las opciones

Código PHP:

Ver original<?php
 
require_once('../config/lang/eng.php');
require_once('../tcpdf.php');
 
// create new PDF document
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);
 
// set document information
$pdf->SetCreator(PDF_CREATOR);
$pdf->SetAuthor('Nicola Asuni');
$pdf->SetTitle('TCPDF Example 061');
$pdf->SetSubject('TCPDF Tutorial');
$pdf->SetKeywords('TCPDF, PDF, example, test, guide');
 
// set default header data
//$pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE.' 061', PDF_HEADER_STRING);
 
// set header and footer fonts
$pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));
$pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));
 
// set default monospaced font
$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);
 
//set margins
$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);
$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);
$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);
 
//set auto page breaks
$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);
 
//set image scale factor
$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);
 
//set some language-dependent strings
$pdf->setLanguageArray($l);
 
// ---------------------------------------------------------
 
// set font
$pdf->SetFont('helvetica', '', 10);
 
// add a page
$pdf->AddPage();
 
/* NOTE:
 * *********************************************************
 * You can load external XHTML using :
 *
 * $html = file_get_contents('/path/to/your/file.html');
 *
 * External CSS files will be automatically loaded.
 * Sometimes you need to fix the path of the external CSS.
 * *********************************************************
 */
 
// define some HTML content with style
$html = <<<EOF
<!-- EXAMPLE OF CSS STYLE -->
<style>
html,body{
height: 100%;
}
 
p {
height: 300px;
}
</style>
<table>
<tr><td>
<p><br /><!-- s --><br /><!-- s --><br /><br /><br /><br /></p>
</td></tr></table>
<table style="height:100%; width: 100%;margin-top: 200px;" border="1">
<tr>
    <td align="center" valign="middle">
 
<table cellpadding="8" cellspacing="0" border="0" style="text-align:left; width:640px">
<tr><td width="40" ></td><td align="center" border="1" style="padding:6px; text-align:center " width="115"></td><td border="1" style="padding:6px;" width="485">
<table id="tabla" cellpadding="0" cellspacing="0" border="0" style="text-align:left; width:500px">
<tr><td  style="padding:6px;" width="135">Apellidos y nombres </td><td style="padding:6px;" width="350"><strong>'.$nom.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">'.$tip_doc.'</td><td style="padding:6px;" width="350"><strong>'.$dni.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Fecha de nacimiento </td><td style="padding:6px;" width="350"><strong>'.$fec_nac.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Estado civil </td><td style="padding:6px;" width="350"><strong>'.$estado.'</strong></td></tr><tr><td style="padding:6px;" width="135">Sexo</td><td   style="padding:6px;" width="350"><strong>'.$sexo.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Tel&eacute;fonos</td><td style="padding:6px;" width="350"><strong>'.$telefonos.'</strong></td></tr>
<tr><td  style="padding:6px;" width="135">Correos electr&oacute;nicos </td><td   style="padding:6px;" width="350"><strong>'.$correos.'</strong></td></tr>
</table></td></tr></table>
 
</td>
</tr>
</table>  
EOF;
 
// output the HTML content
$pdf->writeHTML($html, true, false, true, false, '');
 
*******************************************************************
 
// reset pointer to the last page
$pdf->lastPage();
 
// ---------------------------------------------------------
 
//Close and output PDF document
$pdf->Output('example_061.pdf', 'I');
 
?>

zerart245 · #13 (**permalink**) 14/03/2012, 21:37

Te agradesco mucho que tomes tu tiempo para ayudar. Intente con lo que tu ponias pero no mostraba nada en el PDF.

Aqui esta el codigo que sale a medias, no centra en vertical si horizontal.
El codigo esta feo porque estuve probando con muchas cosas, disculpen el desorden.

Código PHP:

  <?php

//============================================================+

// File name   : example_061.php

// Begin       : 2010-05-24

// Last Update : 2010-08-08

//

// Description : Example 061 for TCPDF class

//               XHTML + CSS

//

// Author: Nicola Asuni

//

// (c) Copyright:

//               Nicola Asuni

//               Tecnick.com LTD

//               Manor Coach House, Church Hill

//               Aldershot, Hants, GU12 4RQ

//               UK

//               www.tecnick.com

//               [email protected]

//============================================================+

 
/**

 * Creates an example PDF TEST document using TCPDF

 * @package com.tecnick.tcpdf

 * @abstract TCPDF - Example: XHTML + CSS

 * @author Nicola Asuni

 * @since 2010-05-25

 */

 
require_once('../config/lang/eng.php');

require_once('../tcpdf.php');

 
// create new PDF document

$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8', false);

 
// set document information

$pdf->SetCreator(PDF_CREATOR);

$pdf->SetAuthor('Nicola Asuni');

$pdf->SetTitle('TCPDF Example 061');

$pdf->SetSubject('TCPDF Tutorial');

$pdf->SetKeywords('TCPDF, PDF, example, test, guide');

 
// set default header data

//$pdf->SetHeaderData(PDF_HEADER_LOGO, PDF_HEADER_LOGO_WIDTH, PDF_HEADER_TITLE.' 061', PDF_HEADER_STRING);

 
// set header and footer fonts

$pdf->setHeaderFont(Array(PDF_FONT_NAME_MAIN, '', PDF_FONT_SIZE_MAIN));

$pdf->setFooterFont(Array(PDF_FONT_NAME_DATA, '', PDF_FONT_SIZE_DATA));

 
// set default monospaced font

$pdf->SetDefaultMonospacedFont(PDF_FONT_MONOSPACED);

 
//set margins

$pdf->SetMargins(PDF_MARGIN_LEFT, PDF_MARGIN_TOP, PDF_MARGIN_RIGHT);

$pdf->SetHeaderMargin(PDF_MARGIN_HEADER);

$pdf->SetFooterMargin(PDF_MARGIN_FOOTER);

 
//set auto page breaks

$pdf->SetAutoPageBreak(TRUE, PDF_MARGIN_BOTTOM);

 
//set image scale factor

$pdf->setImageScale(PDF_IMAGE_SCALE_RATIO);

 
//set some language-dependent strings

$pdf->setLanguageArray($l);

 
// ---------------------------------------------------------

 
// set font

$pdf->SetFont('helvetica', '', 10);

 
// add a page

$pdf->AddPage();

 
/* NOTE:

 * *********************************************************

 * You can load external XHTML using :

 *

 * $html = file_get_contents('/path/to/your/file.html');

 *

 * External CSS files will be automatically loaded.

 * Sometimes you need to fix the path of the external CSS.

 * *********************************************************

 */

 
// define some HTML content with style

$html = <<<EOF

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">                

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title>titulo</title> 

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />

        <style type="text/css">

            html,body{

                height: 100%;

                width: auto;

            }

        </style>

    </head>

    <body>

        <table  align="right" cellpadding="0" cellspacing="0" border="0" style="text-align:left; width:640px;">

            <tr>

                <td width="40">

                </td>

                <td>

                    <table border="1" cellspacing="0" bordercolor="#000000">

                        <tr>

                            <td align="center"  style="padding:0px;" width="115">

                                <div style="text-align: center; line-height: 0px;">&nbsp;                            

                                    <img border="0" align="center"  width="113"  height="151" src="../images/hola.JPG" />            

                                </div>                

                            </td>

                            <td align="center" valign="center" style="padding:4px;" width="485">

                                <table id="tabla" cellpadding="3.11"padding="3" cellspacing="0" border="0" style="text-align:left; width:500px;">

                                    <tr>

                                        <td style="padding:4px;" width="135">Apellidos y nombres </td>

                                        <td style="padding:4px;" width="342"><strong>afsadfsadf</strong></td>

                                    </tr>

                                    <tr>

                                        <td  style="padding:4px;" width="135">43fff</td>

                                        <td style="padding:4px;" width="342"><strong>34443434</strong></td>

                                    </tr>

                                    <tr>

                                        <td  style="padding:4px;" width="135">Fecha de nacimiento </td>

                                        <td style="padding:4px;" width="342"><strong>14/141</strong></td>

                                    </tr>

                                    <tr>

                                        <td  style="padding:4px;" width="135">Estado civil </td>

                                        <td style="padding:4px;" width="342"><strong>dfsadfasdf</strong></td>

                                    </tr>

                                    <tr>

                                        <td style="padding:4px;" width="135">Sexo</td>

                                        <td   style="padding:4px;" width="342"><strong>asdfsadfsdaf</strong></td>

                                    </tr>

                                    <tr>

                                        <td  style="padding:4px;" width="135">Tel&eacute;fonos</td>

                                        <td style="padding:4px;" width="342"><strong>43443434443</strong></td>

                                    </tr>

                                    <tr>

                                        <td  style="padding:4px;" width="135">Correos electr&oacute;nicos </td>

                                        <td   style="padding:4px;" width="342"><strong>asdfsadfasdf</strong></td>

                                    </tr>

                                </table>

                            </td>

                        </tr>    

                      </table>

                </td>            

            </tr>

        </table>

    </body>

</html>

EOF;

 
// output the HTML content

$pdf->writeHTML($html, true, false, true, false, '');

 
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 
// *******************************************************************

// HTML TIPS & TRICKS

// *******************************************************************

 
// REMOVE CELL PADDING

//

// $pdf->SetCellPadding(0);

// 

// This is used to remove any additional vertical space inside a 

// single cell of text.

 
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 
// REMOVE TAG TOP AND BOTTOM MARGINS

//

// $tagvs = array('p' => array(0 => array('h' => 0, 'n' => 0), 1 => array('h' => 0, 'n' => 0)));

// $pdf->setHtmlVSpace($tagvs);

// 

// Since the CSS margin command is not yet implemented on TCPDF, you

// need to set the spacing of block tags using the following method.

 
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 
// SET LINE HEIGHT

//

// $pdf->setCellHeightRatio(1.25);

// 

// You can use the following method to fine tune the line height

// (the number is a percentage relative to font height).

 
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

 
// CHANGE THE PIXEL CONVERSION RATIO

//

// $pdf->setImageScale(0.47);

// 

// This is used to adjust the conversion ratio between pixels and 

// document units. Increase the value to get smaller objects.

// Since you are using pixel unit, this method is important to set the

// right zoom factor.

// 

// Suppose that you want to print a web page larger 1024 pixels to 

// fill all the available page width.

// An A4 page is larger 210mm equivalent to 8.268 inches, if you 

// subtract 13mm (0.512") of margins for each side, the remaining 

// space is 184mm (7.244 inches).

// The default resolution for a PDF document is 300 DPI (dots per 

// inch), so you have 7.244 * 300 = 2173.2 dots (this is the maximum 

// number of points you can print at 300 DPI for the given width).

// The conversion ratio is approximatively 1024 / 2173.2 = 0.47 px/dots

// If the web page is larger 1280 pixels, on the same A4 page the 

// conversion ratio to use is 1280 / 2173.2 = 0.59 pixels/dots

 
// *******************************************************************

 
// reset pointer to the last page

$pdf->lastPage();

 
// ---------------------------------------------------------

 
//Close and output PDF document

$pdf->Output('example_061.pdf', 'I');

 
//============================================================+

// END OF FILE                                                

//============================================================+