在固定行/列位置繪製html元素

我被要求在固定位置（行，列）中繪製html元素（文本，複選框，文本字段）。這裏的例子是如何定位元素。
在固定行/列位置繪製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

...但是，這似乎是由於細胞之間的空間壞的解決方案。通過在其他行的細胞（包含例如圖像）與一個TD方向的第二溶液和<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 字段建議立即進行刪除d在HTML輸出中完全對齊，如下圖所示。

來源

2011-12-14 user1098638

您的ascii-art表不顯示任何「colspan」需求。你想讓它看起來像*那樣的表，還是不同？你可以發佈你的實際標記，理想情況下，一張圖片顯示你想要它看起來像什麼嗎？ – 2011-12-14 20:54:54

您可能更願意使用CSS absolute positioning代替表格來佈置頁面。

來源

2011-12-14 20:58:21

這裏似乎存在誤解，就像在這個例子中，「列」這個詞顯然涉及到一行上的字符位置。據推測，渲染應該對所有字符使用相等的寬度，即使用等寬字體。在這個意義上，列與表列非常不同（這與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草案中有一個建議單位，但尚未實現）。我建議你要求澄清一下：如果佈局真正反映了打字機式的格式，這意味着等寬字符，或者每個列只佔用其自然寬度（根據需要儘可能寬）就可以。

來源

2011-12-15 08:54:13

含有標籤的解決方案不能用於此上下文中，因爲：在標籤之間存在多個必須遵守的空白空間。以下例子是對話框的兩個第一項。

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

在第1行的「：」應該在的位置是：如果它被正確地顯示應該與完全對齊：在變化的結束，但這不是的情況下「」。我甚至用<pre>嘗試瞭解決方案，並用空格填充空格（''），在這裏我又遇到了另一個問題。如果文本字段（大小= 1）與標籤垂直對齊，則由於文本字段的邊框，緊接着文本字段的標籤不會與標籤的第二個字符對齊。我甚至將邊框設置爲0，但仍然保持一個薄邊框。嘗試將複選框與標籤垂直對齊時也存在問題（請參閱附加圖像） http://i.stack.imgur.com/VwfMa.gif

來源

2011-12-15 12:27:23 user1098638

在固定行/列位置繪製html元素

回答

相關問題