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 を更新するときに問題が発生しました
推薦する
画像を使用してハイパーリンクのパーソナライズされた下線を実現します
画像内に下線付きのリンクが表示されても驚かないでください。実はとても簡単なので、あなたにもできるので...
MySQL 8.0 のデフォルトのデータディレクトリを変更する (設定なしの簡単な操作)
使用シナリオ: Alibaba Cloud を使用しており、データディスクを別途購入しました (大容...
Docker Composeのデプロイと基本的な使い方の詳しい説明
1. Docker Composeの概要Compose は、マルチコンテナ Docker アプリケー...
MySQL カーソルの原理と使用例の分析
この記事では、例を使用して MySQL カーソルの原理と使用方法を説明します。ご参考までに、詳細は以...
VueはOpenLayersを使用してTiandi MapとAmapを読み込み
目次1. 世界地図1. VueにOpenLayersをインストールする2. アマップ1. 世界地図1...
Vueはカウントダウン機能を実装する
この記事の例では、カウントダウン機能を実装するためのVueの具体的なコードを参考までに共有しています...
テキストレイアウトの問題を解決するためにテキストオーバーフローを使用する CSS3 の簡単な分析
基本的な構文text-overflow を使用するには、hight、over-flow:hidden...
MySQL の起動時に InnoDB エンジンが無効になる問題の解決方法
問題を見つける今日、仕事中に、ローカル データベースから仮想マシン CentOS 6.6 上のデータ...
Javascriptはセキュリティ検証に整合性属性を使用します
目次1. スクリプトタグを使用してファイルをインポートする1. ローカルファイルをインポートする2....
JavaScript の isPrototypeOf 関数
目次1. isPrototypeOf()例 1、オブジェクト クラス インスタンス:例 2: Hum...
ブラウザをJavaScriptで対話させる方法
目次1. 最も単純な例2. 音声の速度とピッチをカスタマイズする3. 音量の調整方法4. よく使われ...
MyISAMとInnoDBの違いについてお話しましょう
主な違いは次のとおりです。 1. MySQL はデフォルトで MyISAM を使用します。 2. M...
vue cli で env を使用するガイド
目次序文紹介-公式設定例序文vueCli を使用してプロジェクトを開発したことのある方は、少しがっか...
HTML フォーマットの json のサンプルコード
さっそく、コードを直接投稿します。具体的なコードは次のとおりです。 <!DOCTYPE htm...
動的なデジタル時計を実装するJavaScript
この記事では、JavaScriptで動的なデジタル時計を実装するための具体的なコードを参考までに紹介...