在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中的表格样式

回答

相关问题