HTML テーブルレイアウト例の説明

HTML テーブルレイアウト例の説明

HTML ドキュメント内の要素は次々に配置され、ブロックレベル要素の前後に改行が追加されるだけで、合理的なレイアウトが作成されます。ただし、私たちが目にする Web ページは特定のルール (通常は複数列) に従ってレイアウトされているため、このレイアウトを実現するには特定の方法を使用する必要があります。通常の解決策は、ブロック要素 <div> またはテーブル (<table>) を使用して Web ページのコンテンツをレイアウトすることです。

レイアウトにテーブルを使用するのは、古いレイアウト ソリューションです。これは推奨されません。表形式のデータを表示するには、常にテーブルを使用する必要があります。

HTML ドキュメント

CSSコードコンテンツをクリップボードにコピー
  1. <!DOCTYPE html>
  2. <html lang= "ja" >
  3. <ヘッド>
  4. <メタ文字セット= "UTF-8" >
  5. <!-- 外部スタイルシートへのリンク -->
  6. <link rel= "スタイルシート" href= "css/mystyle.css" >
  7. <title>島のレストラン</title>
  8. </head>
  9. <本文>
  10. <テーブル id= "コンテナ" >
  11. <!-- ヘッダー -->
  12. <tr>
  13. <td id= "ヘッダー" colspan= "2" >
  14. <h1>注文システム</h1>
  15. </td>
  16. </tr>
  17. <!-- 本文 -->
  18. <tr>
  19. <!-- メニュー -->
  20. <td id= "メニュー" >
  21. <b>料理</b><br>
  22. <div id= "料理" >
  23. キノコ入りチキンシチュー<br>
  24. 自家製豆腐<br>
  25. スパイシーで酸っぱいポテトシュレッド<br>
  26. </div>
  27. </td>
  28. <!-- 目次 -->
  29. <td id= "コンテンツ" >
  30. キノコ入りチキンシチュー：
  31. 若い鶏
  32. </td>
  33. </tr>
  34. <!-- 終了 -->
  35. <tr>
  36. <td id= "footer" colspan= "2" >世俗的な島にあるレストラン</td>
  37. </tr>
  38. </テーブル>
  39. </本文>
  40. </html>
  41.   

CSS ファイル

CSSコードコンテンツをクリップボードにコピー
  1. /*注文システム全体のインターフェース*/   
  2. #コンテナ
  3. {
  4.     幅: 600px ;
  5.     マージン: 100px ;
  6.      /*セルの境界線間の余白を解除します*/   
  7.     境界線の間隔: 0;
  8. }
  9. /*注文システムインターフェースのヘッダー*/   
  10. ＃ヘッダ  
  11. {
  12.     背景色:赤;
  13.     テキスト配置:中央;
  14. }
  15. h1
  16. {
  17.     下マージン: 0px ;
  18. }
  19. /*注文システムインターフェースのメニュー*/   
  20. ＃メニュー  
  21. {
  22.     背景色: #FFD700 ;
  23.     高さ: 200px ;
  24.     幅: 150px ;
  25. }
  26. #料理  
  27. {
  28.     パディング上部: 10px ;
  29.     左パディング: 10px ;
  30.     行の高さ: 20px ;
  31. }
  32. /*注文システムインターフェースの料理の詳細*/   
  33. #コンテンツ
  34. {
  35.     背景色:グレー;
  36.     高さ: 200px ;
  37.     幅: 450px ;
  38. }
  39. /*注文システムインターフェースの終了*/   
  40. #フッター  
  41. {
  42.     背景色:青;
  43.     高さ: 25px ;
  44.     テキスト配置:中央;
  45. }

効果画像:

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。

<<:  MySQLトランザクションが効率に与える影響の分析と概要

>>:  div が隠しテキストを超え、div 部分の向こうの CSS コードを隠します

推薦する

div を下から上にスライドさせる CSS3 の例

1. まず、CSS3 のターゲット セレクターを使用し、a タグを使用して id セレクターを指定し...

Centos7 ベースの Varnish キャッシュ プロキシ サーバーを展開する

1. ワニスの概要1. ワニスの紹介Varnish は、新しいソフトウェア アーキテクチャを使用し、...

Vueのレスポンシブシステムの原理の詳細な説明

目次Vueのレスポンシブシステムの基本原則1. Object.definePropertyの使い方を...

Vue ターンテーブル抽選の簡単な実装

この記事では、ホイール抽選を簡単に実装するためのVueの具体的なコードを参考までに共有します。具体的...

JavaScript キャンバスでカラフルな太陽のハロー効果を実現

この記事では、カラフルな太陽のハロー効果を実現するためのJavaScriptキャンバスの具体的なコー...

Dockerコンテナのログ分析

コンテナログを表示するまず、 docker run -it --rm -d -p 80:80 ngi...

Dockerを使用してサーバー上で複数のPHPバージョンを実行する

PHP7 がリリースされてからかなり時間が経ちますが、パフォーマンスが大幅に向上したことはよく知られ...

MySQL データベースの一般的な基本操作の分析 [データベースの作成、表示、変更、削除]

この記事では、例を使用して、MySQL データベースの一般的な基本操作について説明します。ご参考まで...

Linux seqコマンドの使い方

1. コマンドの紹介seq (シーケンス) コマンドは、指定されたステップ サイズに従って、開始番号...

Linux の ufw ファイアウォールの紹介

Linux のufw (Uncomplicated Firewall) を見て、ファイアウォールに変...

CSSの一般的なプロパティ

CSS の背景: background:#00ffee; //背景色を設定するbackground-...

MySQL データベースは何をしますか?

MySQL はリレーショナル データベース管理システムです。リレーショナル データベースは、すべて...

JS における ES6 継承と ES5 継承の違い

目次継承ES5 プロトタイプ継承ES6 クラス継承両者の違いES5プロトタイプ継承の内部実装ES6 ...

HTML 選択オプション デフォルトの選択方法

オプションに属性 selected = "selected" を追加すると、それ...

CSS3で実装されたダイナミックな星空の背景

結果：実装コードhtml <link href='https://fonts.goog...