古代

以前は html の本質を理解するのに少し時間を費やしましたが、今度は独自の html ページを作成してみます。

昔は CSS 連携がなかったため、すべてのレイアウトを HTML タグを通じて実現する必要がありました。現時点では、ページ内のコンテンツの組版をより適切に完了するには、HTML タグとその属性について十分に理解する必要があります。

すべてのビジュアルタグには、左、中央、または右を設定するために使用される一般的な属性 align がありますが、これは水平方向のみをサポートしており、垂直方向はサポートしていません。

ただし、align にはあいまいさが生じやすい問題があります。つまり、ブロックレベルのタグでは、ブロック自体ではなく内部テキストの組版が記述されます。width 属性を持つブロックレベルのタグの場合、ページ上のブロック自体のレイアウト位置を記述します。。。したがって、後のスタイルでは、古い時代に現れたこの種の曖昧さを避けるために、text-align スタイル名が単独で登場しました。

CSDN文盲の老谷のブログ、https://blog.csdn.net/superwfei
老谷の個人コミュニティ、https://bbs.csdn.net/forums/bfba6c5031e6 4c13aa7c60eebe858a5f?category=10003&typeId=3364713

ページレイアウト

CSS が導入される前の HTML レイアウトでは、すべてのレイアウトがシーケンシャルでしたが、古代のページレイアウトの方法を実際の例で見てみましょう。

  <p align="left" style="border:1px solid #ccc;">这里是第一个p，居左</p>
  <p align="center" style="border:1px solid #ccc;">这里是第二个p，居中</p>
  <p align="right" style="border:1px solid #ccc;">这里是第三个p，居右</p>
  <p style="border:1px solid #ccc;overflow:hidden;"><img src="https://img-home.csdnimg.cn/images/20201124032511.png" align="left" /></p>
  <p style="border:1px solid #ccc;overflow:hidden;"><img src="https://img-home.csdnimg.cn/images/20201124032511.png" align="center" /></p>
  <p style="border:1px solid #ccc;overflow:hidden;"><img src="https://img-home.csdnimg.cn/images/20201124032511.png" align="right" /></p>
  <table border="1" width="200" align="left"><tr><td>居左的表格</td></tr></table>
  <table border="1" width="200" align="center"><tr><td>居中的表格</td></tr></table>
  <table border="1" width="200" align="right"><tr><td>居右的表格</td></tr></table>
  <table border="1" width="200" align="center"><tr><td>居中的表格</td></tr></table>
  <table border="1" width="200" align="left"><tr><td>居左的表格</td></tr></table>
  <table border="1" width="200" align="right"><tr><td>居右的表格</td></tr></table>
  <table border="1" width="200" align="center"><tr><td>居中的表格</td></tr></table>

ここに画像の説明を挿入

段落タグ p の場合、align は内部テキストの組版であることがわかります。

イメージタグ img は左右揃えのみで、センタリングは無視されます。

テーブルラベルテーブルの場合、フローティングレイアウトメソッド、つまりスタイルの float:left/center/right メソッドです。

align の影響に加えて、すべてのタグが書き順に従って植字され、最初の段落のテキストが左に、2 番目の段落のテキストが中央に、3 番目の段落のテキストが上から下に順番にレンダリングされていることもわかります。

width 属性を持つタグの場合、align はフローティングレイアウトと同等です。たとえば、次のいくつかのテーブルは、align の設定に従って、異なる位置にレンダリングされます。したがって、最終的にはテーブル 1、2、3、4、5、6、7 を試すのではなく、図に示すレイアウトが試行されることになります。

フローティングレイアウトについては、このスタイルが実装されるときに詳しく説明しますが、今日は古代の align を理解するだけで済みます。

テーブルレイアウト

連続したレイアウトに加えて、多くのコンテンツがあり、それらが同じ行にあることを望みますが、それぞれが異なる個別の設定を持っている場合、テーブルの需要が高まります。たとえば、財務レポートでは、最初の行がヘッダーで、すべてのテキストが中央に配置され、次の行が表の内容になります。最初の数列は左側にあり、数値に関する列は右側にあります。ステータスや地域などの情報がいくつかある場合がありますが、習慣に従ってそれらを中心に配置する必要がある場合があります。

