рисунок элементов html в фиксированных строках/столбцах позиции

Question

Мне было предложено нарисовать html-элементы (текст, флажки, текстовые поля) в фиксированных положениях (строка, столбец). В качестве примера можно привести расположение элементов.

row | column | element<br> 
1 | 1  | Title1<br> 
1 | 14  | Text field (size = 20)<br> 
1 | 40  | Tile2<br> 
1 | 50  | Text field (size = 10)<br> 
2 |...<br> 

Я попробовал решение с таблицами следующим

<table> 
    <tr><td colspan="13">Title1</td><td colspan="26">Text field 

... Но это оказалось плохим решением из-за пустого пространства между ячейками. Пустое пространство порождается клетками в других рядах (содержащих изображения, например) 2-й раствор с одной тд и <pre> тег (настройка границы текстового поля до 0 приводят к полям не на 100% вертикально выровненный

Как это можно отобразить такие данные

---

пример того, что я делаю:?

01|01|User     : 
01|25|Text field size = 10 
03|01|Name 1    : 
03|25|Text field size = 30 
04|01|Name 2    : 
04|25|Text field size = 30 
04|25|Text field size = 30 
05|01|Aubreviation   : 
05|25|Text field size = 05 
06|01|User group   : 
06|25|Text field size = 10 
06|37|Text field size = 44 
07|01|Telephone   : 
07|25|Text field size = 20 
08|01|E-mail    : 
08|25|Text field size = 50 
09|01|Company allocation : 
09|25|Text field size = 9 
10|01|Name of printer  : 
10|25|Text field size = 10 
10|37|Message 
11|01|Language code  : 
11|25|Text field size = 2 
13|01|Message delete cycle : 
13|25|Text field size = 9 
13|28|Days 
15|01|SBM mess.delete cyc. : 
15|25|Text field size = 9 
15|28|Days 

Вывод должен выглядеть следующим образом: http://i.stack.imgur.com/MQ1f9.gif The полей Шоул d идеально выровнены на выходе HTML, как показано на рисунке ниже.

Answer 1

Возможно, вам лучше использовать CSS absolute positioning вместо таблиц для раскладки вашей страницы.

Answer 2

Здесь, кажется, есть недоразумение, так как в примере слово «столбец», по-видимому, относится к позиции символа на линии. Предположительно, рендеринг должен использовать равную ширину для всех символов, т. Е. Использовать моноширинный шрифт. Столбец в этом смысле сильно отличается от столбца таблицы (с которым связан colspan).

Обычный способ в HTML будет использовать только

<tr> <td><label for="a1">Title1</label></td> <td><input name="a1" id="a1" size="20"></td> 
    <td><label for="a2">Title1</label></td> <td><input name="a2" id="a2" size="10"></td> </tr> 

При необходимости, ширины столбцов (в HTML смысле) должен быть установлен в CSS, или, возможно, с использованием ширины атрибуты в тегах. Однако нельзя указывать ширину в символах (в проекте CSS3 есть предлагаемая единица, но она не была реализована). Я предлагаю вам прояснить это: если макет действительно отражает форматирование в стиле пишущей машинки, что подразумевает моноширинные символы, или это нормально, что каждый столбец просто занимает свою естественную ширину (насколько это необходимо).

Answer 3

Решение с меткой не может использоваться в этом контексте, поскольку: существует несколько пустых мест между ярлыками, которые необходимо уважать. В качестве примера можно привести две первые записи диалогового окна.

01|01|Part 
01|14|: 
02|01|Change  : 

В строке 1 «:» должен быть в положении: если он правильно отображается она должна быть идеально выровнены с «:» в конце перемен, но это не так. Я даже попробовал решение с <pre> и заполнил пробелы пробелами (''), и здесь у меня возникла еще одна проблема. Если текстовое поле (размер = 1) выровнено по вертикали с меткой, метка, расположенная рядом с текстовым полем, каким-то образом не выравнивается со вторым символом метки из-за границы текстового поля. Я даже установил границу 0, но она все еще сохраняет тонкую границу.также возникает проблема при вертикальном выравнивании флажков с надписями (см. прикрепленное изображение) http://i.stack.imgur.com/VwfMa.gif