HTML tablolarında colspan ve rowspan'ı nasıl kullanıyorsunuz?

HTML tablolarındaki satırları ve sütunları nasıl birleştireceğimi bilmiyorum.

HTML'de böyle bir tablo yapmama yardım eder misin?

Ben şunu öneririm:

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>

Referanslar:

• tdöğesi .
• thöğesi .
• tbodyöğesi .
• theadöğesi .
• tableöğesi .

Masa düzenlerinin nasıl çalıştığı konusunda kafanız karıştıysa, temelde x = 0, y = 0'dan başlarlar ve kendi yollarına doğru çalışırlar. Grafiklerle açıklayalım çünkü çok eğlenceliler!

Bir masaya başladığınızda, bir ızgara yaparsınız. İlk satırınız ve hücreniz sol üst köşede olacaktır. Bunu bir dizi işaretçisi gibi düşünün, her artırılmış x değeriyle sağa hareket edin ve her artan y değeri ile aşağı doğru hareket edin.

İlk satırınız için yalnızca iki hücre tanımlıyorsunuz. Biri 2 satır aşağıya ve diğeri 4 sütun boyunca uzanır. Dolayısıyla, ilk sıranızın sonuna geldiğinizde, şuna benzer:

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

Şimdi sıra sona erdiğine göre, "dizi işaretçisi" bir sonraki satıra atlar. X konumu 0 zaten önceki bir hücre tarafından alındığından, x hücreleri doldurmaya başlamak için konum 1'e atlar. * Satır aralıkları arasındaki farkla ilgili nota bakın.

Bu satırın içinde tamamı 1x1 blok olan ve üstündeki satırla aynı genişlikte dolduran dört hücre vardır.

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

Sonraki satırın tamamı 1x1 hücrelerdir. Ancak, örneğin, fazladan bir hücre eklerseniz ne olur? Şey, sadece sağ kenardan fırlar.

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

* Peki ya bunun yerine (fazladan hücre eklemek yerine) tüm bu hücrelerin 2 satır aralığı olmasını sağlasaydık? Burada düşünmeniz gereken şey, bir sonraki satıra daha fazla hücre eklemeyecek olsanız bile, satırın hala var olması gerektiğidir (boş bir satır olsa bile). Hemen sonraki satıra yeni hücreler eklemeyi denediyseniz, bunları alt satırın sonuna eklemeye başlayacağını fark edeceksiniz.

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

Tablo oluşturmanın harika dünyasının tadını çıkarın!

Hem solda hem de sağda bir satır aralığı arayan biri varsa, bunu şu şekilde yapabilirsiniz:

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>

Alternatif olarak , SOL ve SAĞ'ı mevcut bir satır kümesine eklemek istiyorsanız, aynı sonucu, aralarında daraltılmış bir şekilde atarak da elde edebilirsiniz 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>

rowspanHücreleri aşağı colspandoğru genişletmek ve boyunca uzatmak istiyorsanız kullanın .

Sen kullanabilirsiniz rowspan="n"o yayılan yapmak için bir td elemana nsatırları ve colspan="m"bir td elemanı üzerinde onu yayılan yapmak için msütunları.

Görünüşe göre ilk td'nizin a'ya ihtiyacı var rowspan="2"ve sonraki td'nin a'ya ihtiyacı var colspan="4".

Bu ilk td aradığınız mülk 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 ve Rowspan Bir tablo satırlara bölünmüştür ve her satır hücrelere bölünmüştür. Bazı durumlarda, Tablo Hücrelerinin birden fazla sütun veya satıra yayılmasına (veya birleştirilmesine) ihtiyacımız vardır. Bu durumlarda Colspan veya Rowspan niteliklerini kullanabiliriz.

Colspan Colspan özelliği, bir hücrenin yatay olarak yayılması (veya birleştirmesi) gereken sütun sayısını tanımlar. Yani, iki veya daha fazla Hücreyi arka arkaya tek bir Hücreye birleştirmek istiyorsunuz.

<td colspan=2 > 

Colspan nasıl yapılır?

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

Satır aralığı Satır aralığı özelliği, bir hücrenin dikey olarak yayılması gereken satır sayısını belirtir. Yani, aynı sütundaki iki veya daha fazla Hücreyi tek bir Hücre olarak dikey olarak birleştirmek istiyorsunuz.

<td rowspan=2 >

Rowspan nasıl yapılır?

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

Benzer mantığımdan biri için ngIf kullandım. aşağıdaki gibidir:

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

burada, model nesnemden satır aralığı değeri alıyorum.

Masanıza benzer

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