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

推薦する

MySQLデータベースの基礎知識と操作のまとめ

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

HTML チュートリアル、簡単に学べる HTML 言語 (2)

*******************HTML言語入門（パート2）*****************...

Linux ファイアウォールの状態確認方法の例

Linuxファイアウォールの状態を確認する方法1. 基本操作 # ファイアウォールのステータスを表示...

Mysqlは隣接リスト（隣接リスト）を通じてツリー構造を保存します。

以下の内容では、隣接リストを使用してツリー構造を保存する MYSQL のプロセスとソリューションを紹...

Dockerイメージ作成の完全なプロセス

目次序文作成手順CentOSベースイメージを作成するコンテナを作成してカスタマイズするカスタムコンテ...

MySQL Innodb インデックス メカニズムの詳細な紹介

1. インデックスとは何ですか?インデックスは、ストレージ エンジンがレコードをすばやく検索するため...

Win7 での Mysql 5.7.17 winx64 インストール チュートリアル

ソフトウェア バージョンとプラットフォーム: MySQL-5.7.17-winx64、win7 Ho...

負荷分散の基礎知識とnginxを使用した負荷分散の簡単な例

Nginx は、一般的に 7 層の負荷分散に使用できます。この記事では、負荷分散に関する基本的な知識...

2つのボールが交差する粘着効果を実現するCSSサンプルコード

これは純粋に CSS のみを使用して作成されたエフェクトです。簡単に言うと、このエフェクトは画像処理...

MySQLで置換関数を実装するためのいくつかの実用的なシナリオ

REPLACE構文REPLACE(String,from_str,to_str)つまり、String...

vue-admin-template 動的ルーティング実装例

ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...

MySQL の悲観的ロックと楽観的ロックの使用例

悲観的ロック悲観的ロックは、データを悲観的であるとみなします。データをクエリするときに、ロックを追加...

携帯電話番号が合法かどうかを判断するWeChatアプレットのサンプルコード

目次シナリオ効果コード要約するシナリオ登録ページに携帯電話番号を入力し、登録インターフェイスを要求す...

ウェブサイトでページコンテンツや情報を直接コピーできない問題を解決する方法

最近では、多くのウェブサイトでは、ページ上の特定のコンテンツや情報を直接コピーすることは許可されてお...

Mysql の読み取り/書き込み分離期限切れに対する一般的な解決策

MySQLの読み書き分離の落とし穴読み取りと書き込みの分離の主な目的は、メイン データベースの負荷を...