PHP TCPDF - How do I vertical align text in a table cell?

Question

By default, the values within tables cells (within tables generated by TCPDF) are vertically aligned right at the top of the cell.

Has anyone found a simple method for vertically aligning text to the middle of the cell?

I have found a couple of proposed solutions online but these don't strike me as ideal.

For example one suggestion (http://sourceforge.net/projects/tcpdf/forums/forum/435311/topic/4385696) is to set the contents of each cell using TCPDF's MultiCell() method, but this is a pain when you simply want to write out your HTML code and then generate the PDF.

Another suggestion (http://bytethinker.com/blog/tcpdf-and-vertical-alignment-of-table-cells) is to place spans within each cell and create blank lines with line breaks in these spans in order to force your text down (and thus towards the vertical centre), but this is a bit of a hack.

Has anyone found a better / cleaner way to achieve this? Surely a library this popular would cater for such a common requirement?

Answer 1

If its a static table... you can add invisible text above the contents to push the text down:

<td width="12%" style="text-align:center">
  <div style="font-size:10pt">&nbsp;</div>
  <b>The contents of my cell...</b>
</td>

Adjust the font-size of the &nbsp;to raise or lower the text... Its a hack, but it does work. <br />'s work too... but they will be less accurate...

Answer 2

Remember that TCPDF cannot handle full-blown HTML and CSS the way a browser can. Nicolas has done a good job of rendering the most-used HTML codes. CSS cannot be placed at the top of the document, it must be put inline.

Tables must be formatted completely manually--cells do not auto-size the way they do in a browser. Likewise, you must figure out how tall something is and add <BR> s or size an invisible image to push it down if you want.

Perhaps one day he will add more of this functionality. As it is, I find the class amazing.

Answer 3

The following ways worked for me. 1. Write the below code just above table tag.

<style> td{height: 20px;line-height:10px;}</style>

Note:Height should be double of line-height.

1. Use cellpadding attribute at table level. For eg,

   cellpadding="5"

In both ways you need to adjust the height.

Answer 4

This worked for me :

<td align="center" style="height: 50px;">
<div style="vertical-align: middle;">
<p>This Is My text</p>
</div>
</td>

Answer 5

I wanted to bottom-align some - but not all - cells. I found that simply padding with <br> didn't work.

Instead you need to use &nbsp;<br> - this then pushed the text down.

Answer 6

I have a table with one column having a different font size (cause the numbers are big and wouldn't stay on one line if not made smaller) and the client wants them to be vertically centered in the cells.

After trying all the hacks I have learnt in my history of HTML and CSS and TCPDF every time mocking at me I finally deviced such a clever solution which it didn't anticipat and finally I got the vertical cell alignment more or less into the place ie in the middle of the cell.

I found out that if there is an image in the same cell, TCPDF aligns the text on the bottom-line of the image. So I made an utility script to serve me with a white image of parametrized width and height and put that in front of the text. One can also just make a white image of wanted dimensions and use it but I found it easier to experiment with the script and varying parameters. In my case the wwidth is just 1px, but theoretically one could also push text to the right with the image.

Of course there are some problems with this approach as well but in my case all the numbers are quite well-behaving. If the height of either the centered text or other columns vary heavily it is very difficult to find a good value (though with parametrization one could try to calculate the height needed from the lengths of each cell on the row).

I would still prefer if there could at least be top-padding or top-margin that one could set into the cell (working vertical-align would be even more desirable but even having any tool would make life easier)

Hope this helps even some other poor coder

hank

Answer 7

Use inline styling for the <td> tag, and then vary the percentage to set the text at the suitable position you want on the pdf display. eg

<td style="line-height: 250%;">'. $variable .'</td>

Answer 8

Adding style="line-height:50%;" in image tag works for me. Please give this a try. In my case, I wanted to vertical align image in table cell. You can add div in table cell and can add image or text inside it. Below works for me.

<div align="center"><img src="images/logo_example.png" border="0" height="30" width="30" style="line-height:50%;"/></div>

Answer 9

Maybe with smaller line heights this is a workaround:

<table width="100%" cellpadding="5" cellspacing="0">

cellpadding value is the cell height / 2 . Doesn't look nice if you need more space/height otherwise this will the better solutions: http://bytethinker.com/blog/tcpdf-and-vertical-alignment-of-table-cells

Answer 10

Nest another TABLE and add another ROW. Add an empty TD before the content you want vertically aligned and add a height attribute to it. This should give you granular control on the vertical spacing.

Here's an example:

'<table cellpadding="0" border="0" style="border-collapse: collapse;">' .
    '<tr>' .
    '<td width="148" height="80">' .
    '<img width="128" src="' . "images/gcs_logo.svg" . '"/>' .
    '</td>' .
    '<td style="line-height:14px; font-size:11px;">' .
        '<table cellpadding="0" border="0" style="border-collapse: collapse;">' .
        '<tr style="color:#000000;">' .
        '<td height="23" style="text-decoration:underline;padding:0;"></td>' .
        '</tr>' .
        '<tr style="color:#000000;">' .
        '<td style="padding:0;">18191 Von Karman Avenue<br/>Suite 300<br/>Irvine, California 92612</td>' .
        '</tr>' .
        '</table>' .
    '</td>' .
    '</tr>' .
    '</table>';

Answer 11

You can add space to your <td> table using &nbsp;<br/>

i found this link maybe can help you

Answer 12

I solved it with a letter inside a span Tag; for example:

<td><span style=\"font-size:16px;color:#FFF;\">|</span>Content</td>

by adjusting the font size I can handle the height of the cell and because the text is always baseline it works.

Answer 13

its worked(cellpadding)...

<table border="1" cellpadding="5" style="font-size:10px;">

 $html .= '<table border="1" cellpadding="5" style="font-size:10px;">'; $html .= '<tr style="font-weight:bold;text-align:center;line-height:11px;" >'; $html .= '<th>School/College Name</th>'; $html .= '<th>Board</th>'; $html .= '<th>Language</th>'; $html .= '<th>Percentage</th>'; $html .= '<th>Place</th>'; $html .= '</tr>'; $html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >'; $html .= '<td style="vertical-align: middle;font-weight:bold;">' . $tenInfo[0]['school_college_name'] . '</td>'; $html .= '<td style="vertical-align: middle">' . $tenInfo[0]['board']. '</td>'; $html .= '<td style="vertical-align: middle">' . $tenInfo[0]['main_lang']. '</td>'; $html .= '<td style="vertical-align: middle">' . $tenInfo[0]['percentage']. '</td>'; $html .= '<td style="vertical-align: middle">' . $tenInfo[0]['school_college_place']. '</td>'; $html .= '</tr>'; $html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >'; $html .= '<td style="vertical-align: middle">' . $plusInfo[0]['school_college_name'] . '</td>'; $html .= '<td style="vertical-align: middle">' . $plusInfo[0]['board']. '</td>'; $html .= '<td style="vertical-align: middle">' . $plusInfo[0]['main_lang']. '</td>'; $html .= '<td style="vertical-align: middle">' . $plusInfo[0]['percentage']. '</td>'; $html .= '<td style="vertical-align: middle">' . $plusInfo[0]['school_college_place']. '</td>'; $html .= '</tr>'; $html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >'; $html .= '<td style="vertical-align: middle">' . $ugInfo[0]['school_college_name'] . '</td>'; $html .= '<td style="vertical-align: middle">' . $ugInfo[0]['board']. '</td>'; $html .= '<td style="vertical-align: middle">' . $ugInfo[0]['main_lang']. '</td>'; $html .= '<td style="vertical-align: middle">' . $ugInfo[0]['percentage']. '</td>'; $html .= '<td style="vertical-align: middle">' . $ugInfo[0]['school_college_place']. '</td>'; $html .= '</tr>'; $html .= '<tr style="text-align:center;line-height:11px;font-weight:bold;font-size:8px;" >'; $html .= '<td>' . $pgInfo[0]['school_college_name'] . '</td>'; $html .= '<td>' . $pgInfo[0]['board']. '</td>'; $html .= '<td>' . $pgInfo[0]['main_lang']. '</td>'; $html .= '<td>' . $pgInfo[0]['percentage']. '</td>'; $html .= '<td>' . $pgInfo[0]['school_college_place']. '</td>'; $html .= '</tr>'; $html .= '</table>';