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

推薦する

JSでよく使われるデータ処理方法

目次DOM処理配列方法要約するDOM処理DOM はドキュメントの構造化された表現を提供し、スクリプト...

インタラクティブな視覚化 JS ライブラリ gojs の使い方の紹介とヒント

目次1. gojsの紹介2. Gojsのアプリケーションシナリオ3. gojs を選ぶ理由: 4. ...

オンデマンドで Vue コンポーネントを自動的にインポートする方法

目次グローバル登録部分登録ローカル自動登録さまざまなソリューションの比較コンポーネント名について参照...

MySQL 8.0.23 メジャーアップデート (新機能)

著者: Guan Changlong は、Aikesheng の配送サービス部門の DBA です。主...

Linuxファイル削除後にスペースが解放されない問題の詳しい説明

序文システム領域の使用量が大きすぎて消去する必要がある場合、または特定のファイルを消去する必要がある...

JavaScript のカンマ式が含まれている場合について

JavaScript の if ステートメントで英語のカンマ「,」が表示されることがあります。これは...

効率を向上できる Linux コマンドエイリアス 10 個のまとめ

序文Linux 環境で作業するエンジニアは、これらの面倒な命令とパラメータのコマンドラインにきっと驚...

JavaScript配列の簡単な紹介

目次配列の紹介配列リテラル2次元配列要約する配列の紹介配列- Arrayもオブジェクトですこれは通常...

CSS スタイル分類入門（基礎知識）

CSSスタイルの分類1. 内部スタイル ---- インラインスタイルスタイルタグの使用 <ス...

一般的な Dockerfile コマンドの使用方法の紹介

目次01 CM 02 エントリーポイント03 ワークディレクトリ04 環境05 ユーザー06巻07 ...

Vue の img の src 画像アドレスの動的スプライシングの問題について

Vue での img の動的スプライシングを見てみましょう。src 画像アドレス、具体的な内容は次の...

MySQL MyISAM と InnoDB の違い

違い： 1. InnoDB はトランザクションをサポートしていますが、MyISAM はサポートしてい...

初心者向け入門チュートリアル④：サブディレクトリのバインド方法

これが何を意味するのかを理解するには、まずサブディレクトリとは何かを知る必要があります。では、サブデ...

MySQL 5.7.27 winx64 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.27 winx64のインストールと設定方法を参考までに紹介します。...

Vueルーティングコンポーネントでパラメータを渡す8つの方法の詳細な説明

シングルページアプリケーションを開発する場合、特定のルートを入力し、パラメータに基づいてサーバーから...