HTML 테이블은 세포 수를 교대하는 데 도움이됩니다

StackOverflow https://stackoverflow.com/questions/1619179

  •  06-07-2019
  •  | 
  •  

문제

각 행의 셀 수를 번갈아 가려면 적절한 HTML은 무엇입니까? 나는 2 개의 세포가 행 1, 3에서 3, 2에서 2, 3 in 4 in 4 등을 원합니다 ... 벽돌 벽과 비슷합니다. 지금까지 이것을 가지고 있지만 원하는 것처럼 렌더링하지 않습니다. 나는이 둥지 테이블을 할 수 있다는 것을 알고 있지만, 하나의 테이블로 이것을 할 수 있습니까? 

<table border="1" cellpadding="10">
  <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
 <tr>
    <td colspan="1.5"> <span> X </span> </td> 
    <td colspan="1.5"> <span> X </span> </td>
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
 </tr>
</table>
도움이 되었습니까?

해결책

셀 스팬 분수 너비를 가질 수 없습니다. 대신 하단 및 상단 범위에서 행의 수에 대해 가장 일반적인 분모를 찾아야합니다. 당신의 예에서, 2와 3은 6입니다. 따라서 테이블의 너비는 6 셀이며 짝수 행은 각각 3 개, 홀수 행은 각각 2에 걸쳐 있습니다.

<table width="360">
    <tr>
        <td align="center" width="180" colspan="3">x</td>
        <td align="center" width="180" colspan="3">x</td>
    </tr>
    <tr>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
        <td align="center" width="120" colspan="2">x</td>
    </tr>
</table>

참고 테이블 너비는 2와 3으로 쉽게 나눌 수 있으며 폭은 각 셀에서 명시 적으로 설정됩니다.

다른 팁

이를 수행하는 한 가지 방법은 CSS를 통한 것입니다. 필요한만큼 큰 테이블을 설정 한 다음 (예 : 4x4), 각 셀에 스타일을 적절하게 적용합니다. 두 가지 스타일의 벽돌과 빈, 하나는 "벽돌"을 나타내고 다른 하나는 빈 공간을 나타냅니다.

따라서 다음과 같은 작업을 수행 할 수 있습니다.

<html>
<head>
<style type="text/css">
  td { border-style:none; width:30px; }
  td.brick { border-style:solid; border-color:black; border-width:1px; }
</style>
</head>
<body>
<table>
<tr><td class="brick">&nbsp;</td><td></td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td></td></tr>
<tr><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td><td class="brick">&nbsp;</td></tr>
</table>
</body>
</html>

<table>
<tr>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td>Y</td>
</tr>
<tr>
 <td>Y</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
 <td colspan="2">X</td>
</tr>

Colspans는 정수 값을 가져야한다고 확신합니다. 분수는 허용되지 않습니다. 3 셀 라인에서 0 너비, 0 패딩, 0 마진의 더미 셀을 추가 할 수 있습니다. 

<tr>
    <td colspan="2"> <span> X </span> </td> 
    <td colspan="2"> <span> X </span> </td> 
  </tr>
  <tr>
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td> <span> X </span> </td> 
    <td><!-- dummy !--></td> 
</tr>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top