HTML の表の行と列を結合する問題の解決策の詳細な説明

私たちが構築しようとしていたウェブサイトには、長い文章だけでなく、多数の表も含まれており、表のレイアウトに問題がありました。

次のような単純な表:

このフォームは比較的シンプルで、単に<tr></tr><td></td>（または<th></th>）です。

コードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a target=_blank href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a target=_blank href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<ヘッド>
<meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
<title>無題のドキュメント</title>
<スタイル>
幅:200px;
   高さ:100px;
   境界線:#000 2px実線;
   マージン:0px;
   パディング:0px;
}
</スタイル>
</head></p><p><body>
<テーブル>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</テーブル>
</本文>
</html>

ただし、スペースが不均等な場合は、colspan (列全体) と rowspan (行全体) を使用する必要があります。

colspan (列全体) と rowspan (行全体) は、surface の意味と同じ意味を持ち、行と列の結合として見ることもできます。

colspan (列全体):

上の図の赤い部分は、セルが 2 つの列にまたがっていることを示しています。
コードは次のとおりです (コードの一部のみ)。

<テーブル>
<tr>
<td colspan="2" style="background:#F00"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</テーブル>

このようなきれいな表が必要な場合は、まず、結合するセルがある行の下の行のセルの数を見積もる必要があります。これにより、結合するセルの数が決まります。

上の写真を例にとると、2行目と3行目のグリッド数は3です。したがって、上の写真の効果を実現したい場合は、1行目と1列目を2列にまたがるようにしたいので、colspan="2"となります。

rowspan (行全体) メソッドは colspan (列全体) メソッドに似ています。

rowspan (行全体) と colspan (列全体) が同時に表示される例:

コードは次のとおりです (コードの一部のみ)。

<テーブル>
<tr>
<番目></番目>
<th colspan="5"></th>
</tr>
<tr>
<番目></番目>
<th <span style="color:#000000;">列スパン</span>="3"></th>
<番目></番目>
<番目></番目>
</tr>
<tr>
<番目></番目>
<番目></番目>
<番目></番目>
<番目></番目>
<番目></番目>
<番目></番目>
</tr>
<tr>
<th rowspan="3"></th>
<番目></番目>
<th colspan="2"></th>
<番目></番目>
<番目></番目>
</tr>
<tr>
<番目></番目>
<th colspan="2"></th>
<番目></番目>
<番目></番目>
</tr>
<tr>
<番目></番目>
<th colspan="2"></th>
<番目></番目>
<番目></番目>
</tr>
</テーブル>
<テーブル>
<tr class="zj">
<th rowspan="4"></th>
<th colspan="8"></th>
</tr>
<tr>
<番目></番目>
<番目></番目>
<番目></番目>
<番目></番目>
<番目></番目>
<番目></番目>
<番目></番目>
<番目></番目>
</tr>
<tr>
<番目></番目>
<th colspan="4"></th>
<番目></番目>
<th colspan="2"></th>
</tr>
<tr>
<番目></番目>
<th colspan="7"></tr>
</テーブル>

html テーブルの行と列の結合の問題を解決する方法に関するこの記事はこれで終わりです。html テーブルの行と列の結合の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: 位置のいくつかの巧妙な応用の詳細な説明:sticky スティッキーポジショニング

>>: Typescriptを使用してローカルストレージをカプセル化する方法