CODEWITHSUNDEEP
htmlcsscheckboxalignment
Kent Abrio
Kent Abrio

Reputation: 455

i want to align my check boxes like a grid

i want make my check boxes to look cleaner and less space consuming by aligning it like a grid. But i seem to have problem aligning it with my images and also im having trouble with the spacing.

<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 a 1 column table , i would like to divide it to three and align them vertically, im not good at css so please help me

Upvotes: 3

Views: 207

Answers (3)

Tony Ray Tansley
Tony Ray Tansley

Reputation: 669

A better option moving forward (although it will take time to get into this) is to use a responsive framework like zurb foundation which has a block component that alters its state dependant on screen size. This would be perfect for viewing this on mobile.

No disrespect intended but as you seem to be starting out with html and css, I'd get into this as it will speed things up 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>

Upvotes: 2

Tony Ray Tansley
Tony Ray Tansley

Reputation: 669

You can apply width's to your cell's and do something like the following (not 100% what you are trying to achieve so please let me know if you need me to amend)...

<td width="15%">

but if you just want 3 columns where everything aligns 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>

https://jsfiddle.net/tonytansley/czo8rub2/

Upvotes: 2

Jay
Jay

Reputation: 1678

Take a look at this and let me know if it's what you're after.

http://jsfiddle.net/m4r3wve1/

You just need to use less <tr>. Not wrap every individual cell in it's own row.

Upvotes: 2

Related Questions