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 を更新するときに問題が発生しました
推薦する
Ubuntu 18.04 で MySQL のインストール時にパスワードが要求されない場合の解決方法
Ubuntu 1804 への MySQL 5.7 のインストールについて詳しく紹介します。 MySQ...
nginx proxy_pass 設定で URL が / で終わる場合と / なしで終わる場合の違いの詳細な説明
nginx が proxy_pass を設定する場合、末尾に "/" がある U...
開発効率を向上させる 20 の JavaScript ヒント
目次1. 配列を宣言して初期化する2. 合計、最小値、最大値を計算する3. 文字列、数値、オブジェク...
設定操作からMySQLへのNULLが見つからない問題を解決する
興味深い発見:合計 1000 件のレコードを含むテーブルがあります。クエリ ステートメントは次のよう...
Debian システムでの自動パッケージ更新の問題を解決する方法
いつから始まったのかはわかりませんが、コンピュータの電源を入れてインターネットに接続するたびに、デー...
JS を使用して Web ページのウォーターフォール レイアウトを実装する方法
目次序文：ウォーターフォールレイアウトとは何ですか?達成方法: 1. 画像を取得する2. 画像の帯域...
ウェブページの読み込み速度を上げる6つのヒント
第二に、キーワードのランキングは、Webページの表示速度にも関係しています（参照：キーワードランキン...
Vue の新しいパートナー TypeScript クイックスタート実践記録
目次1. 公式の足場を使って構築する2. プロジェクトディレクトリ分析3. TypeScript の...
MySQLクエリが遅い理由
目次1. 遅いところはどこですか? 2. 不要なデータをクエリしましたか? 1. 不要なレコードをク...
Docker Compose を使用して ELK を迅速にデプロイする (テスト済みで効果的)
目次1. 概要1.1 定義1.2 機能説明2. ELKを展開する2.1 ディレクトリとファイルを作成...
Linux コンパイル最適化で習得しなければならないいくつかの姿勢のまとめ
01. コンパイルオプションとカーネルコンパイルLinux カーネル (英語: linux kern...
PHP環境構築におけるDockerの柔軟な実装
Docker を使用して、柔軟なオンライン PHP 環境を構築します。場合によっては、他の人がすでに...
Avue でカスタム検索バーを実装し、検索イベントをクリアする実践
目次1. 検索バーの内容をカスタマイズする2. 検索ボタンをカスタマイズする検索バーをカスタマイズし...
Vueライフサイクルの違いの詳細な説明
ライフサイクル分類vue の各コンポーネントは独立しており、各コンポーネントには独自のライフサイクル...
LinuxはNetworkManagerを使用してMACアドレスをランダムに生成します
今では、自宅のソファーに座っていても、外の喫茶店にいても、ノートパソコンの電源を入れてWi-Fiに接...