' 鬼ごっこ。 「td」要素で「rowspan」属性を使用するにはどうすればよいですか?
「rowspan」属性と「td」要素の関係をよりわかりやすく説明します。以下のステップバイステップのガイドに従って、実際の例を見てみましょう。
ステップ 1: HTML でのテーブルの作成
まず、「」を使用してテーブルを作成します。 <テーブル> ' 鬼ごっこ。その中に複数の「」を追加します テーブルに行を挿入し、「 ” タグを使用してセルを作成します。 < スタイル < / スタイル < / 頭 < 体 < テーブル < tr < 番目 従業員ID < / 番目 < 番目 従業員名 < / 番目 < 番目 給料 < / 番目 < / tr < tr < た 1 < / た < た ジョン < / た < た 160,000 < / た < / tr < tr < た 2 < / た < た ジョセフ < / た < た 120,000 < / た < / tr < tr < た 3 < / た < た アンジェラ < / た < た 120,000 < / た < / tr < tr < た 4 < / た < た スカーレット < / た < た 80,000 < / た < / tr < / テーブル < / 体
上記のコード スニペットでは次のようになります。
まず、5 つの行が作成され、いくつかのダミー データが各セルに提供されます。
次に、「 テーブル ”要素を選択し、”を設定します。 崩壊 ” 値を CSS に” ボーダーコラプス ' 財産。
その後、「 国境 ' と ' パディング 」の性質を利用して、ユーザーの視認性を高め、ユーザーにアピールする効果を生み出します。
コードを実行すると、テーブルは次のように表示されます。
上記の出力は、テーブルが作成され、スタイル設定されたことを示しています。
ステップ 2: 「td」要素で「rowspan」属性を使用する
” 行スパン ” 属性は、垂直方向に隣接するセルを結合します。 「」で活用されています。 ”要素/タグ。この属性は値として数値を受け取り、垂直方向に結合されるセルの数を示します。次の隣接セルにはセルの量が 1 つ少ない必要があり、そのスペースは以下に示すように「rowspan」属性によって埋められます。 < 体 テーブル tr 番目 / 番目 番目 / 番目 番目 / 番目 / tr tr た 1 < / た た / た た 160 ,000< / た / tr tr た 2 < / た た / た た 行スパン = 「2」 > 120 ,000< / た / tr tr た 3 < / た た / た / tr tr た 4 < / た た / た た 80 ,000< / た / tr / テーブル / 体 上記のコードでは次のようになります。
「行スパン」は、「」を持つ従業員に関連付けられます。 給料 ”td要素。
「」の価値 2 以下に示すように、隣接する両方のセルに同じデータを設定する「rowspan」属性に「」を指定します。
出力は、2 つのセルが結合され、ユーザーの読みやすさが向上していることを示しています。
結論
” 行スパン ” 属性は” と連動します。 た 」要素を使用して、垂直方向に隣接する複数のセルを結合します。この属性は値として数値を受け取り、結合されるセルの数を示します。同じデータが複数のセルに提供される場合に利用されます。このブログでは、「rowspan」とは何か、およびそれを HTML の「td」要素で使用する方法を説明しました。
