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，位于滑块的右侧。）

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

1. 顶部的文字（aaa bbb ...）应居中。此外，如果文本很长，它应该自动保持居中。 （它不应该向上或向下，它应该向上50％而向下向50％。）
2. 带有星星的“得分”图像具有背景颜色，即“＃0c0c0c”。它应该是整个底部区域的背景颜色，包括“Anil写道”。文本。
3. “Anil写道。”文字应与右侧对齐。

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

聚苯乙烯。当前表中将有3x TR，而不是像这样的单个TR。它不会有所作为，只是旁注。

Ps 2.为想要观看直播的用户添加了实例。

Answer 1

1. 为此使用两个TR，第一行有主图像，“aaaa bbb cccc ddddd” 第二排有明星和“Anil写道”信息 你可能需要第一列的rowspan = 2。 对不起，忘掉了rowspan。

然后，如果你有其他行，只需在末尾添加它们，这样你可能有4x TR而不是3。

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

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

HARV

Answer 2

您需要添加另一个<tr>，其中包含两个td的评级和一个'Anil write'位。

然后您可以将text-align: center添加到评论td

Answer 3

我建议你添加另一个<tr>和<td>并使用valign:xxx;和align:xxx;

div和spans上的CSS可以正常工作