I use tcpdf to generate pdf files.
And there's a problem in aligning image in table td.
I am uising $pdf->writeHTML($html, true, false, true, false, ''); in tcpdf.
html is clear from the image i have shared.
html is just simple as
<table>
<tr>
<td> </td>
<td>Picture</td>
.......
</tr>
<tr>
<td>1</td>
<td style="text-align:center"><img src="abc.jpg" width="20" height="20" ></td>
.......
</tr>
</table>
Note: align="center", valign="middle" , css margin and padding ... nothing seems to work I tried on
text-align:center push into center but not vertically.
Adding the following CSS to your td should work:
td {
vertical-align: middle;
text-align:center;
}
See a fiddle of it working.
Did you check image alignment?
<img align=center src="abc.jpg" width="20" height="20" >
This will work. As shown below, we can add a line break inside the <p> tag.
<table width="100%" style="border:1px solid #000;">
<tr>
<td style="text-align: center;">
<p><br/>
<img src="path/to/image" />
</p>
</td>
</tr>
</table>
you can use :
CSS:
td img{
margin:0 auto;
}
or use like #gayan
Related
In our system, users often copy/paste tables from other sources, such as Excel/Word, which results in tables that have height tags or attributes in a number of places. I was thinking I could use pattern matching (preg_replace) to find and remove those instances as the inclusion of height specifications is causing issues in our system when this HTML is used by our PHP API to output formatted reports, but I've been trying to do so for the last 3 days without much success as I'm not adept at using regular expressions in this way.
I've read the documentation and examples on php.net and reviewed quite a few of the posts here on this topic, but I still don't know how to only apply the pattern matching to only instances within a tag, etc.
Also, how would I remove the entire tag if it only includes a height attribute, and then only the height attribute if other attributes are included?
Here is an example of the code I need to clean. This is just a small portion, as it typically will include multiple table elements similar to what's I've included below, along with images, text, etc.:
<table style="height:126px;" width="243">
<tbody>
<tr style="height: 18px;">
<td style="width: 38.5px; height: 18px;">ABC</td>
<td style="width: 41.5469px; height: 18px;">123</td>
<td style="width: 50.6562px; height: 18px;">DEF;</td>
<td style="width: 99.2969px; height: 18px;">456</td>
</tr>
<tr style="height:18px;">
<td style="width: 38.5px; height: 18px;">GHI</td>
<td style="width: 41.5469px; height: 18px;">789</td>
<td style="width: 50.6562px; height: 18px;">JKL</td>
<td style="width: 99.2969px; height: 18px;">012</td>
</tr>
<tr style="height:18px;">
<td style="width: 38.5px; height: 18px;">MNO</td>
<td style="width: 41.5469px; height: 18px;">345</td>
<td style="width: 50.6562px; height: 18px;">PQR</td>
<td style="width: 99.2969px; height: 18px;">678</td>
</tr>
</tbody>
</table>
Can this be done using preg_replace, or do I need to use a different technique? Any guidance or assistance would be greatly appreciated. A "cleaned" version of the above would look like this:
Cleaned
<table width="243">
<tbody>
<tr>
<td style="width: 38.5px;">ABC</td>
<td style="width: 41.5469px;">123</td>
<td style="width: 50.6562px;">DEF;</td>
<td style="width: 99.2969px;">456</td>
</tr>
<tr>
<td style="width: 38.5px;">GHI</td>
<td style="width: 41.5469px;">789</td>
<td style="width: 50.6562px;">JKL</td>
<td style="width: 99.2969px;">012</td>
</tr>
<tr>
<td style="width: 38.5px;">MNO</td>
<td style="width: 41.5469px;">345</td>
<td style="width: 50.6562px;">PQR</td>
<td style="width: 99.2969px;">678</td>
</tr>
</tbody>
</table>
Have you considered simply swapping the 'height:' style attribute with a non-existent one (ie: the DOM will ignore unknown tags); for example:
$str = '<table style="height:126px;" width="243">
<tbody>
<tr style="height: 18px;">
<td style="width: 38.5px; height: 18px;">ABC</td>
<td style="width: 41.5469px; height: 18px;">123</td>
<td style="width: 50.6562px; height: 18px;">DEF;</td>
<td style="width: 99.2969px; height: 18px;">456</td>
</tr>
<tr style="height:18px;">
<td style="width: 38.5px; height: 18px;">GHI</td>
<td style="width: 41.5469px; height: 18px;">789</td>
<td style="width: 50.6562px; height: 18px;">JKL</td>
<td style="width: 99.2969px; height: 18px;">012</td>
</tr>
<tr style="height:18px;">
<td style="width: 38.5px; height: 18px;">MNO</td>
<td style="width: 41.5469px; height: 18px;">345</td>
<td style="width: 50.6562px; height: 18px;">PQR</td>
<td style="width: 99.2969px; height: 18px;">678</td>
</tr>
</tbody>
</table>';
$str = str_replace("height:","nulled:",$str);
echo $str;
I took your table HTML, put it into a string variable and did a simple str_replace to swap all references to height: to nulled: which strips the height attribute out the string and when I echo the string back I get the cleaned table you put in your example.
There may be an even prettier approach, but this worked for me. :)
I tried to write the table inside a loop by 1 table/loop by using 1 table equal to 1 row.
However, I got a space between 2 tables like attached image below. I try to remove by using css properties like margin,padding are not worked.
Data is generated in each loop
How can I remove the space between there table? this is my example code.
for ($j=0;$j<count($ins_englishDescriptionOfGoods);$j++){
$html = <<<EOD
<table width="100%;" border="1" align="center" style="padding: 5px 1px 5px 2px; border-collapse: collapse;">
<tr nobr="true">
<td width="6%">$ORDER</td>
<td width="16%" style="text-align:center;">$GCL_NO</td>
<td width="13%" style="text-align:center;">$CONTAINER_NO</td>
<td width="23%" style="text-align:left; font-size:12px; line-height:7px;">$ENG_DESC</td>
<td width="10%" style="text-align:right;" >$NETWEIGTH</td>
<td width="10%" style="text-align:right;">$QTY</td>
<td width="10%" style="text-align:right;">$PACKAGE</td>
<td width="12%" style="text-align:right;">$FOB</td>
</tr>
</table>
EOD;
$pdf->writeHTML(iconv('TIS-620','UTF-8' ,$html), true, false, false, false, '');
}
I was having this exact same problem just now.
I was able to remove the space between two tables by adding line-height: -0.8 to the table and adding line-height: 1.5 to all of the rows in the table:
$pdf->html('<p>These two tables are touching each other:</p>');
$pdf->html('<table class="table-border" style="line-height: -0.8"><tbody><tr style="line-height: 1.5"><td>Hello</td></tr></tbody></table>');
$pdf->html('<table class="table-border"><tbody><tr><td>Goodbye!</td></tr></tbody></table>');
$pdf->html('<p>These two tables are not:</p>');
$pdf->html('<table class="table-border" ><tbody><tr><td>Hello</td></tr></tbody></table>');
$pdf->html('<table class="table-border"><tbody><tr><td>Goodbye!</td></tr></tbody></table>');
TCPDF doesn't support setting a margin with CSS, so you have to fake it with line-height :(
this code not work in table with mPDF php class
<table>
<tr>
<td class="contentDetails">
<td class="contentDetails">
<h3 style="text-align: right;"><strong>text align right</strong></h3>
<h3 style="text-align: center;"><strong>text align center</strong></h3>
<h3 style="text-align: left;"><strong>text align left</strong></h3>
</td>
</tr>
</table>
i triad use
.contentDetails > h3 {display: block;}
but not work and between td it's html from Editor tinymce
this full code from script
and when do output found content the td text align left not right or center
<?php
$html = '
<h1>mPDF</h1>
<table style="border-collapse: collapse;
font-size: 12px;
font-weight: 700;
margin-top: 5px;
border-top: 1px solid #777;
width: 100%;">
<tbody>
<tr>
<td class="contentDetails">
<h3 style="text-align: right;"><strong>text align right</strong></h3>
<h3 style="text-align: center;"><strong>text align center</strong></h3>
<h3 style="text-align: left;"><strong>text align left</strong></h3>
</td>
</tr>
</tbody>
</table>';
include("mpdf.php");
$mpdf=new mPDF('c');
$mpdf->WriteHTML($html);
$mpdf->Output();
exit;
?>
Try the below code. I think it will help you.
<table width="100%">
<tr>
<td class="contentDetails">
<th align="left"> <h3><strong>text align right</strong></h3></th>
<th align="center"> <h3><strong>text align center</strong></h3></th>
<th align="right"> <h3><strong>text align left</strong></h3></th>
</td>
</tr>
</table>
using extra tags in this.
I have prepared a lot of hours a content to print (mPdf v.6). Now i can give an advice to all. Don't use tables to align content or simply hold the content. Almost all css properties of elements work fine. But - but must not be nested in table.
The problem is the width of the container which is fitting with the content. Set table width to 100%
table {
width: 100%;
}
<table>
<tr>
<td class="contentDetails">
<h3 style="text-align: right;"><strong>text align right</strong></h3>
<h3 style="text-align: center;"><strong>text align center</strong></h3>
<h3 style="text-align: left;"><strong>text align left</strong></h3>
</td>
</tr>
</table>
Need help,
I would like to print this html code in our web page using php domdocument, but struggling
I have also write the code with below. Could you please help me.
<table width="610" id="machine" border="0" cellSpacing="10"
cellPadding="0">
<TBODY>
<TR>
<TD colSpan=2 align=left>
<DIV id=breadcrumbs><A href="/new-and-used-machinery.php">All
Machines</A> > Air Compressors
> </DIV>
<DIV id=ForSale>FOR SALE:</DIV>
<H1>5 CFM Used Speedaire Air Compressor, Single Phase, 60 Gallon
tank, 1.5 H.P. #A1194</H1>
</TD>
</TR>
<TR>
<TD id=photos vAlign=top width=270 align=middle>
<DIV id=ClickPhotos>Click On Photos For Larger Image:</DIV>
<!-- PHOTOS DB div style="margin-bottom:12px"><img src="thumb.php?id=A1194.jpg&w=250&h=250"></div --><!-- ORIG PHOTOS div style="margin-bottom:12px"><img src="thumb.php?f=A1194.jpg&w=250&h=250"></div -->
<DIV style="MARGIN-BOTTOM: 12px"><A
href="/photos.php?id=7135&p=1"><IMG
title="Used Speedaire Air Compressor"
alt="Used Speedaire Air Compressor"
src="/class/class_Image.php?load=cGhvdG9zL0ExMTk0LmpwZ3wyNTB8MjUwfDF8"></A>
</DIV>
<!-- PHOTOS DB div style="margin-bottom:12px"><img src="thumb.php?id=A1194_1.jpg&w=250&h=250"></div --><!-- ORIG PHOTOS div style="margin-bottom:12px"><img src="thumb.php?f=A1194_1.jpg&w=250&h=250"></div -->
<DIV style="MARGIN-BOTTOM: 12px"><A
href="/photos.php?id=7135&p=2"><IMG
title="Used Speedaire Air Compressor"
alt="Used Speedaire Air Compressor"
src="/class/class_Image.php?load=cGhvdG9zL0ExMTk0XzEuanBnfDI1MHwyNTB8MXw="></A>
</DIV>
</TD>
<TD id=details vAlign=top width=310 align=left>
<TABLE
style="BORDER-BOTTOM: #cdcdcd 1px solid; BORDER-LEFT: #cdcdcd 1px solid; PADDING-BOTTOM: 10px; BACKGROUND-COLOR: #eee; PADDING-LEFT: 10px; PADDING-RIGHT: 10px; BORDER-TOP: #cdcdcd 1px solid; BORDER-RIGHT: #cdcdcd 1px solid; PADDING-TOP: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px"
id=machine_buttons border=0 cellSpacing=3 cellPadding=0>
<TBODY>
<TR>
<TD><A onmouseover="swapImg('Manufact', true)"
onmouseout="swapImg('Manufact', false)"
href="/manufacturer.php?brand=Speedaire"><IMG id=icon_Manufact
border=0 alt="" src="/images/machine_button_Manufact.gif"
width=66 height=33><BR>
Manufacturer Info</A></TD>
</TR>
<TR>
<TD><A onmouseover="swapImg('Category', true)"
onmouseout="swapImg('Category', false)"
href="/listing.php?cat=Air+Compressors"><IMG id=icon_Category
border=0 alt="" src="/images/machine_button_Category.gif"
width=66 height=33><BR>
Similar Machines</A></TD>
</TR>
<TR>
<TD><A onmouseover="swapImg('Brochure', true)"
onmouseout="swapImg('Brochure', false)"
href="/manufacturer.php?brand=Speedaire#brochures" target=_blank><IMG
id=icon_Brochure border=0 alt=""
src="/images/machine_button_Brochure.gif" width=66 height=33><BR>
OEM Brochure</A></TD>
</TR>
<TR>
<TD><A style="CURSOR: pointer" id=shadowbox_email class=sb
title="Used Speedaire Air Compressor" href="/share.php?id=7135"
rel=shadowbox;width=520;height=500 shadowboxCacheKey="1"
onMouseOver="swapImg('Email', true)"
onMouseOut="swapImg('Email', false)" jQuery1316148993734="2"><IMG
id=icon_Email border=0 alt=""
src="/images/machine_button_Email.gif" width=66 height=33
jQuery1316148993734="3"><BR>
Email A Friend</A></TD>
</TR>
<TR>
<TD><A onmouseover="swapImg('Ship', true)"
onmouseout="swapImg('Ship', false)" href="/shipping.php?id=7135"><IMG
id=icon_Ship border=0 alt=""
src="/images/machine_button_Ship.gif" width=66 height=33><BR>
Shipping</A></TD>
</TR>
</TBODY>
</TABLE>
<DIV id=QuickQuote><A href="/machine-print.php?id=7135" target=_blank><IMG
title="Print a Quick Quote!" border=0 alt="Print a Quick Quote!"
align=absMiddle
src="http://www.sterlingmachinery.com/images/quick_quote.jpg"> </A></DIV>
<DIV style="MARGIN: 5px 0px 0px 45px">
<FORM method=post name=addmachine action=/request-quote.php
jQuery1316148993734="5"><INPUT id=add
title="Add Machine to Quote Cart" value="Add Machine to Quote Cart"
alt="Add Machine to Quote Cart"
src="http://www.sterlingmachinery.com/images/quick_add.jpg"
type=image name=add jQuery1316148993734="7"> <IMG
style="DISPLAY: none; CURSOR: pointer" id=remove
title="Remove from quote cart" name=remove
alt="Remove from quote cart" src="/images/remove.gif" width=16
height=16 jQuery1316148993734="8">
<DIV style="MARGIN-TOP: 5px"><INPUT id=view title="View Quote Cart"
value="View Quote Cart" alt="View Quote Cart"
src="http://www.sterlingmachinery.com/images/quick_view.jpg"
type=image name=view></DIV>
</FORM>
</DIV>
<BR>
<TABLE id=machine_stats border=0 cellSpacing=5 cellPadding=0
width=300>
<TBODY>
<TR>
<TD class=field vAlign=top align=right>Stock #</TD>
<TD vAlign=top align=left>A1194</TD>
</TR>
<TR>
<TD class=field vAlign=top align=right>Manufacturer:</TD>
<TD vAlign=top align=left>Speedaire</TD>
</TR>
<TR>
<TD class=field vAlign=top align=right>Model:</TD>
<TD vAlign=top align=left></TD>
</TR>
<TR>
<TD class=field vAlign=top align=right>Capacity:</TD>
<TD vAlign=top align=left>5 CFM</TD>
</TR>
<TR>
<TD class=field vAlign=top align=right>Price:</TD>
<TD vAlign=top align=left><SPAN style="BACKGROUND-COLOR: #ffff00">$350</SPAN></TD>
</TR>
<TR>
<TD class=field vAlign=top align=right>Category:</TD>
<TD vAlign=top align=left>Air Compressors</TD>
</TR>
<TR>
<TD class=field vAlign=top align=right>Condition:</TD>
<TD vAlign=top align=left>Used Machinery</TD>
</TR>
</TBODY>
</TABLE>
<FIELDSET><LEGEND>Full Description</LEGEND>
<TABLE id=machine_specs border=0 cellSpacing=0 cellPadding=4
width=300>
<TBODY>
<TR>
<TD
style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
class=field vAlign=top align=right>CFM Rating:</TD>
<TD
style="BORDER-RIGHT-WIDTH: 0px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px"
vAlign=top align=left>5</TD>
</TR>
<TR>
<TD class=field vAlign=top align=right>Tank Size:</TD>
<TD vAlign=top align=left>60 Gallon</TD>
</TR>
<TR>
<TD class=field vAlign=top align=right>Weight:</TD>
<TD vAlign=top align=left>400 LBS.</TD>
</TR>
</TBODY>
</TABLE>
</FIELDSET>
<FIELDSET><LEGEND>Equipped With</LEGEND>Single Phase Motor<BR>
Horsepower: 1 1/2</FIELDSET>
<DIV class=privates>* Temporary specifications subject to
verification.<BR>
All quotations subject to prior sale.</DIV>
</TD>
</TR>
</TBODY>
</table>
I have write this code but its not getting properly.
Outer foreach loops runs 17 times but should be only two time because the outer table has only two rows.
$xml = new DOMDocument();
$xml->validateOnParse = true;
$xml->loadHTMLFile($url);
$xpath = new DOMXPath($xml);
$table =$xpath->query("//*[#id='machine']")->item(0);
echo "<table border=2>";
$rows = $table->getElementsByTagName("tr");
foreach ($rows as $row) //there i only two rows.
{
echo "<tr>";
$cells = $row -> getElementsByTagName('td');
foreach ($cells as $cell)
{
echo "<td>";
foreach ($cell->getElementsByTagName('table') as $innerTable )
{
foreach ( $innerTable->getElementsByTagName("tr") as $innerTrs)
{
foreach ( $innerTrs->getElementsByTagName('td') as $innerCell)
{
foreach ($innerCell->getElementsByTagName('a') as $a )
{
echo '<br>'.$a->nodeValue.'';
foreach ($a->getElementsByTagName('img') as $img )
echo '<br> <img src="'.GetMainBaseFromURL($url).$img->getAttribute('src').'">';
}
}
}
}
echo "</td>";
}
echo "</tr>";
}
echo "</table>";
Then how can i print as it is html table in my web page using php dom document.
I am new in php dom.
Thank you.
Thanks a lot.
getElementsByTagName works on the whole document. The document has 17 tr elements, so it will return them all regardless where those are placed.
As you want to look for specific tr elements, or more specifically for images inside a specific table, I suggest you let xpath do most of the work:
$xpath = new DOMXPath($xml);
$nodes =$xpath->query("//table[#id='machine']/tbody/tr/td/div/a/img");
echo 'Found ', $nodes->length, ":\n";
foreach($nodes as $node)
{
$img = $node;
$a = $node->parentNode;
$aHref = $a->getAttribute('href');
$imgSrc = $img->getAttribute('src');
printf("Element:\n + href: %s;\n +- src: %s\n\n", $aHref, $imgSrc);
}
This will list 3 elements already (not 2). You need to further on decide which ones to drop, but this should make it more easy. Demo & Output:
Found 3:
Element:
+ href: /photos.php?id=7135&p=1;
+- src: /class/class_Image.php?load=cGhvdG9zL0ExMTk0LmpwZ3wyNTB8MjUwfDF8
Element:
+ href: /photos.php?id=7135&p=2;
+- src: /class/class_Image.php?load=cGhvdG9zL0ExMTk0XzEuanBnfDI1MHwyNTB8MXw=
Element:
+ href: /machine-print.php?id=7135;
+- src: http://www.sterlingmachinery.com/images/quick_quote.jpg
Another tip: First normalize your data into a structure like an array. You can then use your array to generate the output. That done you can separate the parsing from the output which will make it more easy for you to achieve your goals.
Parse the document into an array.
Modify values as you need them in that array (e.g. GetMainBaseFromURL).
Generate the output based on the array.
The foreach loop iterates 17 just because you have 17 tags in the HTML code you posted.
Actually the $rows = $table->getElementsByTagName("tr"); extracts any tag at any depth in the tree.
To get only the two outer you can do something like
$tbody = $table->childNodes;
$outerTr = $tbody->childNodes;
An the iterate on $outerTr
You can also build an Xpath expression to get only the two outer
I did not test yout code however, in the others foreach, keep in mind the same problem of getElementsByTagName("tr") (or other tags td,a ..)
If you just want to copy the table you can do this:
<?php
$xml = new DOMDocument();
$xml->validateOnParse = true;
$xml->loadHTMLFile($url);
$table = $xml->getElementById('machine');
echo $xml->saveXML($table);
?>
Trying to create proper PDF document, using PHP and TCPDF.
Can you help me, how can I use writeHTML function to create and center table, in TCPDF?
Tryed with:
$html = '
<div style="margin-left: auto; margin-right: auto; width: 50%">
<table border="1" width="200" align="center"><tr><td><b>Invoice number: '.$this->xInvoiceNumber.'</b></td></tr></table>
<br />
<table border="1" width="200" align="center"><tr><td>'.$this->xClient.'</td></tr></table>
<br />
</div>
... but no luck.
You have to make a table with 3 columns, set the width for every one of them and in the middle one you have to create your table.
<table>
<tr>
<td style="width:25%"></td>
<td style="width:50%"><table><tr><td>Your content</td></tr></table></td>
<td style="width:25%"></td>
</tr>
</table>
I'm not proud of this method but it's working :)
Ok, so I don't know if there is solution for my problem...
However, I did manage to solve it by using writeHTMLCell funcion, ie.
$this->writeHTMLCell(50, 0, 50, 50, 'cellcontent', 'LRTB', 1, 0, true, 'L');
If somebody can find better solution, please reply.
Tnx!
Try this code; it worked for me:
<table style="width:100%">
<tr>
<td style="width:30%">left margin</td>
<td style="width:40%">
<table border="1" style="width:100%">
<thead>
<tr>
<td style="width:100%" colspan="2"></td>
</tr>
<tr>
<td style="width:40%"><b></b></td>
<td style="width:60%"><b></b></td>
</tr>
</thead>
</table>
</td>
<td style="width:30%">rigth margin</td>
</tr>
</table>
Try replacing your opening div tag with this...
<div style="margin:5px auto; width:50%">
Never done anything like this however, this is the code you would need to center a table that is the cross browser compatible
<div style="text:align:center;">
<table style="margin:0px auto" border="1" width="200" align="center">
<tr>
<td><b>Invoice number: </b></td>
</tr>
</table>
<br />
<table style="margin:0px auto"border="1" width="200" align="center">
<tr>
<td>Client</td>
</tr>
</table>
<br />
</div>
If pdfs support css i would advise styling the html elements using css
table{
border:1px solid black;
margin:0px auto;
text-align:center;
width:200px;
}
Hope this helps!