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 をインストールするための完全な手順

推薦する

CentOS 8 インストール図 (超詳細なチュートリアル)

CentOS 8 が正式にリリースされました! CentOS は Red Hat の再配布ポリシー...

Dockerfileを使用してApacheイメージを作成する方法

目次1. Dockerイメージ2. 既存のイメージに基づいてインスタンスを作成する3. ローカルテン...

Linux システムでキャッシュをクリアする方法の概要

1) キャッシュメカニズムの紹介Linux システムでは、ファイルシステムのパフォーマンスを向上させ...

ウィンドウ環境設定Mysql 5.7.21 windowx64.zip無料インストール版チュートリアル詳細説明

1. 公式サイトのmysqlダウンロードページからmysql-5.7.21-windowx64.zi...

XHTML 入門チュートリアル: シンプルな Web ページの作成

1 分で最初の Web ページを作成します。簡単な Web ページを作ってみましょう。ぜひフォローし...

20個のJavaScriptワンラインコードを共有する

目次1. ブラウザのクッキーの値を取得する2. RGBを16進数に変換する3. クリップボードにコピ...

時間範囲効果を実現するためのJavaScript

この記事では、時間範囲効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します...

CSS でデジタル ページング効果のコードと手順を実装する方法

かなりの数のウェブサイトがデジタルページング効果を使用しています。たとえば、このサイトのページングも...

HTML の 2 つのタブ ナビゲーション間の競合の解決方法

まず問題の説明から始めましょう:同じページで、1 つのタブに float:left が必要で、もう ...

ログインボックスのメールプロンプトを実装するネイティブJS

この記事では、登録またはログイン時に電子メール アドレスを入力する際のドロップダウン プロンプトのネ...

Vue開発ウェブサイトSEO最適化方法の詳細な説明

ページデータの表示には Vue などの js のデータバインディング機構が使用されるため、クローラー...

JavaScript ECharts の使用方法の説明

以前、プロジェクトを行う際に ECharts を使用しました。今日はそれをメモとして整理し、より多く...

Vue の動的コンポーネントと非同期コンポーネントの詳細な理解

1. 動的コンポーネント <!DOCTYPE html> <html> &l...

Vueはコンピュータカメラを呼び出して写真機能を実現します

この記事の例では、コンピュータカメラを呼び出して写真機能を実現するためのvueの具体的なコードを参考...

Vueでルーティング権限を動的に設定する主なアイデア

以前、インターネット上で動的ルーティング設定をいくつか見たことがありましたが、現在のプロジェクトとは...