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 を更新するときに問題が発生しました

推薦する

JS+AJAX は、州、市、地区のドロップダウン リストのリンクを実現します。

この記事では、州、市、地区のドロップダウンリストのリンクを実現するためのJS + AJAXの具体的な...

Linux における SUID、SGID、SBIT の素晴らしい使い方の詳細な説明

序文Linux のファイル権限管理はとにかく素晴らしいです。SUID、SGID、SBIT の機能を確...

長いデータを HTML で表示するときに処理する方法

HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...

mysql8.0.11 winx64 手動インストールと設定チュートリアル

まず、私の日常生活についてお話しします。MySQLの急速なアップデートにより、MySQLはバージョン...

Vue lazyload 画像遅延読み込み例の詳細な説明

ドキュメント: https://github.com/hilongjw/vue-lazyload 1...

XHTML の一般的なタグ

XHTML タグとは何ですか? XHTML タグ要素は、XHTML ドキュメントの基本的なコンポーネ...

要素 el-table テーブルの二次カプセル化 (テーブルの高さの調整付き)

序文会社でのインターンシップ中、フロントエンド開発にはvue+element-uiフレームワークを使...

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例

HTML チェックボックスとラジオボタンスタイルの美化の簡単な例チェックボックス: XML/HTML...

Vueはel-tableを使用して列と行を動的に結合します

この記事の例では、el-tableを使用して列と行を動的にマージするVueの具体的なコードを参考まで...

ウェブサイトを高速化する

パフォーマンスは本当に重要ですか?パフォーマンスは重要であり、誰もがそれを知っています。なぜ私たちは...

Grafana+Prometheus を使用して MySQL サービスのパフォーマンスを監視する

Prometheus (プロメテウスとも呼ばれる) 公式サイト: https://prometheu...

MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)

1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...

MySQL をクリーンにアンインストールする方法 (テスト済みで効果的)

Mysql を完全にアンインストールするにはどうすればいいですか?以下の手順に従って実行してくださ...

Windows 上の Docker にさまざまなソフトウェアをインストールする詳細なプロセス

1. MySQLをインストールする # docker で mysql をダウンロード docker ...

Linux で rsync を使用する方法

目次1. はじめに2. インストール3. 基本的な使い方3.1、-rパラメータ3.2、-aパラメータ...