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 コードを隠します

推薦する

EF (Entity Framework) の挿入または更新データ エラーの解決方法

エラー メッセージ:ストアの更新、挿入、または削除ステートメントが予期しない行数 (0) に影響を与...

Mysql テーブル、列、データベースの追加、削除、変更、クエリの問題の概要

以下は私がまとめた基本的なSQL知識です。主に参考資料として、また将来の他の初心者の助けとして、私自...

MySQL 5.5.27 インストール グラフィック チュートリアル

1. MYSQLのインストール1. ダウンロードしたMySQLインストールファイルmysql-5.5...

さまざまな解像度やブラウザでウェブページを適切に表示する方法

キーコードは次のとおりです。コードをコピーコードは次のとおりです。 html{高さ:100%; }コ...

ドラッグ可能なログインボックスを実現するネイティブJS

この記事では、ネイティブ JS で実装されたドラッグ可能なログイン ボックスを紹介します。その効果は...

EclipseにTomcatサーバー設定を追加する方法

1. ウィンドウ -> 設定を選択してEclipseの設定パネルを開きます。 2. 「設定」ウ...

CocosCreator で http と WebSocket を使用する方法

目次1. HTTPGET 2. HTTP POSTウェブソケット4. Egretのhttpとwebs...

MIME タイプの完全なリスト

MIME タイプとは何ですか? 1. まず、ブラウザがコンテンツを処理する方法を理解する必要がありま...

Docker ビルド kubectl イメージ実装手順

プログラムサービスがgitlab ci/cdと統合されたk8sを使用してデプロイされている場合、gi...

W3C が推奨するモバイル Web マークアップ言語 XHTML Basic 1.1

W3C は最近、「 XHTML Basic1.1 」と「 Mobile Web Best Prac...

Vue の計算プロパティの詳細な説明

目次補間式方法計算された要約する今日は、Vue の計算プロパティについてお話ししましょう。計算プロパ...

MySQL 8.0.11 の詳細なインストール手順

この記事では、参考までにMySQL 8.0.11のインストール手順を紹介します。具体的な内容は次のと...

サーバー同時実行数の推定式と計算方法

最近、サーバーのストレステストを再度行う必要が出てきました。ここでは、最近学んだ見積もりスキームと見...

MySQL5.7 mysqldump バックアップとリカバリの実装

MySQL バックアップコールドバックアップ:停止服務進行備份，即停止數據庫的寫入ホットバックアップ...

Dockerディスク容量不足の問題を解決する

Docker が配置されているサーバーをしばらく稼働させたところ、サーバーのディスク ディレクトリの...