5

申し訳ありませんが、これはおそらく難しい質問ですが、Word のタブ ボタンを使用するのと同じように HTML を表示するにはどうすればよいですか? 私はこのように表示したい：

header text      header text      Header text  
text in column   text in column   text in column

スペースバーを使用すると、スペースが無視されます。実際には、カミソリ変数を列に入れますが、それが私が作成しようとしているものの一般的な考え方です。

「タブ」機能を表す、またはテキストを列に分割する div タグまたは同様のものがあることは間違いありません-私はそれを知りません!

4

7 に答える 7

9

文字ベースのマークアップではなく、CSS + HTML を使用する必要があります。

<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>
<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>
<div class="column">
    <h2>header text</h2>
    <p>paragraph text</p>
</div>

CSS:

.column {
     width:300px;
     float:left
}
于 2012-10-16T20:34:51.337 に答える
2

これには WebGrid ヘルパーを使用できます (目的がグリッド (列と行を含む) の場合):

WebGrid クラス ドキュメント

<div id="grid">
    @grid.GetHtml(
            headerStyle: "HeaderStyle",
                columns: grid.Columns(
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column"),
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column",
                format: @item["something"]),
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column",
                format: @item["something"]),
            grid.Column(
                columnName: "NameOfDatabaseColumn",
                header: "Name Of Column",
                format: @item["something"])
            )
        )
</div>
于 2012-10-16T21:11:35.230 に答える
2

最終的に HTML テーブルになるかもしれません。

<table>
  <tr>
   <th>header text</th>
   <th>header text</th>
   <th>header text</th>
  </tr>
  <tr>
   <td>text in column</td>
   <td>text in column</td>
   <td>text in column</td>
  </tr>
 </table>

もちろん、少しスタイリングするには、このツールをチェックできます：http://tablestyler.com

于 2012-10-16T20:34:38.527 に答える
0

テキストが表に似ている場合<table>は、別の回答で説明されているとおりです。ただし、テキストが表に似ていない場合は、<pre>要素を試すことができます

<pre>空白を保持し、等幅フォントを使用する整形済みテキストの略です。このようにして、テキストを簡単に整列させることができます。

例：

<pre>
header text      header text      Header text  
text in column   text in column   text in column  
</pre>
于 2015-04-27T11:31:42.367 に答える
0

私が考えることができるいくつかのこと、

1) 「& nbsp;」を使用 (& の後のスペースを削除) HTML の静的テキストでは、これは SPACE に変換されます (数行の静的コンテンツについて話している場合を除き、あまりお勧めしません)

2) テーブルを使用し、テーブルの境界線を非表示にします

ヘッダー テキスト ヘッダー テキスト ヘッダー テキスト
于 2012-10-16T20:43:06.643 に答える