HTML/CSS Table Padding

Question

I'm having a stupid issue using a table, I hardly ever use tables and I'm not sure why the first image has a huge space after it. I tried setting a width, using "-margin" & Padding. I cant find anything to reduce the size.

<tr class="tblpadding">
    <td>Character:</td>
    <td class="tdchar"><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
    <td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
    <td><img src="http://www.xronn.co.uk/pokearena/assets/img/charcter/2.gif"></td>
</tr>

Best to see the fiddle to show the issue - http://jsfiddle.net/uh6j4/1/

Mr. Alien · Accepted Answer · 2013-08-28 12:01:59Z

3

Because the column cell has larger width because of the input type text boxes, just add colspan to that cell

Demo

Also, I just saw that you've inconsistent table cells in your example, so make sure you fix them according to your requirement.

But as far as the explanation goes, you need to use colspan on the column which will contain those images.

Also I would like to point this out, it's invalid to use form element nested as a tr direct child, you should use that inside a td, always validate your markup here before you put your websites live... but as far as the idea goes, the signup form you are trying to build can be designed without tables..

edited Aug 28, 2013 at 12:01

answered Aug 28, 2013 at 11:53

Mr. Alien

158k36 gold badges307 silver badges287 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2598957 Over a year ago

Thanks! got it now appreciate it!

Mr. Alien Over a year ago

@user2598957 You welcome :) also when you are designing, keep the table borders on, just for debugging purposes, once done, you can simply turn them off

avrahamcool · Accepted Answer · 2013-08-28 18:36:27Z

0

actually, you should not be using table for creating a layout in the first place. use div's instead.

to give the organized look that you have here, what you need to do is very simple use min-width on the labels for uniformity.

I've created the same look that your table have , using div's only. if its the same, why bother? because my layout have a flexibility that yours dont have.

take a look here: http://jsfiddle.net/avrahamcool/uh6j4/7/

edited Aug 28, 2013 at 18:36

answered Aug 28, 2013 at 18:25

avrahamcool

14.1k5 gold badges49 silver badges59 bronze badges

Collectives™ on Stack Overflow

HTML/CSS Table Padding

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related