css - CSS 中的表格样式

Question

我目前有一个小的 HTML 页面，其中包含以下 HTML/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>

当前输出为:

(实例在这里: http://www.sobafire.com，在 slider 右侧。)

图片几乎解释了我需要什么，但无论如何我都会写下来。

1. 顶部的文字 (aaa bbb...) 应该居中。此外，如果文本很长，它应该自动保持居中。 (它不应该上涨或下跌，它应该上涨 %50，下跌 %50。)
2. 带有星星的“分数”图像具有背景颜色，即“#0c0c0c”。它应该是整个底部区域的背景色，包括“Anil wrote”。文本。
3. “阿尼尔写道。”文本应右对齐。

如果你能在这种情况下帮助我，我会很高兴。

附言。当前表中将有3x TR，而不是像这样的单个。它不会有什么不同，只是一个旁注。

Ps 2. 为希望实时观看的用户添加了实时示例。

Answer 1

1. 为此使用两个 TR，第一行是主图像和“aaaa bbb cccc ddddd”第二行有星星和“Anil wrote”信息第一列可能需要 rowspan=2。抱歉，忘了行跨度。

然后，如果您有额外的行，只需将它们添加到末尾，这样您可能有 4x TR 而不是 3。

1. 将所有样式项移至 CSS 样式表

2. 一般来说，div 是更好的布局选择，但您会发现关于这个主题的各种观点。表格应该用于表格数据，而不是用于布局。

收获