HTML 테이블에서 colspan과 rowspan을 어떻게 사용합니까?

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>

---

Use rowspan if you want to extend cells down and colspan to extend across.

---

The property you are looking for that first td is 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>

---

You can use rowspan="n" on a td element to make it span n rows, and colspan="m" on a td element to make it span m columns.

Looks like your first td needs a rowspan="2" and the next td needs a colspan="4".

---

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

---

It is similar to your 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>

---

Colspan and Rowspan A table is divided into rows and each row is divided into cells. In some situations we need the Table Cells span across (or merged) more than one column or row. In these situations we can use Colspan or Rowspan attributes.

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>

참고 URL : https://stackoverflow.com/questions/9830506/how-do-you-use-colspan-and-rowspan-in-html-tables