在CSS中的表格樣式

我目前有一個HTML頁面，裏面有HTML/CSS代碼。在CSS中的表格樣式

<table style="width: 300px;"> 
    <tr style="height: 120px;"> 
     <td width="width: 100px;"> 
      <img src="images/lol/avatars/3.png" style="vertical-align: middle; width: 100px; height: 100px;"> 
      <img src="images/score/3.png" style="display: block; background: #0c0c0c;" alt="3" title="5 üzerinden 3" /> 
     </td> 
     <td width="width: 200px;"> 
      aaaa bbb cccc ddddd 
      <h2 style="font-size: 1.6em; text-shadow: 0 -1px 1px #0c0c0c; text-transform: none; color: #fcfcfc; ">Anil wrote.<h2> 
     </td> 
    </tr> 
</table>

的電流輸出爲：

enter image description here

（活生生的例子就在這裏：http://www.sobafire.com，滑塊的右側下）

畫面非常解釋我需要什麼，但我會寫他們無論如何。

頂部的文本（aaa bbb ...）應居中。另外，如果文本很長，它應該自動保持居中。（它不應該上漲或下跌，它應該上漲50％，下跌50％。）
帶星號的「分數」圖像具有背景色，即「＃0c0c0c」。它應該是整個底部區域的背景顏色，包括「Anil寫道」。文本。
「Anil寫道。」文本應該與右側對齊。

如果你能在這種情況下幫助我，我會很高興。

Ps。在當前表格中會有3個TR，而不是像這樣。它不會有所作爲，但只是一個側面說明。

Ps 2.爲希望看到它的用戶添加實時示例。

來源

2012-01-09 Aristona

你就不能把比分和「阿尼爾寫到」他們自己的行？ – RoToRa 2012-01-09 16:13:07

我們不是在這裏爲你寫你的代碼。我會以兩種方式來幫助你：（1）你完全誤解了如何使用表格。查看'tr'和'td'之間的區別。（2）你不需要使用表格......'div's和'span's的CSS可以正常工作。 – 2012-01-09 16:14:25

我同意@JustinSatyr（使用'div'和'span'！）。也可以使用css類而不是內聯樣式。 – c4urself 2012-01-09 16:16:51

您需要添加另一個<tr>，其中包含兩個td的評分，另一個評分爲Anil寫的評分。

那麼你可以添加text-align: center到註釋TD

來源

2012-01-09 16:15:48 c4urself

垂直對齊如何？ – Aristona 2012-01-09 17:39:38

使用兩TR爲此，第一行的主圖像和「AAAA BBB CCCC DDDDD」第二排有星星和「阿尼爾寫道：「info 您可能需要第一列的rowspan = 2。對不起，忘記rowspan。

那麼，如果您有其他行，只需添加它們在年底，所以你可能有4倍TR，而不是3

把你所有的風格項目，以CSS樣式表
一般而言，div是佈局的更好選擇，但您會發現關於此主題的各種觀點。表格應該用於表格數據，而不是佈局。

HARV

來源

2012-01-09 16:19:00 Harv

一直試圖讓它工作...試圖與divs，跨度，表格。幾乎是第四次嘗試，但仍然是一樣的。當文本必須位於中心時，事情會變得混亂。它們要麼出現在底部，要麼出現在桌子外面。 – Aristona 2012-01-09 17:28:49

我建議你添加另一個<tr>和<td>和使用上的div和跨越valign:xxx;和align:xxx;

CSS會正常工作

來源

2012-01-09 16:22:03

在CSS中的表格樣式

回答

相關問題