Display checkbox instead of image inside table table cell - html

Question

I want to align check box with image (barcode) on the left side of that column. What I've tried so far is insert same image in both columns, but hide the one on the right. Instead of image on the right, checkbox is shown. But, it is not aligned with barcode on the left column. Is it possible to do this?
Image size can vary, it is dynamic. That is why I've inserted same image on both columns (same height). On the example all barcode images are of the same size, but it's not necessary the case.
Perhaps someone has better idea to align checkboxes on the right with barcodes on the left?
Here is the example.
The code I have problem with (I want to align this checkbox):
<img src='http://i.imgur.com/4PxPOjx.png' style='visibility:hidden;width:30px;'>
<input type='checkbox'><br/>
<label></label><br/>
Currently it looks like this:

Answer 1

rowspan attribute can be used for your td!
Since, you didnt want to have the rows specifically visible, style the td that contains the barcode with border-bottom-style 0px.
With that, you task would be simplified!
#tblArticles{font-size: 12px !important; font-family: verdana, sans-serif; border-collapse: collapse; width: 100%;}
#tblArticles td{border: 1px solid black;text-align: center;padding: 8px;}
#tblArticles th {border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}
/*#tblArticles tr:nth-child(even) {background-color: #dddddd;}*/</style>
<style>#tblLeft{position:absolute;left:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:40%;}
#tblLeft td{font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;}
#tblLeft th {font-size: 10px !important; border: 1px solid black;text-align: center;padding: 8px;background-color: #dddddd;}</style>
<style>#tblRight{position:absolute;right:0; font-size: 10px !important; font-family: verdana, sans-serif;border-collapse:collapse; width:20%;}
#tblRight td{font-size: 10px !important; text-align: center;padding: 8px;}
<label style='margin-right:20px;'><b>Opomba za dostavo:</b></label>545454<br/>
<label style='margin-right:20px;'><b>Št. zunanje naročilnice:</b></label>fsdfsfd<br/><br/>
<table border="1" id='tblArticles'>
<thead>
<th>Vrsta blaga/storitve</th>
<th>Interna številka</th>
<th>Prodana koda</th>
<th>Količina</th>
<th>EnM</th>
<th>Cena brez DDV</th>
<th>Vrednost brez DDV</th>
<th>DDV</th>
<th>Znesek DDV</th>
<th>Vrednost z DDV</th>
</thead>
<tfoot>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
<tr style='visibility:hidden;'><td></td></tr>
</tfoot>
<tbody>
<tr>
<td rowspan="11"><label>Mali kuharski mojster</label></td>
<td style="border-bottom-style:hidden;">
<img src='http://i.imgur.com/4PxPOjx.png'><br><label>NUdVOVFWIE1L</label><br/>
</td>
<td><input type='checkbox'><br/>
<label></label><br/></td>
<td rowspan="11">11,00</td>
<td rowspan="11">KOM</td>
<td rowspan="11">3221,00 €</td>
<td rowspan="11">35431,00 €</td>
<td rowspan="11">22,00 %</td>
<td rowspan="11">7794,82 €</td>
<td rowspan="11">43225,82 €</td>
</tr>
<tr>
<td style="border-bottom-style:0px;">
<img src='http://i.imgur.com/4PxPOjx.png'><br><label>NUdVOVFWIE1L</label><br/>
</td>
<td><input type='checkbox'><br/>
</td>
</tr>
</tbody>
</table><br/>
<div style='page-break-inside:avoid;margin-bottom: 30px;'>
<label style='position:relative;left:0;font-size:12px;'>Specifikacija obračunanega davka, dokumenta št.:</label><br/>
<div id='divBottom' style='position:relative;width:100%;min-height:160px;'>
<table id='tblLeft'>
<th>Stopnja</th><th>Osnova za DDV</th><th>Znesek DDV</th><th>Vrednost z DDV</th>
<tr>
<td>9,5 %</td><td>0,00 €</td><td>0,00 €</td><td>0,00 €</td>
</tr><tr>
<td>22 %</td><td>37929,10 €</td><td>8344,40 €</td><td>46273,50 €</td>
</tr>
</table>
<table id='tblRight'>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>Skupaj brez DDV:</b></td><td style='text-align:right;'>37929,10 €</td>
</tr>
<tr>
<td style='text-align:left;'><b>Osnova za DDV</b></td><td style='text-align:right;'>37929,10 €</td>
</tr>
<tr style='border-bottom:1px solid black !important;'>
<td style='text-align:left;'><b>DDV:</b></td><td style='text-align:right;'>8344,40 €</td>
</tr>
</table>
<label style='position:absolute;right:80px;bottom:20px;'><b>SKUPAJ:</b></label>
<label style='position:absolute;right:0;bottom:20px;'><b>46273,50 €</b></label>
</div></div><br/><br/><br/>
Hope it helps!

Answer 2

Here you go, working fiddle:
* {
text-align: center;
}
<table style="width:100%">
<tr>
<th>x</th>
<th>y</th>
</tr>
<tr>
<td><img src="http://media.idownloadblog.com/wp-content/uploads/2016/09/Google-Allo-1.0-for-iOS-app-icon-small.png"></td>
<td>
<input type="radio" name="xy" value="xy">
</td>
</tr>
<tr>
<td><img src="https://lh3.googleusercontent.com/S8DKhY39f1jpVy1-JV3qpI_ftuJwJnKjNbRhrVRGi-MQjr6i73JQI3-dmkQ93E0Jb4hT=w300"></td>
<td>
<input type="radio" name="xy" value="xy">
</td>
</tr>
</table>

Answer 3

As per my understanding you may use this code, first run this code by clicking on Run code Snippet button and then verify what was your expectation :
<html>
<body>
<table>
<tr>
<th>
Left Column
</th>
<th>
Right Column
</th>
</tr>
<tr>
<td>
<img src="https://dummyimage.com/240x80/000/fff">
</td>
<td>
<input type="checkbox" style="display:block; margin:0 auto;">
</td>
</tr>
</table>
</body>
</html>

Answer 4

Just make your table properly, rearrange checkboxes and images to they suit the following structure:
<table style="width:100%">
<tr>
<th>Image</th>
<th>Checkbox</th>
</tr>
<tr>
<td><img src="http://placehold.it/200x50" alt="Image"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x100" alt="Image"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x30" alt="Image"></td>
<td><input type="checkbox"></td>
</tr>
</table>
If you face the problem of "merging" cells (as it's done in your first column), take a look on this example:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
td {
text-align: center;
}
img {
vertical-align: top;
}
img ~ label {
display: block;
}
<table style="width:100%">
<thead>
<th>Vrsta blaga/storitve</th>
<th>Interna številka</th>
<th>Prodana koda</th>
</thead>
<tr>
<td rowspan="3">Mali kuharski mojster</td>
<td><img src="http://placehold.it/200x50" alt="Image"><label>NllMUkZGIE1L</label></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x100" alt="Image"><label>SDRNM0Q4IE1L</label></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><img src="http://placehold.it/200x30" alt="Image"><label>RzNCRTJYIE1L</label></td>
<td><input type="checkbox"></td>
</tr>
</table>
Pay attention to "rowspan" attribute!