HTML テーブル_Powernode Java アカデミー
|
HTMLで表を描くには、表タグを使用します。
ここに例があります。
<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>レンダリング 水平ヘッダー
垂直ヘッダー
ボーダーレステーブル テーブルを定義するときに border 属性を指定しないと、テーブルに境界線は表示されません。
<テーブル>
<tr><td>zdd</td><td>30</td></tr>
<tr><td>ddz</td><td>27</td></tr>
</テーブル>レンダリング
空のセル セルにコンテンツが指定されていない場合、セルは空になり、以下に示すように境界線が表示されません。これはあまり美しくありません。
解決したらどうなるでしょうか？方法は、空のセルにスペースを追加することです。 HTML は余分なスペースを無視するため、スペースを直接追加することはできませんが、スペースを表すには nbsp を追加する必要があります。
<表の境界線="1">
<tr><td>zdd</td><td>30</td></tr>
<tr><td> </td>20</tr>
</テーブル>レンダリング
タイトル付き表 caption 属性を使用しますが、タイトルにスペースを入れることはできないようです。そうしないと、表示時に折り返されてしまいます。
<表の境界線="1">
<caption>私のフォーム</caption>
<tr><td>zdd</td><td>30</td></tr>
<tr><td> </td><td>20</td></tr>
</テーブル>私のフォーム
行または列にまたがる表 行を区切るにはcolspanを使用します <表の境界線="1"> <tr><th>名前</th><th colspan="2">電話番号</th></tr> ビル・ゲイツ 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 を更新するときに問題が発生しました
推薦する
Docker Enterprise Edition を使用して独自のプライベート レジストリ サーバーを構築する
Docker は本当に素晴らしいです。特に、仮想マシンを使用する場合に比べて、Docker イメージ...
Vue ボタンの権限制御の導入
目次1. 手順1. ボタンの権限を定義する2. ストアを定義する3. 権限指示を作成する4. パーミ...
MySQL でのフィルター条件なしのカウントの詳細な説明
カウント（*）成し遂げる1. MyISAM: テーブル内の行の総数をディスク上に保存し、フィルタリン...
MySQL5.7.17 winx64 インストール バージョン構成方法 Windows Server 2008 R2 でのグラフィック チュートリアル
参考までに、Winでmysql5.7をインストールします。具体的な内容は次のとおりです。 @Auth...
MySQL 5.7.21 解凍バージョンのインストールと設定のグラフィックチュートリアル
この記事では、MySQL 5.7.21の解凍版をダウンロードしてインストールする詳細な手順を記録して...
Dockerコンテナがホストポートにアクセスできない場合の解決策
最近、仕事中に問題が発生しました。Docker コンテナがホストの redis にアクセスできず、t...
VMWare15 は Mac OS システムをインストールします (グラフィック チュートリアル)
設置環境WIN10 VMware Workstation Pro 15.0.0 ビルド 101344...
Mac での MySQL と Squel Pro の設定
Node.js の人気に応えて、最近、いくつかのサーバー側機能を実装するために Node.js を使...
WeChatアプレット開発の実践スキル：データの転送と保存
日々の開発で遭遇した様々な問題と、その解決策を閲覧しながら、日々の開発でよく使用するスキルや知識ポイ...
CentOS7でXShellとネットワーク設定を接続する方法
1. Linuxネットワーク構成ネットワークを構成する前に、まずローカル IPv4 アドレスやデフォ...
CentOS 8にJenkinsをインストールする方法
CentOS 8 に Jenkins をインストールするには、root アカウントまたは sudo ...
Vue3 Vue CLI マルチ環境設定
目次1. はじめに2. 切り替え1. 開発および本番環境の設定ファイルを追加する2. 複数の環境をサ...
セマンティクス: Html/Xhtml は本当に標準に準拠していますか?
<br />原文: http://jorux.com/archives/what-is-...
MySQLは現在の日付と時刻を取得する関数の例の詳細な説明
現在の日付 + 時刻 (日付 + 時刻) を取得する関数: now() mysql> now(...
デザインスキルを向上させる良い方法
いわゆる才能（左脳と右脳）つまり、芸術的な才能があるかどうかは、人間の左脳と右脳の分業によって主に決...