Табличное заполнение HTML/CSS

Question

У меня проблема с глупостью с использованием таблицы, я почти никогда не использую таблицы, и я не уверен, почему первое изображение имеет огромное пространство после него. Я попытался установить ширину, используя «-margin» & Padding. Я не могу найти что-нибудь, чтобы уменьшить размер.

<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> 

Лучше увидеть скрипку, чтобы показать проблему - http://jsfiddle.net/uh6j4/1/

Answer 1

Поскольку ячейка столбца имеет большую ширину из-за input type text коробки, просто добавьте colspan в эту ячейку

Demo

Кроме того, я просто увидел, что у вас есть непоследовательные ячейки таблицы в вашем example , поэтому убедитесь, что вы исправите их в соответствии с вашими требованиями.

---

Но насколько объяснение идет, вам нужно использовать colspan на колонке, которая будет содержать эти изображения.

---

Кроме того, я хотел бы указать на это, он недействителен использовать form элемент вложен в качестве прямого потомка tr, вы должны использовать что внутри td, всегда проверять разметку here, прежде чем положить ваши сайты жить .. но, насколько идея идет, форма регистрации, которую вы пытаетесь построить, может быть спроектирована без таблиц.

Answer 2

Фактически, вы не должны использовать таблицу для создания макета в первую очередь. используйте вместо этого div.

Чтобы дать организованный вид, который у вас здесь, вам нужно очень просто использовать min-width на этикетках для единообразия.

Я создал тот же вид, что и ваш стол, используя только div. если его то же самое, зачем беспокоиться? потому что мой макет имеет гибкость, которой у вас нет.

посмотреть здесь: http://jsfiddle.net/avrahamcool/uh6j4/7/