HTML テーブル_Powernode Java アカデミー

HTML テーブル_Powernode Java アカデミー

HTMLで表を描くには、表タグを使用します。

  • trは行を意味します
  • tdは列を示す
  • th はテーブルヘッダーを意味し、通常は列名に使用されます。

ここに例があります。

<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>

レンダリング

水平ヘッダー

名前
年
性別
ずだ
30
男

垂直ヘッダー

名前
秋
年
30
性別
女性

ボーダーレステーブル

テーブルを定義するときに border 属性を指定しないと、テーブルに境界線は表示されません。

<テーブル>
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>ddz</td><td>27</td></tr>
</テーブル>

レンダリング

ずだ
30
ddz
27

空のセル

セルにコンテンツが指定されていない場合、セルは空になり、以下に示すように境界線が表示されません。これはあまり美しくありません。

ずだ
30
27

解決したらどうなるでしょうか？方法は、空のセルにスペースを追加することです。 HTML は余分なスペースを無視するため、スペースを直接追加することはできませんが、スペースを表すには &nbsp; nbsp を追加する必要があります。

<表の境界線="1">
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>&nbsp;</td>20</tr>
</テーブル>

レンダリング

ずだ
30
20

タイトル付き表

caption 属性を使用しますが、タイトルにスペースを入れることはできないようです。そうしないと、表示時に折り返されてしまいます。

<表の境界線="1">
<caption>私のフォーム</caption>
    <tr><td>zdd</td><td>30</td></tr>
    <tr><td>&nbsp;</td><td>20</td></tr>
</テーブル>

私のフォーム

ずだ
30
20

行または列にまたがる表

行を区切るにはcolspanを使用します

<表の境界線="1">
<tr><th>名前</th><th colspan="2">電話番号</th></tr>
ビル・ゲイツ 555 77 854 555 77 855
</テーブル>

名前
電話
ビル・ゲイツ
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 を更新するときに問題が発生しました

推薦する

Vue.js での VNode の使用

VNodeとはvue.js には VNode クラスがあり、これを使用してさまざまな種類の vnod...

MySQL データベースの型変換のための CAST 関数と CONVERT 関数の説明

MySQL のCAST()およびCONVERT()関数を使用すると、ある型の値を取得し、別の型の値を...

MySQL統計の概要

MySQL は、SQL 解析とクエリ最適化のプロセスを通じて SQL を実行します。パーサーは SQ...

HTML ウェブページ画像タグ

画像タグ <IMG> を挿入します。今日私たちが目にするカラフルなウェブページはすべて、...

AngularJSループオブジェクトプロパティで動的列を実装するアイデアの詳細な説明

動的な列を実現するための Angularjs ループ オブジェクト プロパティ利点: オブジェクトを...

VUE ユニアプリライフサイクルに関する簡単な説明

目次1. アプリケーションライフサイクル2. ページのライフサイクルコンポーネントライフサイクル要約...

10分で始めるCSS3アニメーション

導入アニメーションを使用すると、JavaScript や jQuery に依存せずに、純粋な CSS...

MySQLでスケジュールされたタスクを設定する方法の分析

この記事では、例を使用して、MySQL でスケジュールされたタスクを設定する方法について説明します。...

VueはAmapを使用して都市の位置特定を実現

この記事では、Amapを使用して都市の位置特定を実現するVueの具体的なコードを参考までに共有します...

CSS3はリストの無限スクロール/カルーセル効果を実現します

効果プレビューアイデア現在のリストを最後の項目までスクロールし、すぐに最初の項目に戻ります。問題1....

複数のフィールドを変更するためのMysql更新の構文の詳細な分析

MySQL でレコードを更新すると、構文は正しいのですが、レコードが更新されません...質問文実行前...

Docker でタイムゾーンの問題に対処する方法

背景ここ 2 日間 Docker を使用していたところ、コンテナの起動後に date -R の出力タ...

MySQL 5.7.20 解凍版のインストールとルートパスワードの変更に関するチュートリアル

1. MySQL アーカイブ (解凍版) をダウンロードするURL: https://downloa...

MySQL で CURRENT_TIMESTAMP を使用する方法

目次CURRENT_TIMESTAMPの使用CURRENT_TIMESTAMPを使用したタイムスタン...

JS のオブジェクトリテラルの詳細な説明

目次序文1. オブジェクト構築にプロトタイプを設定する1.1 __proto__ の使用における特殊...