7

I have a table, one column of which contains only a checkbox and I am currently centering these with

<td style="text-align:center; vertical-align:middle;">
  <input type="checkbox" name="xyz">
</td>

Now I want to add some JS to (de)select all/none, so I want to add a checkbox in my table header row, along with some text

TH is, by default, bold and I am happy leave it so for actual Column header text, bu I was normal text for the "all/none" and then I want a centered checkbox below that.

----------------  
| Search ?   | Next column  
| (all/none) |  
|   [x]      |  

here's my code - how do I get that checkbox to center?

<th>Search?<br>    
    <span class="th_not_bold">(all/none)</span><br>    
    <input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()">  
</th>

3 Answers 3

9

try using

<th> 
<td style="text-align:center; vertical-align:middle;">
<div>Search</div>
    <div class="th_not_bold">(all/none)</div>
    <div><input style="text-align:center; vertical-align:middle" type="checkbox" name="search_all" id="search_all" onClick="ReportAllNoneClicked()"> </div>
</td>
</th>
1
  • 1
    @Mawg - you should always try not to use inline CSS i showed it to u just because you wer using inline CSS. Try using a separate CSS always w3c also says so. makes the structure look more neat and clean
    – Varun
    Nov 22, 2011 at 7:36
3

You would do exactly the same thing you did for your other <td> - you would set text-align center; vertical-align: middle; on the <th>, and you wouldn't need to apply any properties to the checkbox:

Here's an example of the code you'd use:

th{
    text-align: center;
    vertical-align: middle;
}
1

You can use text-align:center. Here is what is looks like: http://jsfiddle.net/RcztD/1/

<html>
<head></head>
<style type="text/css">
    .center{
        text-align:center;
    }
</style>
<body>

    <table border="1">
        <tr>
            <th valign="top" class="center">
                Search?<br />    
                <span class="th_not_bold">(all/none)</span><br />    
                <input type="checkbox" name="search_all" id="search_all onClick="ReportAllNoneClicked()" />  
            </th>
        </tr>
    </table>

</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.