HTML 테이블 도움말

Question

나는 아래를 복제하기 위해 모든 아침을 시도했지만 올바른 정렬을 얻을 수 없다. 행이 가장 큰 td의 높이와 일치하는 것으로 보인다. 가능한 한 완벽하게 픽셀을 복제해야한다. 다음은

내 HTML은

,

<table cellspacing="0" cellpadding="0" border="0" align="center" style="height: 268px; width: 700px;"> 
<thead> 
<tr> 
<th valign="middle" align="center" style="height: 27px;" scope="col">Information</th> 
<th valign="middle" align="center" style="height: 27px;" scope="col">Education &amp; Training</th> 
<th valign="middle" align="center" style="height: 27px;" scope="col">Marketing Services</th> 
<th valign="middle" align="center" style="height: 27px;" scope="col">Digital Media</th> 
<th valign="middle" align="center" style="height: 27px;" scope="col">Entertainment</th> 
<th valign="middle" align="center" style="height: 27px;" scope="col">Business Services</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td valign="middle" align="center" style="height: 27px;">Academic</td> 
<td valign="middle" align="center" style="height: 27px;">For-profit schools</td> 
<td valign="middle" align="center" style="height: 27px;">Agency</td> 
<td valign="middle" align="center" style="height: 27px;">Internet</td> 
<td valign="middle" align="center" style="height: 27px;">TV and Radio Broadcasting</td> 
<td valign="middle" align="center" style="height: 27px;">Business Process Outsourcing</td> 
</tr> 
<tr> 
<td valign="middle" align="center" style="height: 27px;">STM</td> 
<td valign="middle" align="center" style="height: 27px;">Educational Technology</td> 
<td valign="middle" align="center" style="height: 27px;">Digital</td> 
<td valign="middle" align="center" style="height: 27px;">Mobile Distribution</td> 
<td valign="middle" align="center" style="height: 27px;">Cinema</td> 
<td valign="middle" align="center" style="height: 27px;">B2B Services</td> 
</tr> 
<tr> 
<td valign="middle" align="center" style="height: 27px;">Financial</td> 
<td valign="middle" align="center" style="height: 27px;">Educational Services</td> 
<td valign="middle" align="center" style="height: 27px;">Market Research</td> 
<td valign="middle" align="center" style="height: 27px;">Online Gaming</td> 
<td valign="middle" align="center" style="height: 27px;">Film, TV, Music and Sports Content and Rights</td> 
<td valign="middle" align="center" style="height: 27px;">SaaS</td> 
</tr> 
<tr> 
<td valign="middle" align="center" style="height: 27px;">Business</td> 
<td valign="middle" align="center" style="height: 27px;">Professional Training</td> 
<td valign="middle" align="center" style="height: 27px;">Outdoor</td> 
<td valign="middle" align="center" style="height: 27px;">Social Media</td> 
</tr> 
<tr> 
<td valign="middle" align="center" style="height: 27px;">Trade</td> 
<td valign="middle" align="center" style="height: 27px;">Vocational Training</td> 
<td valign="middle" align="center" style="height: 27px;">Public Relations</td> 
</tr> 
<tr> 
<td valign="middle" align="center" style="height: 27px;">Consumer</td> 
<td valign="middle" align="center" style="height: 27px;">Sales Promotion</td> 
</tr> 
<tr> 
<td valign="middle" align="center" style="height: 27px;">Professional</td> 
<td valign="middle" align="center" style="height: 27px;">Direct Marketing</td> 
</tr> 
<tr> 
<td valign="middle" align="center" style="height: 27px;">Lead Generation</td> 
</tr> 
<tr> 
<td valign="middle" align="center" style="height: 27px;">&nbsp;</td> 
<td valign="middle" align="center" style="height: 27px;">&nbsp;</td> 
</tr> 
</tbody> 
</table> 

내 CSS,

#left table { 
    border:0 none; 
} 

#left th { 
    height:43px; 
    background:url(images/th_bg.jpg) top left repeat-x; 
    font-size:14px; 
    color:#fff; 
    font-family:"Times", "Times New Roman", "Serif"; 
} 

#left tbody td { 
    text-align:center; 
    background:#99abb9; 
    border-right:1px solid #fff; 
    width:105px; 
    padding:10px 15px 0px 15px; 
    height:17px; 
} 

Answer 1

나에게 두 행처럼 보인다. th 태그의 머리글 행과 단일 행 td 태그의 각 행은 항목 목록이 있습니다.

Answer 2

당신은 항목 당 하나의 테이블 행을 만들려고하지만 사진에 같이 보인다 단 두 행이 있습니다. 하나는 헤더 용이고 다른 하나는 데이터 용입니다 (데이터는 <br /> 또는 <p>...</p>으로 구분됩니다). 여기

가 짧아 예이다 (더 적은 열, 기본적인 형식 - 당신이 나머지를 추가해야합니다) 그냥 작동하는 방법을 보여줍니다 :

<style type='text/css'> 
    thead > tr > td { 
     text-align:center; 
     vertical-align:middle; 
     background-color:#777777; 
     width:107px; 
    } 
    tbody > tr > td { 
     text-align:center; 
     background-color:#99abb9; 
    } 
</style> 

<table cellspacing="2px" border="0"> 
    <thead> 
     <tr> 
     <td>Information</td> 
     <td>Education &amp; Training</td> 
     <td>Marketing Services</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 
      Academic<br /><br /> 
      STM<br /><br /> 
      Financial<br /><br /> 
      Business<br /><br /> 
      ... 
     </td> 
     <td> 
      For-profit schools<br /><br /> 
      Educational Technology<br /><br /> 
      Educational Services<br /><br /> 
      ... 
     </td> 
     <td> 
      Agency<br /><br /> 
      Digital<br /><br /> 
      Market Research<br /><br /> 
      Outdoor<br /><br /> 
      Public Relations 
     </td> 
     </tr> 
    </tbody> 
</table> 

Answer 3

저는 완전히 작동하는 데모를 http://dcm.net46.net/test/so/so.html에서 만들었습니다. 모든 열을 같은 높이로 만들려면 방금 여분의 공간에 빈 td을 채 웁니다. 열 스타일을 지정하기 위해 colgroup 및 col 요소를 사용했습니다. 나머지는 꽤 쉬웠다.