HTMLで表を描くには、表タグを使用します。
ここに例があります。 <html> <ヘッド> <title>HTML 内のテーブル</title> </head> <本文> <p>水平ヘッダー</p> <表の境界線="1"> <tr> <th>名前</th> <th>年齢</th> <th>性別</th> </tr> <tr> <td>ズッド</td> <td>30</td> <td>男性</td> </tr> </テーブル> <p>垂直ヘッダー</p> <表の境界線="1"> <tr> <th>名前</th> <td>秋</td> </tr> <tr> <th>年齢</th> <td>30</td> </tr> <tr> <th>性別</th> <td>女性</td> </tr> </テーブル> </本文> </html> レンダリング 水平ヘッダー
垂直ヘッダー
ボーダーレステーブル テーブルを定義するときに border 属性を指定しないと、テーブルに境界線は表示されません。 <テーブル> <tr><td>zdd</td><td>30</td></tr> <tr><td>ddz</td><td>27</td></tr> </テーブル> レンダリング
空のセル セルにコンテンツが指定されていない場合、セルは空になり、以下に示すように境界線が表示されません。これはあまり美しくありません。
解決したらどうなるでしょうか?方法は、空のセルにスペースを追加することです。 HTML は余分なスペースを無視するため、スペースを直接追加することはできませんが、スペースを表すには nbsp を追加する必要があります。 <表の境界線="1"> <tr><td>zdd</td><td>30</td></tr> <tr><td> </td>20</tr> </テーブル> レンダリング
タイトル付き表 caption 属性を使用しますが、タイトルにスペースを入れることはできないようです。そうしないと、表示時に折り返されてしまいます。 <表の境界線="1"> <caption>私のフォーム</caption> <tr><td>zdd</td><td>30</td></tr> <tr><td> </td><td>20</td></tr> </テーブル> 私のフォーム
行または列にまたがる表 行を区切るにはcolspanを使用します <表の境界線="1"> <tr><th>名前</th><th colspan="2">電話番号</th></tr> ビル・ゲイツ 555 77 854 555 77 855 </テーブル>
rowspan を使用して列を連結する <表の境界線="1"> <tr><th>名前</th><td>ビル・ゲイツ</td></tr> <tr><th rowspan="2">電話</th><td>555 77 854</td></tr> <tr><td>555 77 855</td></tr> </テーブル> ネストされたテーブル テーブル タグはネストできます。つまり、tr タグまたは td タグにテーブル タグを追加することで、テーブル内にテーブルを作成できます。 |
<<: Centos8 で NIS ドメイン サービスをセットアップおよび構成するための詳細な手順
>>: Mysql で自動増分主キー ID を更新するときに問題が発生しました
この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...
序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...
HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...
まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...
ドキュメント: https://github.com/hilongjw/vue-lazyload 1...
XHTML タグとは何ですか? XHTML タグ要素は、XHTML ドキュメントの基本的なコンポーネ...
序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...
HTML チェックボックスとラジオボタンスタイルの美化の簡単な例チェックボックス: XML/HTML...
この記事の例では、el-tableを使用して列と行を動的にマージするVueの具体的なコードを参考まで...
パフォーマンスは本当に重要ですか?パフォーマンスは重要であり、誰もがそれを知っています。なぜ私たちは...
Prometheus (プロメテウスとも呼ばれる) 公式サイト: https://prometheu...
1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...
Mysql を完全にアンインストールするにはどうすればいいですか?以下の手順に従って実行してくださ...
1. MySQLをインストールする # docker で mysql をダウンロード docker ...
目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...