How to align text in a table cell?

<table>
   <tr>
      <td>
         <input type="checkbox" id="41" value="1">   
         Don't overwhelm yourself
         <span style="color:black;float:right">111111</span>
      </td>
   </tr>
</table>

The text 111111 doesn't go to the right.

When I use align:right, it is the same.

<table>
   <tr>
      <td>
         <input type="checkbox" id="41" value="1">   
         Don't overwhelm yourself
         <span style="color:black;align:right">111111</span>
      </td>
   </tr>
</table>

How to solve this pro开发者_如何学Goblem?

<!-- width 100%, so we can see the floating -->
<table style="width:100%">
  <tr>
    <!-- width 100%, so we can see the floating -->
    <td style="width:100%" >

      <!-- float to left -->
      <input style="float:left" type="checkbox" id="41" value="1">    
      <span style="float:left"> Don't overwhelm yourself </span> 

      <!-- float to right -->
      <span style="color:black;float:right">111111</span> 

      <!-- clear floating -->
      <br style="clear:both" /> 
    </td>
  </tr>
</table>

check sample here

The span tag is not a block one (css: display=block;), it is inline. It means that it does not occupy the whole line, and text inside it is not aligned (visually).

Replace your span with div, it will work.

To have different alignments on the same line, you need a bit of CSS tricks:

<div style="float: left;">
    <label><input type="checkbox" id="41" value="1"> Don't overwhelm yourself</label>
    </div>
<div style="float: right;">
    111111
    </div>

Span can't change page flow, so you can't use floats with span.

Just don't create the problem. Assuming you don't have any reason not to use simply 2 table cells.

Also, align never works. You should use text-align.

<table>
  <tr>
    <td>
      <input type="checkbox" id="41" value="1">Don't overwhelm yourself
    </td>
    <td style="color:black;text-align:right">
      111111
    </td>
  </tr>
</table>