Làm cách nào để bạn sử dụng colspan và rowspan trong các bảng HTML?

Tôi không biết cách hợp nhất các hàng và cột bên trong bảng HTML.

Bạn có thể vui lòng giúp tôi tạo một bảng như vậy trong HTML được không?

Tôi muốn đề nghị:

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>

Người giới thiệu:

• tdphần tử .
• thphần tử .
• tbodyphần tử .
• theadphần tử .
• tablephần tử .

Nếu bạn bối rối về cách bố cục bảng hoạt động, về cơ bản, chúng bắt đầu ở x = 0, y = 0 và hoạt động theo cách của chúng. Hãy giải thích bằng đồ họa, bởi vì chúng rất thú vị!

Khi bạn bắt đầu một bảng, bạn tạo một lưới. Hàng và ô đầu tiên của bạn sẽ nằm ở góc trên cùng bên trái. Hãy coi nó giống như một con trỏ mảng, di chuyển sang phải với mỗi giá trị tăng dần của x và di chuyển xuống với mỗi giá trị tăng dần của y.

Đối với hàng đầu tiên của bạn, bạn chỉ xác định hai ô. Một kéo dài 2 hàng xuống và một kéo dài 4 cột. Vì vậy, khi bạn đến cuối hàng đầu tiên của mình, nó trông giống như sau:

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

Bây giờ hàng đã kết thúc, "con trỏ mảng" sẽ nhảy xuống hàng tiếp theo. Vì vị trí 0 của x đã được ô trước đó chiếm lấy, nên x sẽ nhảy đến vị trí 1 để bắt đầu điền vào ô. * Xem lưu ý về sự khác biệt giữa các nhịp chèo.

Hàng này có bốn ô, tất cả đều là khối 1x1, điền vào cùng chiều rộng của hàng phía trên nó.

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

Hàng tiếp theo là tất cả các ô 1x1. Nhưng, chẳng hạn, nếu bạn thêm một ô thừa thì sao? Chà, nó sẽ bật ra khỏi mép bên phải.

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

* Nhưng điều gì sẽ xảy ra nếu chúng ta thay vào đó (thay vì thêm ô thừa) làm cho tất cả các ô này có sải hàng là 2? Điều bạn cần xem xét ở đây là mặc dù bạn sẽ không thêm bất kỳ ô nào vào hàng tiếp theo, hàng vẫn phải tồn tại (mặc dù đó là một hàng trống). Nếu bạn đã cố gắng thêm các ô mới vào hàng ngay sau đó, bạn sẽ nhận thấy rằng nó sẽ bắt đầu thêm chúng vào cuối hàng dưới cùng.

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

Tận hưởng thế giới tuyệt vời của việc tạo bảng!

Nếu ai đó đang tìm kiếm một sải tay ở cả bên trái VÀ bên phải, đây là cách bạn có thể làm điều đó:

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>

Ngoài ra , nếu bạn muốn thêm LEFT và RIGHT vào một bộ hàng hiện có, bạn có thể đạt được kết quả tương tự bằng cách ném chúng vào với một dấu thu gọn colspanở giữa:

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>

Sử dụng rowspannếu bạn muốn kéo dài ô xuống và colspankéo dài ra.

Bạn có thể sử dụng rowspan="n"trên một phần tử td để làm cho nó kéo dài nhàng và colspan="m"trên một phần tử td để làm cho nó kéo dài mcác cột.

Có vẻ như td đầu tiên của bạn cần a rowspan="2"và td tiếp theo cần a colspan="4".

Thuộc tính bạn đang tìm kiếm td đầu tiên đó là 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 và Rowspan Một bảng được chia thành các hàng và mỗi hàng được chia thành các ô. Trong một số trường hợp, chúng ta cần các Ô Bảng trải dài trên (hoặc hợp nhất) nhiều hơn một cột hoặc hàng. Trong những tình huống này, chúng ta có thể sử dụng thuộc tính Colspan hoặc Rowspan.

Colspan Thuộc tính colspan xác định số cột mà một ô phải trải dài (hoặc hợp nhất) theo chiều ngang. Đó là, bạn muốn hợp nhất hai hoặc nhiều Ô liên tiếp thành một Ô duy nhất.

<td colspan=2 > 

Làm thế nào để 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 Thuộc tính rowspan chỉ định số hàng mà một ô sẽ trải dài theo chiều dọc. Đó là, bạn muốn hợp nhất hai hoặc nhiều Ô trong cùng một cột thành một Ô duy nhất theo chiều dọc.

<td rowspan=2 >

Làm thế nào để 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>

Tôi đã sử dụng ngIf cho một trong những logic tương tự của tôi. nó như sau:

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

ở đây, tôi đang nhận giá trị rowspan từ đối tượng mô hình của mình.

Nó tương tự như bảng của bạn

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