HTML 테이블의 스패닝 열

Question

테이블의 두 열을 병합하는 매우 간단한 작업을 수행하려고합니다. 이것은 colspan에서 쉽게 보이지만 병합 된 열이 없으면 적어도 하나의 행을 남기지 않고 다른 열을 병합하면 크기가 완전히 엉망이됩니다. http://www.allthingsdope.com/table.html에서 다음의 예를 참조하거나 살펴보고 다음 코드를 시도해보십시오 :

좋은 : 나쁜

<table width="700px"> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td width="300px">2: 300px</td> 
    <td width="200px">3: 200px</td> 
    <td width="100px">4: 100px</td> 
</tr> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td colspan=2 width="500px" >2 & 3: 500px</td> 
    <td width="100px">4: 100px</td> 
</tr> 

<tr> 
    <th width="100px">1: 100px</th> 
    <td width="300px">2: 300px</td> 
    <td colspan=2 width="300px">3 & 4: 300px</td> 
</tr> 
</table> 

을 :

<table width="700px"> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td colspan=2 width="500px" >2 & 3: 500px</td> 
    <td width="100px">4: 100px</td> 
</tr> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td width="300px">2: 300px</td> 
    <td colspan=2 width="300px">3 & 4: 300px</td> 
</tr> 
</table> 

이 그렇게 간단한 것 같다하지만 난 그것을 알아낼 수 없습니다 !

Answer 1

개별 셀에 width 속성을 두지 마십시오. 적어도 html 4.01 (http://www.w3.org/TR/html401/struct/tables.html#h-11.2.6, w3c가 코딩을 승인하지 않는다고 생각하는 경우)부터 사용되지 않습니다. 어쨌든, 당신이 colspans와 이것을 혼합 시키려고한다면, 당신은 모든 종류의 문제들에 빠지게됩니다.

은 대신과 같이, 테이블에 <col> 요소를 추가 :

이

<table width="700px"> 
     <col width="100px"/> 
     <col width="300px"/> 
     <col width="200px"/> 
     <col width="100px"/> 
     <tr> 
      <th>1: 100px</th> 
      <td colspan="2">2 &amp; 3: 500px</td> 
      <td>4: 100px</td> 
     </tr> 
     <tr> 
      <th>1: 100px</th> 
      <td>2: 300px</td> 
      <td colspan="2">3 &amp; 4: 300px</td> 
     </tr> 
    </table> 

<COL> 요소가 전체 컬럼에 적용되는 속성을 걸에 자리 표시 자 역할을 정확하게 존재한다.

Answer 2

병합 된 열의 너비 매개 변수를 "auto"로 바꾸면 완벽하게 작동하는 "남은 것이 무엇이든지"얻을 수 있습니다. 따라서 :

<table width="700px" border="1px"> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td colspan=2 width="auto" >2 & 3: 500px</td> 
    <td width="100px">4: 100px</td> 
</tr> 
<tr> 
    <th width="100px">1: 100px</th> 
    <td width="300px">2: 300px</td> 
    <td colspan=2 width="auto">3 & 4: 300px</td> 
</tr> 
</table>