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"> </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>참조 :
답변
테이블 레이아웃이 어떻게 작동하는지 혼란 스러우면 기본적으로 x = 0, y = 0에서 시작하여 작업을 진행합니다. 너무 재미 있기 때문에 그래픽으로 설명합시다!
테이블을 시작할 때 그리드를 만듭니다. 첫 번째 행과 셀은 왼쪽 상단에 있습니다. x가 증가 할 때마다 오른쪽으로 이동하고 y가 증가 할 때마다 아래로 이동하는 배열 포인터처럼 생각하십시오.
첫 번째 행의 경우 두 개의 셀만 정의합니다. 하나는 아래로 2 행에 걸쳐 있고 다른 하나는 4 열에 걸쳐 있습니다. 따라서 첫 번째 행의 끝에 도달하면 다음과 같이 표시됩니다.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
</table>행이 종료되었으므로 “배열 포인터”가 다음 행으로 이동합니다. x 위치 0은 이미 이전 셀이 차지 했으므로 x는 위치 1로 점프하여 셀 채우기를 시작합니다. * 행 범위 간의 차이에 대한 참고를 참조하십시오.
이 행에는 모두 1×1 블록 인 4 개의 셀이 있으며 그 위에있는 행의 동일한 너비를 채 웁니다.
<table>
<tr>
<td rowspan="2"></td>
<td colspan="4"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>다음 행은 모두 1×1 셀입니다. 하지만 예를 들어 셀을 추가하면 어떨까요? 음, 오른쪽 가장자리에서 튀어 나올 것입니다.
<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>