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

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

推薦する

MySQLは既存のコンテンツを保持し、後でコンテンツを追加します

このコマンドは、データ テーブル ff_vod を変更し、vod_url フィールドの内容の後に 9...

Vue echarts は棒グラフの動的な表示を実現します

この記事では、棒グラフの動的な表示を実現するためのvue echartsの具体的なコードを参考までに...

Dockerコンテナの入退出方法の詳細な説明

1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...

【Webデザイン】E-WebTemplates の美しい海外の Web ページ テンプレート (FLASH+PSD ソース ファイル+HTML) を共有します

これらはすべて海外のE-WebTemplates WebサイトからのWebページテンプレートであり、...

フレームセットを使用してワイドスクリーンを中央に配置するためのヒントを共有する

コードをコピーコードは次のとおりです。 <フレームセット cols="*,1280,...

子ども向けウェブサイトの視覚構造レイアウト設計手法の分析

1. 温かくて優しい関連アドレス: http://www.web-designers.cn/post...

Windows での Apache+Tomcat7 負荷分散構成方法の詳細な説明

準備Windows Server 2008 R2 Enterprise (2.40GH、8GB、64...

MySQL 8.0 のデフォルトのデータディレクトリを変更する (設定なしの簡単な操作)

使用シナリオ: Alibaba Cloud を使用しており、データディスクを別途購入しました (大容...

MySQL マルチバージョン同時実行制御 MVCC の詳細な研究

MVCC MVCC (Multi-Version Concurrency Control) は、マル...

CSS の ::before と ::after 疑似要素について知らないこと

CSS には、一般的には使用されない 2 つの疑似クラス、before と :after があります...

jQueryで劇場の座席選択と予約の効果を実現

jQueryは劇場の座席選択と予約の効果を実現します。参考までに、具体的な内容は次のとおりです。効果...

Windows 10 システムで Mysql8.0.13 のルート パスワードを忘れる方法

1. まずmysqlサービスを停止します管理者としてCMDを開いて閉じるか、Windowsサービスペ...

Nginx 正規表現関連のパラメータとルールの紹介

序文最近、私はクライアントのサーバー構成を支援しており、Nginx 構成ファイルを頻繁に変更していま...

Vue Element-ui テーブルはツリー構造テーブルを実現します

この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...