テーブルタグ(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 上級プログラミング: 変数とスコープ

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

推薦する

TypeScript のクラス

目次1. 概要2. シンプルなクラスを定義する3. 継承4. public、private、prot...

MySQLデュアルマスター(マスターマスター)アーキテクチャ構成ソリューション

企業では、データベースの高可用性は常に最優先事項です。多くの中小企業は、MySQL マスター スレー...

Vue + Axios リクエストインターフェース方式とパラメータ渡し方式の詳しい説明

目次1. リクエストを取得する: 2. 投稿リクエスト: 3. 拡張と補足Vue スキャフォールディ...

Vueでルーティング権限を動的に設定する主なアイデア

以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...

JavaScriptがDOMツリーの構築にどのように影響するかについて詳しく説明します。

目次ドキュメント オブジェクト モデル (DOM) DOM と JavaScript DOMツリーの...

Dockerはコンテナにポートを動的に公開します

コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...

MySQL が自動的に再起動する問題の解決方法

序文最近、テスト環境で MySQL データベースが自動的に再起動し続ける問題が発生しました。原因は、...

JavaScript を使用して簡単なアルゴリズムを実行する方法

目次質問1件2つの方法3 実験結果と考察質問1件ご存知のとおり、 Pycharm 、 IDLE 、 ...

Docker MQTT のインストールと使用のチュートリアル

MQTT の紹介MQTT (Message Queuing Telemetry Transport)...

HTML ユーザー登録ページ設定ソースコード

上記の Web ページをデザインします。 <!DOCTYPE html> <htm...

MySQL 8.0.17 winx64 (Navicat 付き) 手動構成バージョンのインストール チュートリアル図

1. ダウンロードアドレス: mysql-8.0.17-winx64ダウンロードして解凍する2. フ...

Ubuntu LinuxにOracle Java 14をインストールする方法

最近、Oracle は Java 14 (または Oracle JDK 14) の一般公開を発表しま...

MySQL 起動エラー InnoDB: ロックできません/ibdata1 エラー

OS X 環境で MySQL を起動すると、エラー メッセージが表示されます。 016-03-03T...

ウェブデザインの教育または学習プログラム

セクションコース内容営業時間1 ウェブデザインの概要2 2 HTML 基本タグとフォーマットタグ 2...