テーブルタグ(TAGS)の詳細な紹介

テーブルタグ(TAGS)の詳細な紹介
テーブルの基本構文

<table>...</table> - テーブルを定義します
<tr> - テーブル行を定義します
<th> - テーブルヘッダーを定義します
<td> - テーブル要素(テーブルの特定のデータ)を定義します

境界線のある表:


コードをコピー
コードは次のとおりです。

<表の境界線>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>
食べ物飲む甘い
B


境界線のない表:

コードをコピー
コードは次のとおりです。

<テーブル>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

食べ物飲む甘い
B

テーブルスパン

複数の列にまたがる表要素 <th colspan=#>


コードをコピー
コードは次のとおりです。

<表の境界線>
<tr><th colspan=3> モーニングメニュー</th>
<tr><th>食べ物</th> <th>飲み物</th> <th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

モーニングメニュー
食べ物飲む甘い
B

複数の行にまたがる表要素 <th rowspan=#>



コードをコピー
コードは次のとおりです。

<表の境界線>
<tr><th rowspan=3> モーニングメニュー</th>
<th>食べ物</th> <td>あ</td></tr>
<tr><th>ドリンク</th> <td>B</td></tr>
<tr><th>甘い</th> <td>C</td></tr>
</テーブル>
モーニングメニュー食べ物
飲むB
甘い

テーブルサイズの設定

<表の境界線=#>

境界線のサイズ設定:


コードをコピー
コードは次のとおりです。

<表の境界線=10>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>
食べ物飲む甘い
B

<表の境界線の幅=# 高さ=#>

テーブルサイズの設定:


コードをコピー
コードは次のとおりです。

<表の境界線の幅=170 高さ=100>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>
食べ物飲む甘い
B

<表の境界線のセル間隔=#>

テーブル要素のギャップ設定:


コードをコピー
コードは次のとおりです。

<表の境界線のセル間隔=10>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>
食べ物飲む甘い
B

<表の境界線のセルパディング=#>

テーブル内部の空白設定:


コードをコピー
コードは次のとおりです。

<表の境界線のセルパディング=10>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>
食べ物飲む甘い
B

表内のテキストの配置/レイアウト

<tr align=#>

<th align=#> #=左、中央、右

<td align=#>

コードをコピー
コードは次のとおりです。

<表の境界線の幅=160>
<tr>
<th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr>
<td align=left>あ</td>
<td align=center>は</td>
<td align=right>C</td>
</テーブル>

食べ物飲む甘い
B

<tr valign=#>

<th valign=#> #=上、中、下、ベースライン

<td valign=#>

コードをコピー
コードは次のとおりです。

<表の境界線の高さ=100>
<tr>
<th>食べ物</th><th>飲み物</th>
<th>甘い</th><th>その他</th>
<tr>
<td valign=top>あ</td>
<td valign=middle>ば</td>
<td valign=bottom>C</td>
<td valign=baseline>だ</td>
</テーブル>

食べ物飲む甘い他の
B

ページ上の表の配置/レイアウト (フローティング テーブル)

<テーブルの位置を左揃え>


コードをコピー
コードは次のとおりです。

<テーブルの位置合わせ="左" 境界線>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

私のお気に入りは…<br> クッキー、チョコレートなど。
食べ物飲む甘い
B

私のお気に入り...
クッキー、チョコレートなど。

<表の配置=右>

食べ物飲む甘い
B

私のお気に入り...
クッキー、チョコレートなど。

<table vspace=# hspace=#> #=スペース値


コードをコピー
コードは次のとおりです。

<テーブルの位置合わせ="左" 境界線 vspace=20 hspace=30>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

私のお気に入りは…<br> クッキー、チョコレートなど。
食べ物飲む甘い
B

私のお気に入り...
クッキー、チョコレートなど。

表のタイトル

<caption align=#> ... </caption> #=左、中央、右

コードをコピー
コードは次のとおりです。

<表の境界線>
<caption align=center>ランチ</caption>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

ランチ

食べ物飲む甘い
B

<caption valign=#> ... </caption> #=上、下

valign=top がデフォルトです。


コードをコピー
コードは次のとおりです。

<表の境界線>
<caption valign=bottom>ランチ</caption>
<tr><th>食べ物</th><th>飲み物</th><th>甘いもの</th>
<tr><td>A</td><td>B</td><td>C</td>
</テーブル>

食べ物飲む甘い
B
ランチ

<<:  JavaScript 上級プログラミング: 変数とスコープ

>>:  体験をデザインする: ボタンには何があるか

推薦する

vue3+threejs を使用して iView 公式サイトのビッグウェーブ特殊効果の例を模倣する

目次序文1. レンダリング2. コード3. 背景画像素材要約する序文Threejs は、Web ベー...

HTML テーブルタグチュートリアル (25): 垂直配置属性 VALIGN

垂直方向では、行の配置を上、中央、下に設定できます。基本的な構文<TR VALIGN=&quo...

MySQL データベース グループ クエリの group by ステートメントの詳細な説明

1: グループ化関数の記述順序 1 選択 ... 2 から ... 3 どこで ... 4 グループ...

VMWare ネットワーク アダプタの 3 つのモードの実装プロセスの分析

3つのモードブリッジ(ブリッジ モード)、NAT(ネットワーク アドレス変換モード)、ホストオンリー...

Vue3 の使用 (パート 1) Vue CLI プロジェクトの作成

目次1. 公式ドキュメント2. Vue CLIプロジェクトを作成する1. Vue CLIをインストー...

Linuxでプロセスが占有するポート番号を表示する

Linux システム管理者にとって、サービスがポートに正しくバインドされているか、またはポートをリッ...

MySQL 8.0.12 の詳細なインストールおよびアンインストール チュートリアル

1. MySQL 8.0.12 バージョンのインストール手順。 1. ダウンロードhttps://d...

Windows で MySQL のルート パスワードをリセットする方法

今日、WordPress がデータベースに接続できないことがわかりました。ウィンドウ サーバーにログ...

MySQL で CURRENT_TIMESTAMP を使用する方法

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

MySQLレジストリをクリアする方法

具体的な方法: 1. [ win+r ] を押して実行ウィンドウを開き、「regedit」と入力して...

Linux の非常に詳細な gcc アップグレード プロセス

目次序文1. 現在のgccバージョン2. gccをインストールする3.gmpのインストール4.MPF...

OpenShift のクイックインストールの詳細な手順

OpenShift 3.9 の最新バージョンを体験する最も早い方法。準備 [root@host ~]...

Dockerがプライベート倉庫Harborを構築する手順

港Harborは、エンタープライズレベルのプライベートDockerイメージリポジトリを構築するための...

MySql データベースのサブクエリと高度なアプリケーションの簡単な分析

MySql データベースのサブクエリ:サブクエリ: 選択クエリ ステートメント内に別の選択ステートメ...

Element PlusはAffixを実装します

目次1. コンポーネントの紹介2. ソースコード分析2.1 テンプレート2.2 スクリプト2.3 実...