それでは、表で使用されているさまざまなタグを見てみましょう。https://www.w3school.com.cn/html/html_tables.asp、なぜ w3school の Web サイトが突然安全でない Web サイトになったのかわかりません。新人チュートリアルにアクセスして関連コンテンツを学ぶこともできます。

列挙すると次のとおりです。

table はテーブルを定義します
thead はテーブルのヘッダーを定義します
th はテーブルのヘッダーのセルを定義します
tbody はテーブルの本体を定義します
tr はテーブルの行を定義します
td はテーブルのセルを定義します

うーん。。。実際、html は厳密には文法的ではないため、老古では table tr th と td のみを使用することが多く、これで十分です。

td タグには valign 属性を追加しましたが、これは名前の通り垂直方向の分布を設定する属性で、最終的に垂直方向の中央揃えが可能になります。ただし、centered 属性は center ではなく、middle です。テーブルを使用してこれらの設定を反映してください

  <table border="1">
	<tr>
		<td width="200" height="100" align="left" valign="top">left top</td>
		<td width="200" height="100" align="center" valign="top">center top</td>
		<td width="200" height="100" align="right" valign="top">right top</td>
	</tr>
	<tr>
		<td width="200" height="100" align="left" valign="middle">left middle</td>
		<td width="200" height="100" align="center" valign="middle">center middle</td>
		<td width="200" height="100" align="right" valign="middle">right middle</td>
	</tr>
	<tr>
		<td width="200" height="100" align="left" valign="bottom">left bottom</td>
		<td width="200" height="100" align="center" valign="bottom">center bottom</td>
		<td width="200" height="100" align="right" valign="bottom">right bottom</td>
	</tr>
  </table>

ここに画像の説明を挿入
さて、align のあいまいさが再び現れます。td には width と align の両方がありますが、float ではなく p と同じです。

セルを結合します

もちろん、これだけではテーブルレイアウト方式は普及していませんが、彼の最大の利点はセルを結合してより複雑なレイアウト方式を実行できることです。

td の属性の中には、rowspan と Colspan という 2 つの特別な属性があります。これらはそれぞれ現在のセルを記述し、複数の行と列を占める必要があります。このプロパティが設定されていない場合、デフォルト値は 1 です。

簡単な HTML の例を見てみましょう。

  <table border="1">
	<tr>
		<td colspan="2" width="100" height="50">一个两列的单元格</td>
		<td rowspan="2" width="50" height="100">一个两行的单元格</td>
	</tr>
	<tr>
		<td rowspan="2" width="50" height="100">一个两行的单元格</td>
		<td>中间空出的单元格</td>
	</tr>
	<tr>
		<td colspan="2" width="100" height="50">一个两列的单元格</td>
	</tr>
  </table>

ここに画像の説明を挿入
セルを結合できるため、古代では、多くの複雑な組版が表を使用して行われていました。切り出す必要がある列と行の数、および各グリッドが占める必要がある量を数えるだけで、必要なレイアウトを作成できます。

テーブルレイアウトの廃止

しかし、なぜ現在、テーブルで作成されたレイアウトページは基本的に表示されないのでしょうか。

これにはテーブルのレンダリング方法が関係します。p を含む他のタグが厳密に一致して閉じられていない場合でも、下方向にレンダリングを続行できます。ただし、テーブルの特殊性により、テーブルが終了タグに触れていない場合は、の場合は、HTML ドキュメントの最後まで読んで、これが表の終わりであることを示す必要があります。そうすれば、表をレンダリングしてページに表示できるようになります。

昔は、ネットワークの速度の関係で、大きなテーブルが存在することがよくありましたが、ネットワークの速度による送信の遅さにより、テーブルの前のコンテンツとページ上のレンダリングが終了し、テーブルが表示されている間に、テーブルが表示されなくなりました。テーブルの終了タグがタッチされていないため、テーブルのコンテンツのレンダリングが開始されず、長い間待機します。。。。興味があれば、2000kb を超えるテーブル HTML ページを作成し、同じコンテンツを含むテーブルのないページでテストしてください。

したがって、スタイル設定が登場してからは、テーブルレイアウトの方法は徐々に皆から排除されていきましたが、これは機能が弱いのではなく、レンダリングのメカニズムの問題が深刻すぎるためです。。。。。