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 행에 걸쳐 있고 다른 하나는 4 열에 걸쳐 있습니다. 따라서 첫 번째 행의 끝에 도달하면 다음과 같이 표시됩니다.

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

행이 종료되었으므로 "배열 포인터"가 다음 행으로 이동합니다. x 위치 0은 이미 이전 셀이 차지 했으므로 x는 위치 1로 점프하여 셀 채우기를 시작합니다. * 행 범위 간의 차이에 대한 참고를 참조하십시오.

이 행에는 모두 1x1 블록 인 4 개의 셀이 있으며 그 위에있는 행의 동일한 너비를 채 웁니다.

<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 속성은 셀이 가로로 확장 (또는 병합)해야하는 열 수를 정의합니다. 즉, 행에있는 두 개 이상의 셀을 단일 셀로 병합하려고합니다.

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