使文本在表​​格内以不同方式对齐

Question

请注意，我对一般的HTML内容不熟悉，对不起，如果这很明显

https://dl.dropboxusercontent.com/u/136618113/nationalseries/driver.html

我正试图在左边有Rank，Wins等，在右边有数字。有没有简单的方法呢？

Answer 1

不是将所有内容放在一个内容中，而是为每一行创建1，并且可以将样式放在标记上，如下所示：

<tr>
  <td colspan="2">Car 1</td><td colspan="2"> Car 2</td>
</tr>
<tr>
  <td style="text-align:left">Wins</td>
  <td style="text-align:right">1</td>
  <td style="text-align:left">Wins</td>
  <td style="text-align:right">5</td>
</tr>
<tr>
  <td style="text-align:left">Poles</td>
  <td style="text-align:right">2</td>
  <td style="text-align:left">Poles</td>
  <td style="text-align:right">12</td>
</tr>

它看起来很丑，很难维护，所以你可以使用css：

<style>
.left{
  text-align: left;
}
.right{
  text-align: right;
}
</style>

申请课程

<tr>
  <td colspan="2">Car 1</td><td colspan="2"> Car 2</td>
</tr>
<tr>
  <td class="left">Wins</td>
  <td class="right">1</td>
  <td class="left">Wins</td>
  <td class="right">5</td>
</tr>
<tr>
  <td class="left">Poles</td>
  <td class="right">2</td>
  <td class="left">Poles</td>
  <td class="right">12</td>
</tr>

如果你想过改变风格，现在你的风格更容易维护。当然你可以做更精确/优化CSS selectors，但对你来说可能太过分了，现在

Answer 2

将表格行和单元格分配给内容。图像必须填充两个单元格，以便您可以使用colspan 2.然后在需要以不同方式对齐的单元格上，您可以添加一些样式：

<tbody>
<tr valign="top">
<td width="200" colspan="2">
<img src="drivers/headers/test1.png">
</td>
</tr>
<tr>
<td  colspan="2">
<img src="drivers/cars/test.png">
</td>
</tr>
<tr>
<td>
Rank:
</td>
<td style="text-align:right;">
<b>0th</b>
</td>
</tr>
..........

等等其余部分......

Answer 3

试试吧

工作http://jsfiddle.net/qLrYg/5/

<table border="1" cellspacing="0" >
<tr bgcolor="#999999">
    <td width="100"  valign="middle" align="left" >Rank:</td>
    <td width="30"  valign="middle" align="right">0</td>
</tr>
<tr bgcolor="#CCCCCC">
  <td valign="middle" align="left" >Wins:</td>
    <td valign="middle" align="right" >0</td>
</tr>