1

I have a jsfiddle here

What I want to do is that I want to add a bit of space next to the text "Number of Replies" so that the text is not too close to the table border on either side. I also want to add a space on the right hand side next to both radio buttons.

How can this be achieved?

Thanks

Improve this question

4 Answers 4

Reset to default
4

If you add padding:10px to your CSS, you can give the elements enough space around them so that they aren't right up against the borders:

#replies td{
    border-collapse:collapse;
    border:1px solid black; 
    padding:10px;    
}​

Here is your updated jsfiddle to give you an idea of what that would look like.

Next, to fix the problem with the radio buttons, put a <span> around both Single and Multiple, and get rid of the space. Also, add a div around each input/span pair. Afterwards, add this to your CSS:

span {
    padding-left:5px;   
}

See this jsfiddle for an example.

Here is the modified HTML:

<tr>
    <td>Number of <br/>Replies: </td>
    <td align="left">
        <div class="td">
            <input type="radio" name="reply" value="single" class="replyBtn" />
            <span>Single</span>
        </div>
        <div class="td">
            <input type="radio" name="reply" value="multiple" class="replyBtn" />            
            <span>Multiple</span>
        </div>
    </td>
</tr>
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Sometimes I think webdevelopers don't have to do anything at all anymore. Just ask on SOFU and the job gets done. Sorry to worry you about this, but still it confuses me that so little efford gets so much help.
@twall - That can only get you so far. There is a glass ceiling in our industry for people who can't step up to the plate and become problem solvers. At least I like to think that anyway... :) Also, not everyone has the same opportunities. If I was an independent freelancer instead of working with other developers in a team-environment, I might not have soaked up the same amount of knowledge I would through collaboration, and I'd likely have more questions myself on StackOverflow. ;)
My gripe with this answer is that span is a) not required, you could put a margin-right on the radio button; and b) not the best element to use, I would be using label instead. In fact label should be used regardless.
Hi @JonP, that was my first inclination too -- to use a margin-right on the radio button. I even tried padding but no luck. The problem I faced is adding the margin or padding pushed the text to the next line. Looking back on it, it was probably because of the extra space in the HTML. Still, this solution also addresses the problem with the text spacing in the left table cell and centers everything a bit better. I'm not a huge fan of the extra markup, but I don't work with tables that often and wasn't sure how valid the existing markup was. Thank you for the feedback, I appreciate it. :)
1

Ignoring using tables for layout, this is how I think it should be done

HTML

<table id="replies">
   <tr>
     <th colspan="2">Replies</th>
   </tr>
   <tr>
      <td>Number of <br/>Replies: </td>
      <td align="left">
          <input type="radio" name="reply" value="single" class="replyBtn" id="reply_single" />
          <label for="reply_single">Single</label><br />
          <input type="radio" name="reply" value="multiple" class="replyBtn" id="reply_multiple" />
          <label for="reply_multiple">Multiple</label>
      </td>
  </tr>
</table>

CSS

#replies td
{
  padding:5px;
  border-collapse:collapse;
  border:1px solid black;    
}

#replies input:radio
{
    margin-right:5px;
}

Fiddle

Improve this answer

3 Comments

Hi Jon, great start! The op did also ask if the "Number of replies" text could have some space on both sides so it's not so close to the border. If you can address that then you definitely have my +1. Just @username ping me :) Good luck!
@jmort253 My code was fine, shame about the fiddle! Now fixed
+1 - Nice. That's what I was shooting for. It was that space that threw me off. Not that I necessarily want to lose the rep, but the op should use this and mark it as the accepted answer. :)
0

How about simple old HTML?

<table cellpadding="3">

Or CSS:

#replies td, #replies th { padding: 3px; }

In this case both TD and TH of this table get this padding (better formatting).

Improve this answer

Comments

0

You may consider making changes to your markup first. Please don't add any text directly to your <td> or<th> tags. There are tags made to add text. Though your browser would render the text and show, but it is not a good practice. Now coming to your Question.. The markup should be like::::

<table id="replies">
<tr>
     <th colspan="2">
         <span>Replies</span>
     </th>
</tr>
<tr>
    <td><span>Number of </span><br/><span>Replies: </span></td>
    <td align="left"><span><input type="radio" name="reply" value="single" class="replyBtn" />Single</span><br /><span>
    <input type="radio" name="reply" value="multiple" class="replyBtn" /> Multiple</span></td>
</tr>
</table>​

And you would just need to add the following to your CSS:::

#replies span{
    margin:0 0 0 5px;
}
​

Please see the JSFIDDLE HERE

Improve this answer

3 Comments

Why should text not be added directly to a td tag? W3C Spec says (for HTML 5 at least) that a mix of flow elements and character data is permissible. w3.org/TR/html-markup/td.html
In this case, the spans are essential for the CSS.
@SimonGibbs I agree they are required for the CSS that is in the answer. What I take issue with is the statement "Please don't add any text to td or th tags". Placing text directly in th and td tags is perfectly valid html and the span in the th tag in the example is completely unnecessary

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.