XHTML 入門チュートリアル: テーブルタグの応用

XHTML 入門チュートリアル: テーブルタグの応用
<br />テーブルは XHTML では扱いにくいタグなので、このセクションで理解するだけで十分です。CSS が普及する前は、テーブルは配置に広く使用されていました。 XHTML では、テーブルを配置することは推奨されていません。W3C は、配置において CSS が <table> を置き換えることができることを期待しています。しかし、実際には、CSS レイアウトを使用するには多くの手書きコードが必要になることが多いため (Dreamweaver などの一般的な Web デザイン ソフトウェアは div の表示を完全にサポートしていません)、多くの Web サイトでホームページのレイアウトに <table> がまだ使用されています。たとえば、Google のその他の製品ページでは、配置にテーブルが使用されています。 ただし、Web が向かっている方向は CSS なので、個人的には CSS を使用してページを配置することをお勧めします。もちろん、テーブルを CSS に置き換えると、初期段階では多くの問題が発生する可能性があります。 テーブルタグ <table>
XHTML では、表を作成するためのタグは <table> です。コードを書くときは、まず <tr> タグを使用して表を行に分割し、次に <td> タグを使用して各行をセルに分割します。手書きのコードだけで表を作成するのは非常に難しく、非効率的です。しかし、Web ページ作成ソフトウェアで表を作成するのは、Word と同じくらい簡単です。行や列などの簡単なプロパティを選択するだけです。ただし、自動生成されたテーブルが要件を満たさず、コード モードで調整する必要がある可能性もあるため、XHTML テーブル タグの具体的な記述方法については、一般的な理解が必要です。 表の境界線のプロパティ
<table> タグには border 属性を設定できます。 border プロパティに値を設定していない場合、ブラウザはデフォルトでテーブルの境界線を表示しません。 表の練習 4 行 2 列のラベルを作成しましょう。コードは次のとおりです: <table border="1">
<tr>
<td>グリッド</td>
<td>グリッド</td>
</tr>
<tr>
<td>グリッド</td>
<td>グリッド</td>
</tr>
<tr>
<td>グリッド</td>
<td>グリッド</td>
</tr>
<tr>
<td>グリッド</td>
<td>グリッド</td>
</tr>
</テーブル>

表示される結果は次のとおりです。上記のコードには、下の 4 行に対応する 4 組の <tr> があることに注意してください。そして、各 <tr> (行) には 2 つの <td> セルがあります。つまり、4 行 2 列の表になります。
このようなグリッド付きの表は、データやその他の情報を一覧表示するには十分ですが、配置に使用される表は通常、より複雑です。もう一度強調しますが、位置決めにテーブルを使用することはお勧めしません。そのため、ここでは <table> について簡単に紹介するだけにします。

<<:  jQuery は呼吸カルーセルを実装します

>>:  Docker-compose は Docker プライベート ウェアハウスのステップを迅速に構築します

推薦する

MySQL準備原理の詳細な説明

準備のメリットPrepare SQL が生成される理由。まず、MySQL サーバー上で SQL を実...

16進カラーコード(完全版)

赤とピンク、およびそれらの 16 進コード。 #990033 #CC6699 #FF6699 #FF...

tomcat ログ ディレクトリ内のログ ファイルの分析 (概要)

tomcat が起動されるたびに、次のログ ファイルがログ ディレクトリに自動的に生成され、日付順...

Ubuntu16.04にclionをインストールするプロセス全体と手順の詳細な説明

CLion のプロセス全体を最初から説明します。CLion は、JetBrains がリリースした新...

MySQLトリガーはPHPプロジェクトで情報のバックアップ、復元、クリアに使用されます。

例: PHP バックグラウンド コードを通じて、従業員情報を削除したり、削除した従業員情報を復元した...

長いデータを HTML で表示するときに処理する方法

HTML で長いデータを表示する場合、マウスをその上に移動するとデータを切り捨てて完全なデータを表示...

CentOS7にPHP7 Redis拡張機能をインストールする方法

導入前回の記事では、Redis をインストールして設定しましたが、まだ終わりではありません。PHP ...

Vue.js を学ぶ際に遭遇する落とし穴

目次クラス void のポイントES6 矢印関数ヴュートファイvue-cli非同期と同期実行と展開ヒ...

CSS3で実装された水平ヘッダーメニュー

結果:実装コードhtml <nav class="dropdownmenu"...

Vueはファイルのアップロードとダウンロードを実装します

この記事では、参考までにVueのファイルのアップロードとダウンロードの具体的なコードを紹介します。具...

一般的なメールボックスで正常に表示できる HTML メールを作成するためのヒント

HTML メールを送信するためのヒント: スタイルを使用してインライン CSS を記述する、使用する...

WAMPにインストールするとMySQLが起動できるが、再起動後に起動できなくなる問題の解決方法

初めてwampをインストールした後、すべてのサービスが正常に使用できますが、再起動するとwampのア...

Mongodb の GUID 表示の問題の詳細な分析

問題を見つける最近、プログラムのストレージを Mongodb に移行したところ、Guid 型が書き込...

MySql 最適化のための my.ini 中国語構成スキームの詳細な説明: InnoDB、4GB メモリ、および複数のクエリ

この記事は、4G メモリ システム用の MySQL 構成ファイル ソリューションです (主に Inn...