HTMLテーブルでcolspanとrowspanをどのように使用しますか？

HTMLテーブル内の行と列をマージする方法がわかりません。

HTMLでそのようなテーブルを作成するのを手伝ってくれませんか？

私はお勧めします：

table {
    empty-cells: show;
    border: 1px solid #000;
}

table td,
table th {
    min-width: 2em;
    min-height: 2em;
    border: 1px solid #000;
}

<table>
    <thead>
        <tr>
            <th rowspan="2"></th>
            <th colspan="4">&nbsp;</th>
        </tr>
        <tr>
            <th>I</th>
            <th>II</th>
            <th>III</th>
            <th>IIII</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
         </tr>
    </tbody>
</table>

参照：

• td要素。
• th要素。
• tbody要素。
• thead要素。
• table要素。

テーブルのレイアウトがどのように機能するのか混乱している場合、それらは基本的にx = 0、y = 0から始まり、どこでも機能します。グラフィックがとても楽しいので、グラフィックで説明しましょう！

テーブルを開始すると、グリッドが作成されます。最初の行とセルは左上隅になります。これを配列ポインタのように考えて、xの増分値ごとに右に移動し、yの増分値ごとに下に移動します。

最初の行では、2つのセルのみを定義しています。1つは2行下に、もう1つは4列にまたがっています。したがって、最初の行の終わりに到達すると、次のようになります。

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
</table>

行が終了したので、「配列ポインタ」が次の行にジャンプします。xの位置0はすでに前のセルによって占められているため、xは位置1にジャンプしてセルへの入力を開始します。*行間隔の違いに関する注意を参照してください。

この行には4つのセルがあり、すべて1x1ブロックで、その上の行と同じ幅を埋めています。

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

次の行はすべて1x1セルです。しかし、たとえば、セルを追加した場合はどうなるでしょうか。まあ、それはちょうど右の端から飛び出るでしょう。

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

*しかし、代わりに（余分なセルを追加するのではなく）これらのすべてのセルの行スパンを2にした場合はどうなりますか？ここで検討する必要があるのは、次の行にセルを追加しない場合でも、行が存在している必要がある（空の行であっても）ことです。直後の行に新しいセルを追加しようとすると、一番下の行の最後にセルが追加され始めます。

<table>
    <tr>
        <td rowspan="2"></td>
        <td colspan="4"></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
        <td rowspan="2"></td>
    </tr>
    <tr>
        <td></td>
    </tr>
</table>

テーブル作成の素晴らしい世界をお楽しみください！

誰かが左側と右側の両方で行スパンを探している場合は、次のようにします。

table { 
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

<table>
    <tbody>
    <tr>
        <td rowspan="2">LEFT</td>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
        <td rowspan="2">RIGHT</td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

または、既存の行セットにLEFTとRIGHTを追加する場合は、折りたたんだ状態colspanでそれらをスローすることで同じ結果を得ることができます。

table {
    border-collapse: collapse;
}

td {
    padding: 20px; 
    border: 1px solid black; 
    text-align: center;
}

<table>
    <tbody>
    <tr>
        <td rowspan="3">LEFT</td>
        <td colspan="4" style="padding: 0; border-bottom: solid 1px transparent;"></td>
        <td rowspan="3">RIGHT</td>
    </tr>
    <tr>
        <td> 1 </td>
        <td> 2 </td>
        <td> 3 </td>
        <td> 4 </td>
    </tr>
    <tr>
        <td> 5 </td>
        <td> 6 </td>
        <td> 7 </td>
        <td> 8 </td>
    </tr>
    <tr>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
        <td> - </td>
    </tr>
    </tbody>
</table>

rowspanセルを下colspanに拡張し、横に拡張する場合に使用します。

あなたは使用することができrowspan="n"、それがスパンにするためにtd要素にn行を、そしてcolspan="m"それをまたがる作るためにtd要素のm列が。

最初のtdにはaが必要rowspan="2"で、次のtdにはが必要なようcolspan="4"です。

最初のtdを探しているプロパティはrowspan次のとおりです。 。http //www.angelfire.com/fl5/html-tutorial/tables/tr_code.htm

<table>
<tr><td rowspan="2"></td><td colspan='4'></td></tr>
<tr><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td></tr>
</table>

<style type="text/css">
     table { border:2px black dotted; margin: auto; width: 100%; }
    tr { border: 2px red dashed; }
    td { border: 1px green solid; }
</style>
<table>
    <tr>
        <td rowspan="2">x</td> 
        <td colspan="4">y</td>
    </tr>
    <tr>
        <td>I</td>
        <td>II</td>
        <td>III</td>
        <td>IV</td>
    </tr>
    <tr>
        <td>nothing</td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </tr>
</table>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

<body>
<table>
<tr><td colspan="2" rowspan="2">1</td><td colspan="4">2</td></tr>
<tr><td>3</td><td>3</td><td>3</td><td>3</td></tr>
<tr><td colspan="2">1</td><td>3</td><td>3</td><td>3</td><td>3</td></tr>
</table>
</body>

ColspanとRowspanテーブルは行に分割され、各行はセルに分割されます。状況によっては、テーブルセルが複数の列または行にまたがる（または結合される）必要があります。これらの状況では、Colspan属性またはRowspan属性を使用できます。

Colspan colspan属性は、セルが水平方向にスパン（またはマージ）する列の数を定義します。つまり、行内の2つ以上のセルを1つのセルにマージする必要があります。

<td colspan=2 > 

コルスパンする方法は？

<html>
<body >
    <table border=1 >
        <tr>
            <td colspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td>
                Third Cell
            </td>
            <td>
                Forth Cell
            </td>
        </tr>
    </table>
</body>
</html>

Rowspan rowspan属性は、セルが垂直方向にまたがる行数を指定します。つまり、同じ列の2つ以上のセルを単一のセルとして垂直にマージする必要があります。

<td rowspan=2 >

Rowspanする方法？

<html>
<body >
    <table border=1 >
        <tr>
            <td>
                First Cell
            </td>
            <td rowspan=2 >
                Merged
            </td>
        </tr>
        <tr>
            <td valign=middle>
                Third Cell
            </td>
        </tr>
    </table>
</body>
</html>

同様のロジックの1つにngIfを使用しました。次のとおりです。

<table>
<tr *ngFor="let object of objectData; let i= index;">
<td *ngIf="(i%(object.rowSpan))==0" [attr.rowspan]="object.rowSpan">{{object.value}}</td>
</tr>
</table>

ここでは、モデルオブジェクトから行スパン値を取得しています。

それはあなたのテーブルに似ています

  <table border=1 width=50%>
<tr>
    <td rowspan="2">x</td> 
    <td colspan="4">y</td>
</tr>
<tr>
    <td bgcolor=#FFFF00 >I</td>
    <td>II</td>
    <td bgcolor=#FFFF00>III</td>
    <td>IV</td>
</tr>
<tr>
    <td>empty</td>
    <td bgcolor=#FFFF00>1</td>
    <td>2</td>
    <td bgcolor=#FFFF00>3</td>
    <td>4</td>
</tr>