Box model confusion - border/padding on form input field inside a table element?

Question

I colour code of different form input fields, according to what their contents should be (mandatory/option/string/integer/float/etc) by using background an dborder.

I would like to have a table showing a key to this, with an example of each. However, some of them are only distinguishable by their borders (e.g, red border on a field which had invalid input when the form has to be resubmitted).

However, the table element <td> hugs the <input type="text" ...>.

It ought to be straightforward, but the box model has always confused me. How do make the table element border be, let's say 8 pixels, away from the input field, for instance, in this:

<td>
  <input type="text" class="input_invalid" value="Error (value)" readonly>
</td>

Answer 1

<td style="padding:8px;"><input type="text" class="input_invalid" value="Error (value)" readonly></td>

http://www.w3.org/TR/CSS2/box.html

The box model can be daunting but at it's most simplest, nearly any element can have margin, border, and padding (in that order, working outwards in).

Most IE7+ browsers do a decent job with basic CSS and you can come up with some pretty interesting layouts once you become accustomed to the box model. DIVs can be simpler than tables once you get the hang of floating/positioning them correctly, but there are still some situations where tables are the best fit for the job. It's up to you to decide.