I want to align my checkboxes as a grid
I want my checkboxes to look cleaner and take up less space by aligning it like a grid. But I seem to have a problem with my images and also I have spacing issues.
<table>
<tr>
<td>
<img src="images/fb.png" height="40px" width="40px">
<input type="checkbox" name="engine" id="engine" value="google">
</td>
</tr>
<tr>
<td>
<img src="images/twit.png" height="40px" width="40px">
<input type="checkbox" name="engine" id="engine" value="yahoo">
</td>
</tr>
<tr>
<td>
<img src="images/googplus.png" height="40px" width="40px">
<input type="checkbox" name="engine" value="bing">
</td>
</tr>
<tr>
<td>
<img src="images/link.png" height="40px" width="40px">
<input type="checkbox" name="engine" value="bing">
</td>
</tr>
<tr>
<td>
<img src="images/pin.png" height="40px" width="40px">
<input type="checkbox" name="engine" value="bing">
</td>
</tr>
<tr>
<td>
<img src="images/del.png" height="40px" width="40px">
<input type="checkbox" name="engine" value="bing">
</td>
</tr>
<tr>
<td>
<img src="images/stumb.png" height="40px" width="55px">
<input type="checkbox" name="engine" value="bing">
</td>
</tr>
<tr>
<td>
<img src="images/diig.png" height="40px" width="40px">
<input type="checkbox" name="engine" value="bing">
</td>
</tr>
</table>
this code is just 1 column table, i would like to split it by three and align vertically, they won't like the css so please help me
source to share
You can apply the width to your cell and do something like the following (not 100% of what you are trying to achieve, so please let me know if you need to change) ...
<td width="15%">
but if you just want 3 columns where all the alignments will do something like ...
<table>
<tr>
<td>
<img src="images/fb.png" height="40px" width="40px">
</td>
<td>
<input type="checkbox" name="engine" id="engine" value="google">
</td>
<td>
Your third column content
</td>
</tr>
<tr>
<td>
<img src="images/twit.png" height="40px" width="40px">
</td>
<td>
<input type="checkbox" name="engine" id="engine" value="yahoo">
</td>
<td>
Your third column content
</td>
</tr>
<tr>
<td>
<img src="images/googplus.png" height="40px" width="40px">
</td>
<td>
<input type="checkbox" name="engine" value="bing">
</td>
<td>
Your third column content
</td>
</tr>
<tr>
<td>
<img src="images/link.png" height="40px" width="40px">
</td>
<td>
<input type="checkbox" name="engine" value="bing">
</td>
<td>
Your third column content
</td>
</tr>
<tr>
<td>
<img src="images/pin.png" height="40px" width="40px">
</td>
<td>
<input type="checkbox" name="engine" value="bing">
</td>
<td>
Your third column content
</td>
</tr>
<tr>
<td>
<img src="images/del.png" height="40px" width="40px">
</td>
<td>
<input type="checkbox" name="engine" value="bing">
</td>
<td>
Your third column content
</td>
</tr>
<tr>
<td>
<img src="images/stumb.png" height="40px" width="55px">
</td>
<td>
<input type="checkbox" name="engine" value="bing">
</td>
<td>
Your third column content
</td>
</tr>
<tr>
<td>
<img src="images/diig.png" height="40px" width="40px">
</td>
<td>
<input type="checkbox" name="engine" value="bing">
</td>
<td>
Your third column content
</td>
</tr>
</table>
source to share
The best way forward (although it will take a while to get into this) is to use a flexible framework like zurb foundation that has one that changes its state depending on the screen size. It would be ideal for viewing this on a mobile phone.
No disrespect, but as you seem to be starting with html and css I would understand that this would speed up the process for you.
You would use something like ...
<ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-3">
<li><!-- Your content goes here --></li>
<li><!-- Your content goes here --></li>
<li><!-- Your content goes here --></li>
<li><!-- Your content goes here --></li>
<li><!-- Your content goes here --></li>
<li><!-- Your content goes here --></li>
</ul>
source to share