Help with HTML table alignment


#1

So im re-designing my receipt templates using html and so far its looking good. The issue im having is using the table format for my orders with 3 columns, I have qty, item description and price.

2 columns works fine i can easily left align the first column and right align the second as you can see in the output of Sub Total, Total, Cash, Tendered Total and change. The words correctly align to the left and the value no matter how many digits always aligns to the right

Now for my orders with three column i can left align the first (qty) and right align the third (price) but even though ive set the middle column to align left (item description) it instead centres it. I cant work out how to make the middle column align left so it is next to the qty

This is the html for the orders table:

    <div style="font-size:13px;font-family:'Calibri'">
    <table>
    <tr>
    <td align="left">{QUANTITY}x</td><td align="left">{ITEM TAG:Receipt Name} {PORTION: }</td><td align="right">£{TOTAL PRICE}</td>
    </tr>
    </table>
    </div>

Copy of receipt output below, you can see Bulmers Original Bottle is centered and not to the left next to the quantity


#2

You need to set widths , at the moment all 3 columns are auto sizing to fill 1/3 of the row each.

<tr>
<td width="20%">qty</td>
<td width="60%">description</td>
<td width="20%">price</td></tr>

Try setting as above


#3

Yea I tried that and it auto aligns to the left, I tried also addin the align right tag but it didn’t work. I’ll have another look this morning


#4

Have you tried css style widths instead?

<div style="font-size:13px;font-family:'Calibri'">
<table>
<tr>
<td style="width:20%">qty</td>
<td style="width:60%">description</td>
<td style="width:20%">price</td></tr></table>

#5

Yea but neither aligns, I Need first to columns to align left and the end column to align right. If i add left and right align tags to first and third column they work fine but the middle column seems to ignore any alignment tag as whatever I put nothing changes


#6

The text is aligned left just columns are not how you want?
Could you now set a fixed width for each column??


#7

How about

<td style="width:20%; text-align: left">qty</td>
<td style="width:60%; text-align: left">description</td>
<td style="width:20%; text-align: right">price</td>

As JTR says you can also set width in pixels rather than %


#8

So ive tried with fixed pixels and by % and both give the same results, i know the pixels are correct because i use them for the headings qty, item description and price which align perfect

i can get orders to align when not in table but the price at the end goes out of alignment when it changes from 0.00 to 00.00

These are the html for fixed width and %

Fixed width (the bold text on receipt)

Percentage Width (none bold text on receipt)


#9


#10

Heres the html table where it aligns fine apart from the price column when theres a change from 0.00 to 0.00

Which gives these receipt output where the price doesn’t align right


#11

adding columns to the table doesnt work either, the third column doesnt align right

<div style=“font-size:13px;font-family:‘Calibri’”>
<table>
<col align=“left”>
<col align=“left”>
<col align=“right”>
<tr>
<td width=“25”>{QUANTITY}x</td>
<td width=“200”>{ITEM TAG:Receipt Name} {PORTION: }</td>
<td width=“45”>£{TOTAL PRICE}</td>
</tr>
</table>
</div>


#12

have you tried just using the align=“right” on the 3 td only i.e.:

<tr>
<td width=“25”>{QUANTITY}x</td>
<td width=“200”>{ITEM TAG:Receipt Name} {PORTION: }</td>
<td width="45" align=right>£{TOTAL PRICE}</td>
</tr>

#13

Yep it either doesn’t work or moves both the middle and third columns right


#14

The only other suggestion I can think of is to use divs instead of a table.


#15

@emre could this be an issue with the html table tags from your side again? if its a 2 column table i can set the first column left and the second column right so the text correctly prints as you can see in my receipt screen shots above, lines such as Sub Total, Total, change etc are set to two columns so the words (Total etc) print to the left and the values to the right

If i try using a table with 3 columns it wont let you set columns 1 and 2 to align left and the 3rd column to align right. So when i use this for the order lines on the template Qty should align to the left, item description should align to the left of its column and the price should align to the right

If i set columns 1 and 2 to align left and column 3 to align to the right, column one aligns correctly left but setting column 3 to right also moves column 2 to what looks like either right or centre. As you can see ive tried different methods to align the columns html, CSS, using pixel width, using % widths but none of the work to correctly align the columns how they need to be

Any ideas? or could this be another issue at your end with the table tags in the ticket templates?


#16

I solved this using the W00 tags and the standard printer not html. You can space anything any way you like.

https://forum.sambapos.com/t/sambapos-5-1-61-beta/11464/347


#17

Have you used html formatting tags around the W tag to change font etc, as when I do that the W tags don’t work properly and don’t fully justify across the page I couldn’t get them thenroght hand side to move more than 3/4 of the way across when using the html format tags around it


#18

I’ve not used HTML I never had a reason to change font honestly.


#19

Including align=right attribute to a td tag should align content to right. As shown, without quotes.

<td align=right width=45>{TOTAL PRICE}</td>

Let me give a little history. HTML printer implemented to allow changing fonts, underline items easily. What HTML printer does it translating HTML tags one by one to a document printer format (XAML), apply supported attributes etc… As people started to use it to solve language issues on V5 I also added table tag support to html printer. I preferred to name it as HTML by thinking people are familiar with it but that was a bad decision as it gives an impression of full HTML support. Converting HTML to XAML is something really hard so I decided to give direct XAML support for people who needs full design capabilities. So if you need full customization you can prefer to use XAML format by using document printer.


#20

That worked perfect without the quotes thanks @emre

What would be the correct format to print a logo i cant seem to get it to work I thought itd just be:

<BMP>C:\Users\Rick\Documents\Receipt Logo.bmp

but that throws an error
image