HTML テーブルインライン形式の詳細な説明

HTML テーブルインライン形式の詳細な説明

インライン形式

<colgroup>...</colgroup>

属性名 属性値 説明

左揃え
中心
右
ヴァリントップ
真ん中
底
スパン番号 インライン番号

bgcolor 色 背景色

個別のインライン設定

フォーマット: <col> は <colgroup> と同じ機能を持ちます

<!-- 最初の行の DOCTYPE を xhtml に設定すると、colgroup が失敗することに注意してください -->

XML/HTML コードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >   
  2.   
  3. < html   xmlns = "http://www.w3.org/1999/xhtml" >   
  4. <ヘッド>   
  5.      < title >表のインライン形式</ title >   
  6. </ヘッド>   
  7. <本文>   
  8.      <表 セルパディング= "5px"  セル間隔= "0px"  境界線= "1px"  境界線の色= "黒" >   
  9. <!--説明: 2セットのcolgroupタグを使用して、3列目全体を赤で表示するように制御します。
  10. 最初の colgroup のspan = "2"はプレースホルダーに相当するため、3 番目の列 (数学列全体) は赤で表示されます。
  11. 同様に、 span = "3"を設定すると、4 列目 (英語の列全体) が赤で表示されます。
  12.              <列グループ  span = "2" > </ colgroup >   
  13.              <コルグループ  bgcolor = "赤" > </ colgroup >   
  14. -- >   
  15. <!-- < col > は< colgroup >と同じ機能を持ちます
  16. <col>タグを設定すると、 <colgroup>と同じ機能を実現できます。
  17. ここで、 align = "right"を追加して、3 番目の列 (数式列全体) を右揃えに設定します。
  18. -- >   
  19.          <列 スパン= "2"   />   
  20.          <列  bgcolor = "赤"   align = "右"   />   
  21.          <キャプション  align = "left" >生徒の成績表</ caption >   
  22.          < tr >   
  23.              < th >名前</ th >   
  24.              < th >中国語</ th >   
  25.              < th >数学</ th >   
  26.              < th >英語</ th >   
  27.          </tr>​​   
  28.          < tr >   
  29.              < td >張三</ td >   
  30.              < td > 90 </ td >   
  31.              < td > 89 </ td >   
  32.              < td > 99 </ td >   
  33.          </tr>​​   
  34.          < tr >   
  35.              < td >李思</ td >   
  36.              < td > 98 </ td >   
  37.              < td > 92 </ td >   
  38.              < td > 96 </ td >   
  39.          </tr>​​   
  40.          < tr >   
  41.              < td >王武</ td >   
  42.              < td > 92 </ td >   
  43.              < td > 97 </ td >   
  44.              < td > 91 </ td >   
  45.          </tr>​​   
  46.          < tr >   
  47.              < td >合計スコア</ td >   
  48.              < td > 200 </ td >   
  49.              < td > 200 </ td >   
  50.              < td > 200 </ td >   
  51.          </tr>​​   
  52.      </表>   
  53. </本文>   
  54. </html>​​   

以上がエディターがお届けするHTMLテーブルインラインフォーマットの詳細な説明の内容です。お役に立てれば幸いです。123WORDPRESS.COMを応援してくださいね～

<<:  ウェブページの右側に固定されたフローティングレイヤーの実装コード

>>:  CentOS に MySQL 5.5 をインストールするための完全な手順

推薦する

MySQL 5.7.17 のインストールと設定方法のグラフィック チュートリアル (Windows10)

MySQL 5.7.17 のインストールと設定方法の概要最初のステップは、MySQL公式サイトから...

MySQL ユーザーと権限、およびルートパスワードをクラックする方法の例

MySQL ユーザーと権限MySQL には、MySQL と呼ばれるシステムに付属するデータベースがあ...

CSS の新機能には、コントロールページの再描画と再配置の問題が含まれています

新しい CSS プロパティ contain を紹介する前に、読者はページの再描画と再配置が何であるか...

nginxリバースプロキシのyum設定の詳細な手順

パート0 背景社内のイントラネットサーバーは直接インターネットにアクセスすることはできませんが、外部...

JavaScript を使用して動的に生成されるテーブルの詳細な説明

*ページを作成する: 2つの入力ボックスとボタン*コードと手順/* 1. 入力行と列の値を取得する2...

Vue.jsの機能コンポーネントに関する包括的な理解

目次序文React 関数コンポーネントVue (2.x) の機能コンポーネント🌰 例: el-tab...

MySQL を使用してポート 3306 を開いたり変更したり、Ubuntu/Linux 環境でアクセス許可を開く

オペレーティングシステム: Ubuntu 17.04 64ビットMySQL バージョン: MySQL...

MySQL query_cache_type パラメータと使用方法の詳細

MySQL クエリ キャッシュを設定する目的は次のとおりです。クエリ結果をキャッシュしておくと、次回...

効率的な視覚化Nginxログ表示ツール

目次導入インストール表示フィールドフィルターソートキー導入Rhit は、標準フォルダー (gzip ...

React リストバーとショッピングカートコンポーネントの使用の詳細な説明

この記事では、Reactリストバーとショッピングカートコンポーネントの具体的なコードを参考までに紹介...

Linux で Scala 環境を構築し、簡単な Scala プログラムを書く

Linux に Scala 環境をインストールするのは非常に簡単です。Ubuntu 環境であれば、さ...

MySQLクエリ文の実行プロセスの詳細な説明

目次1. クライアントとサーバー間の通信方法2. クエリキャッシュ3. クエリ最適化処理4. クエリ...

ホストサービスにアクセスするDockerでのサービスの実装

目次1. シナリオ2. 解決策3. 結論4. 参考文献1. シナリオ日常の開発およびテスト作業には ...

Nginx がリクエストを処理する際のマッチングルールの詳細な分析

nginx はリクエストを受信すると、まず server_name でサーバーを照合し、次にサーバー...

Vueは製品の拡大鏡効果を実現します

この記事の例では、製品の拡大鏡効果を実現するためのVueの具体的なコードを共有しています。具体的な内...