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 プライベート ウェアハウスのステップを迅速に構築します

推薦する

Vueフィルターの使い方

目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...

初心者のための入門チュートリアル⑤:ウェブサイト登録はとても簡単、簡単な登録のヒント

スペースを購入してウェブサイトを構築したことがある友人なら、ウェブサイトは正式に開設する前に登録する...

CSS で画像アダプティブ コンテナを実装するいくつかの方法 (要約)

多くの場合、画像をコンテナのサイズに合わせて調整する必要があります。 1. imgタグ方式幅と高さを...

XHTML コードで Marquee タグを使用する方法

フォーラムで、ネットユーザーの jeanjean20 が、Marquee を標準に適合させる方法につ...

Win2008 R2 mysql 5.5 zip 形式 mysql のインストールと設定

Win2008 R2 zip形式のMySQLのインストールと設定1. Baidu MySQL 5.6...

...

CentOS での samba フォルダ共有サーバー構成の詳細な説明

1. はじめに最近、CentOS での開発には多くの不便があることがわかりました。Windows/M...

Nginx リバース プロキシでセッション永続性を実装する 2 つの方法の詳細な説明

1. ip_hash: ip_hash は、送信元アドレス ハッシュ アルゴリズムを使用して、サーバ...

MySQL の文字セット utf8 を utf8mb4 に変更する方法

MySQL 5.5 の場合、文字セットが設定されていない場合、MySQL のデフォルトの文字セットは...

CSSカウンター関連属性の学習の詳細な説明

CSS カウンター属性はほぼすべてのブラウザ (IE8 を含む) でサポートされていますが、あまり使...

Nginx でアクセス頻度、ダウンロード速度、同時接続数を制限する方法

1. アクセス頻度、同時接続、ダウンロード速度を制限するために使用されるモジュールと命令の概要ngx...

MySQLでANDとORを組み合わせる問題を解決する

以下のように表示されます。 SELECT prod_name,prod_price FROM pro...

効率化に役立つ 20 の CSS コーディングのヒント (並べ替え)

この記事では、主要な CSS ウェブサイトで推奨されている 20 個の便利なルールとベスト プラクテ...

Electronで不規則な形状の透明部分をクリックする実装

目次不規則なフォームの実装透明な部分をクリックする不規則なフォームの実装ここでは円形フォームを実装し...

10分でCSS3グリッドレイアウトを理解する

基本的な紹介前回の記事では、CSS3 のフレックスボックスを紹介しました。今日は、CSS3 のもう ...