使用CSS來表格化表格？

我已經創建了一個表，其中我將在圖像旁邊的單元格中顯示一個人的圖像和關於它們的信息。我的代碼如下使用CSS來表格化表格？

<table border="0" cellpadding="0" cellspacing="0" width="50%"> 
    <tr> 
     <td class="bg" colspan="2">JEFF DAVIS</td> 
    </tr> 

    <tr> 
     <td width="24%"> 
      <img height="150" src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150"> 
     </td> 

     <td width="76%"> 
      <p>Name: Jeff Davis</p> 

      <p>Favourite Color: Yellow</p> 

      <p>Favourite Animal: My Cat</p> 

      <p>Favourite Super Hero: Superman</p> 
     </td> 
    </tr> 

    <tr> 
     <td colspan="2">Facebook Twitter Email</td> 
    </tr> 
</table>

在我保持信息，或者我想有要點兩列的人的「個人資料」的單元格。有人可以告訴我如何做到這一點？另外我想頂部單元格，名稱在首都有圓角邊緣，我相信我可以用CSS做到這一點，但我是一個完整的新手。

來源

2014-02-07 user3277125

通過使用'ul'和'li'並在自動清除容器包裝他們和浮動每個'ul'到'left'？ –

這裏是你提到的使用點的示例的jsfiddle。

<ul> 
    <li><p>Name: Jeff Davis</p></li> 
    <li><p>Favourite Color: Yellow</p></li> 
    <li><p>Favourite Animal: My Cat </p></li> 
    <li><p>Favourite Super Hero: Superman</p></li> 
</ul>

http://jsfiddle.net/kzgfu/

難道這要ú換貨？

P.s .:我不太明白你的意思是大寫字母的圓角。你能展示一幅你的意思嗎？從丹科http://jsfiddle.net/kzgfu/1/

而另一圓細胞

圓形細胞從我：http://jsfiddle.net/kzgfu/2/

來源

2014-02-07 14:25:34 MiKE

像這樣border-raidus在你的答案http://jsfiddle.net/kzgfu/1/中使用class bg加上這個...... +1 – DaniP

沒錯。我在這裏添加了另一個圓角邊緣的示例：http://jsfiddle.net/kzgfu/2/ – MiKE

我喜歡你回答的方式，並且詢問了疑問，而不是隻在你的答案中發佈疑問，因爲新用戶傾向於那......我也是如此+1 –

我想這就是他所說的圓角，不知道是什麼，雖然

table td:nth-child(1){ 
background-color:#333; 
color:#fff; 
-webkit-border-radius: 5px; 
-moz-border-radius: 5px; 
border-radius: 5px; 
}

來源

2014-02-07 14:26:35 user2099810

http://jsfiddle.net/Ldbu4/1/

<table width="50%" border="0" cellspacing="0" cellpadding="0"> 
<tr> 
    <th colspan="2" class="bg">JEFF DAVIS</th> 
</tr> 
<tr> 
    <td width="24%"><img src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150" height="150" /></td> 
    <td width="76%"><p>Name: Jeff Davis</p> 
     <ul> 
      <li>Favourite Color: Yellow</li> 
      <li>Favourite Animal: My Cat </li> 
      <li>Favourite Super Hero: Superman</li> 
     </ul> 
    </td> 
</tr> 
<tr> 
    <td colspan="2">Facebook Twitter Email</td> 
</tr>

和CSS

table 
{ 
    border-collapse:collapse; 
} 

td 
{ 
    border: 1px solid black; 
} 

td 
{ 
    padding: 10px; 
} 

th 
{ 
    background-color:#333; 
    color:#fff; 
    border-radius: 10px 10px 0 0; 
}

來源

2014-02-07 14:29:56

你去那裏

JsFiddle Bullet points and round corners around capitals

CSS：

.bg { 
text-align:center; 
background:green; 
border-radius:10px 10px 0 0;}

HTML：

<li> <p>Favourite Color: Yellow</p>   </li> 
<li> <p>Favourite Animal: My Cat </p>  </li> 
<li> <p>Favourite Super Hero: Superman</p> </li> 
<li> <p> Facebook Twitter Email</p>   </li> </td>

來源

2014-02-07 14:31:49 CodeFanatic

下面是一個使用div的小提琴示例（我知道這不是你所問的，但只是你有不同的選擇）和兩個圓柱點。

http://jsfiddle.net/jprZ7

<div style="width:50%;"> 
    <div style="width:100%; text-align:center; border-radius: 15px; background-color:#CCC;"> 
     JEFF DAVIS 
    </div> 
    <div style="width:24%; float:left;"> 
     <img src="file:///C|/Users/Daniel/Desktop/photo1.jpg" width="150" height="150" /> 
    </div> 
    <div style="width:76%; float:left;"> 
     <ul style="float:left;"> 
      <li> 
       <p>Name: Jeff Davis</p> 
      </li> 
      <li> 
       <p>Favourite Color: Yellow</p> 
      </li> 
     </ul> 
     <ul style="float:left;"> 
       <li> 
       <p>Favourite Animal: My Cat</p> 
      </li> 
      <li> 
       <p>Favourite Super Hero: Superman</p> 
      </li> 
     </ul> 
    </div> 
</div>

來源

2014-02-07 14:38:44 Naner

使用CSS來表格化表格？

回答

相關問題