คุณใช้ colspan และ rowspan ในตาราง HTML อย่างไร

ฉันไม่รู้วิธีผสานแถวและคอลัมน์ภายในตาราง 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 แถวลงและอีกหนึ่งครอบคลุม 4 คอลัมน์ ดังนั้นเมื่อคุณไปถึงจุดสิ้นสุดของแถวแรกจะมีลักษณะดังนี้:

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

เมื่อแถวสิ้นสุดลงแล้ว "ตัวชี้อาร์เรย์" จะกระโดดลงไปที่แถวถัดไป เนื่องจาก x ตำแหน่ง 0 ถูกยึดครองโดยเซลล์ก่อนหน้าแล้ว x จึงข้ามไปที่ตำแหน่ง 1 เพื่อเริ่มเติมเซลล์* ดูหมายเหตุเกี่ยวกับความแตกต่างระหว่าง rowspans

แถวนี้มีสี่เซลล์ในนั้นซึ่งเป็นบล็อก 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>

*แต่ถ้าเราทำแทน (แทนที่จะเพิ่มเซลล์พิเศษ) ทำให้เซลล์เหล่านี้มี rowspan เป็น 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>

เพลิดเพลินไปกับโลกมหัศจรรย์ของการสร้างตาราง!

หากใครกำลังมองหา rowspan ทั้งทางซ้ายและทางขวาคุณสามารถทำได้ดังนี้:

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 ให้กับ rowset ที่มีอยู่คุณสามารถบรรลุผลลัพธ์เดียวกันได้โดยการโยนเข้าไปโดยมีการยุบ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 ถัดไปต้องการ a 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 กำหนดจำนวนคอลัมน์ที่เซลล์ควรขยาย (หรือผสาน) ในแนวนอน นั่นคือคุณต้องการรวมเซลล์สองเซลล์ขึ้นไปในแถวให้เป็นเซลล์เดียว

<td colspan=2 > 

colspan อย่างไร?

<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 ระบุจำนวนแถวที่เซลล์ควรขยายในแนวตั้ง นั่นคือคุณต้องการรวมสองเซลล์ขึ้นไปในคอลัมน์เดียวกันเป็นเซลล์เดียวในแนวตั้ง

<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>

ฉันใช้ 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>

ที่นี่ฉันได้รับค่า rowspan จากวัตถุโมเดลของฉัน

มันคล้ายกับโต๊ะของคุณ

  <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>