HTML テーブル_Powernode Java アカデミー
|
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 を更新するときに問題が発生しました
推薦する
反応ループデータの実装（リスト）
まず、バックグラウンドから来るデータをシミュレートしてみましょう。ここでは、コードをわかりやすくする...
マークアップ言語 - 印刷スタイルシート
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
Windows Server 2008 R2 サーバーが理由もなく自動的に再起動する問題の解決策
Windows Server 2008 サーバーが自動的に再起動します。サーバーにログインした後、ど...
MySQL における ${param} と #{param} の違い
${param}によって渡されるパラメータは、テーブル名やフィールド名を渡すなど、SQL文の一部と...
JSでHTML本文のスタイルを変更する
目次1. 本来の定義2. JS操作、幅の変更を例に3. 効果: 幅が変更されました 1. 本来の定義...
Vue が Bibibili のホームページを模倣する際の問題
エンジニアリング構造プロジェクトは2つの部分に分かれています。bilibili-apiはAPIインタ...
CSS3はシームレスなスクロールと手ぶれ防止を実現します
質問画像とテキストのシームレスなスクロールは、一般的に携帯電話では良い効果をもたらしますが、一部のモ...
フォームアクションとonSubmitの例
まず、action はフォームの属性です。HTML5 では必須の属性値として定義されています。onS...
uniapp プロジェクトの最適化方法と提案
目次1. 複雑なページデータ領域をコンポーネントにカプセル化する2. 大きな画像の使用を避ける3. ...
Linux での MySQL 5.7.18 バイナリ パッケージのインストール チュートリアル (デフォルトの構成ファイル my_default.cnf なし)
現在、MySQL を学習中です。私は完全な初心者で、Linux についてはあまり知りません。今後の作...
例を通してBRタグとPタグの違いを理解する
<br />改行タグの使用<br>改行タグ<br>は終わりのない...
Nginx 構成 80 ポート アクセス 8080 とプロジェクト名アドレス メソッド分析
Tomcatはプロジェクトにアクセスします。通常はIP + ポート + プロジェクト名です。 Ngi...
SQL文の最適化の一般的な手順の詳細な説明
序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...
個人履歴書を作成するための HTML の簡単な実装
履歴書コード: XML/HTML コードコンテンツをクリップボードにコピー<!DOCTYPE ...
Reactはconetxtを通じてマルチコンポーネント値転送関数を実装します
この関数の効果はvue的provide/injectに似ています。 contextを通じて反応できる...