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

推薦する

webpack -v エラー解決

背景webpackのバージョンを確認したいのですが、webpack -vを実行するとエラーが報告され...

JavaScriptは両端キューを実装する

この記事の例では、両端キューを実装するためのJavaScriptの具体的なコードを参考までに共有して...

Ubuntu 18.04 で apt-get ソースを変更する方法

apt-get を使用してインストールすると、非常に遅くなります。国内のソースを変更すると、この問題...

DockerコンテナのIPアドレスを表示する方法

私はずっとDockerにはIPアドレスがないと思っていました。実はDockerのネットワークテンプレ...

JSで実施された機雷掃海プロジェクトの概要

この記事では、JS掃海プロジェクトの概要を参考までに紹介します。具体的な内容は次のとおりです。プロジ...

MySQL におけるデータベース間関連クエリメソッド

ビジネスシナリオ: 異なるデータベース内のテーブルをクエリするたとえば、関連付けられるテーブルは、マ...

Sysbench の MySQL ベンチマーク プロセスの分析

序文1.ベンチマークは、テスト オブジェクトのクラスの特定のパフォーマンス指標の定量的、再現可能、比...

MySQL の replace と replace into の詳細な例 into_Mysql

MySQL の replace と replace into はどちらも頻繁に使用される関数です。...

VMware仮想マシンにdeepin20をインストールする最も完全で詳細なプロセス

仮想マシンソフトウェア: VMware Workstationイメージ: deepin-deskto...

フィルターを使用して画像に透明な CSS を書く方法

フィルターを使用して画像に透明な CSS を書く方法コードをコピーコードは次のとおりです。 html...

Linux カーネル デバイス ドライバーのメモリ管理に関する注意事項

/************************ * Linux メモリ管理 *********...

VMware15 仮想マシン ブリッジ モードでインターネットにアクセスできない問題の解決方法

説明 ソリューションVMware 15 仮想マシン ブリッジ モードではインターネットにアクセスでき...

CSS で実装された円形のプログレスバー

成果を達成する 実装コードhtml <div class="wrap"&g...

CSS の画像パスの問題に関する議論 (同じパッケージ/異なるパッケージ)

CSS ファイルでは、背景を使用する、つまり背景画像を追加する必要がある場合があります。これは通常、...

JavaScript ベースのシンプルな計算機の実装

この記事では、参考までに、簡単な計算機を実装するためのJavaScriptの具体的なコードを紹介しま...