HTMLテーブル結合の具体的な実装方法

著者：Eve Cole 更新時間：2024-12-18 10:51:45

HTMLフォームを作成するとき

これは非常に不公平であることがわかります。これにはセルを結合する必要があります

主な手順:

1. まず、右方向に結合するか (列結合)、下方向に結合するか (行結合) を確認します。

2. 結合する必要があるセルを見つけます。

3. 結合されたセルに内容があるか、位置を占めている場合、結合されたセルはソースコード内で削除できます。

特別な注意:

セルを結合するときに、結合されたセルにコンテンツがある場合、結合には影響しませんが、結合されたセルのコンテンツはまったく処理されないため、セルは自動的に元に戻ります。

解決策: 冗長なセルを削除してください。

メインコード:

複数の行を結合: rowspan="結合されたセルの数"

複数の列を結合:colspan="結合されたセルの数"

詳細な説明:

ターゲットセル:

1: クロス行: 先頭のセルが対象セルとなり、マージコードを記述します。

2: クロス列: 左端のセルがターゲットセルで、マージコードを記述します。

次に、主な手順に従います。

初期形式 <body>
  <table border="1" align="center" width="100%" cellpadding="20" cellpacing="0">
    <tr>
      <th>オールスター情報集</th>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <th></th>
      <th>名前</th>
      <th>性別</th>
      <th>年齢</th>
      <th>趣味</th>
    </tr>
    <tr>
      <td></td>
      <td>兄弟</td>
      <td>男性</td>
      <td>24</td>
      <td>歌って、踊って、ラップして、バスケットボールをする</td>
    </tr>
    <tr>
      <td></td>
      <td>リータン</td>
      <td>男性</td>
      <td>20</td>
      <td>コード測定とシャープな彫刻 5</td>
    </tr>
    <tr>
      <td></td>
      <td>メンレイ</td>
      <td>男性</td>
      <td>27</td>
      <td>名高い剣が塔を盗み、究極のハンターとなる</td>
    </tr>
  </テーブル>
</body>

これは上の写真のように表示されます

行間の結合 (rowspan):次の効果が必要な場合は、rowspan 属性を使用する必要があります。

<本文>
  <table border="1" align="center" width="100%" cellpadding="20" cellpacing="0">
    <tr>
      <th rowspan="5">オールスター情報の収集</th><!-- 要件に従って、タイトルを見つけ、属性 rowspan を書き込み、パラメーター 5 (最初から 5 行をマージすることを意味します) を書き込みます。同時に、各行の最初の列をコメントアウトします -->
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <!-- <th></th> -->
      <th>名前</th>
      <th>性別</th>
      <th>年齢</th>
      <th>趣味</th>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>兄弟</td>
      <td>男性</td>
      <td>24</td>
      <td>歌って、踊って、ラップして、バスケットボールをする</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>リータン</td>
      <td>男性</td>
      <td>20</td>
      <td>コード測定とシャープな彫刻 5</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>メンレイ</td>
      <td>男性</td>
      <td>27</td>
      <td>名高い剣が塔を盗み、究極のハンターとなる</td>
    </tr>
  </テーブル>
</body>

列間のマージ (colspan):次の効果が必要な場合は、colspan 属性を使用する必要があります。

<本文>
  <table border="1" align="center" width="100%" cellpadding="20" cellpacing="0">
    <tr>
      <thcolspan="5">オールスター情報収集</th><!--要件に従って、タイトルを見つけ、属性colspanを書き込み、パラメータ5を書き込みます。これは、最初の列から5番目の列をマージすることを意味します。同時に、各列の最初の行をコメントアウトします -->
      <!-- <td></td>
      <td></td>
      <td></td>
      <td></td> -->
    </tr>
    <tr>
      <!-- <th></th> -->
      <th>名前</th>
      <th>性別</th>
      <th>年齢</th>
      <th>趣味</th>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>兄弟</td>
      <td>男性</td>
      <td>24</td>
      <td>歌って、踊って、ラップして、バスケットボールをする</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>リータン</td>
      <td>男性</td>
      <td>20</td>
      <td>コード測定とシャープな彫刻 5</td>
    </tr>
    <tr>
      <!-- <td></td> -->
      <td>メンレイ</td>
      <td>男性</td>
      <td>27</td>
      <td>名高い剣が塔を盗み、究極のハンターとなる</td>
    </tr>
  </テーブル>
</body>

HTML テーブルマージの具体的な実装に関するこの記事はこれで終わりです。関連する HTML テーブルマージの内容については、downcodes.com で以前の記事を検索するか、今後も downcodes をサポートしていただければ幸いです。