html - 如何在表格中定位一些列

Question

我无法在表格中放置一些文本。

我有两列 colspan="4" - 它们是 第一列 和 第二列:

它应该是这样的:

first column   second columnsome text      Value   Currency                 100   USD                3000   USD

But as I've done it, it looks like that:

first column   second columnsome text             Value  Currency                        100  USD                       3000  USD                      12000  USD                        400  USD

Here is my real code:

 <tr>
   <td colspan="4">
     First column
  </td>
   <td colspan="4">
     Second column
  </td>
</tr>
     <tr class="empty"><td colspan="8">&nbsp;</td></tr>
     <tr>
        <td colspan="4">
           <?php echo 'Price';?>:
        </td>

        <td colspan='1' style="text-align: right">
            <?php echo 'Value';?>
        </td>
        <td style="padding-left:10px" colspan='1' >
            <?php echo 'Currency';?>
        </td>
        <td colspan='2'>&nbsp;</td>    
    </tr>
 <tr>
    <td colspan="4">
       </td>
       <td colspan="1" style="text-align: right"><?php echo $price; ?></td>
       <td colspan="1" class="pull-right"><?php echo $currency; ?></td>
       <td colspan="2" style="height:10px;">&nbsp;</td>
 </tr>   

.pull-right {
                padding-left: 10px;   
            }

Answer 1

这段代码有一些问题。首先，您应该始终将行嵌套在表格中。其次，您拥有的值(value)和货币应该是一个嵌套表格，但您正试图在没有正确 html 的情况下重现这种布局。尝试使用以下模板来实现您的目标。我已经对其进行了测试，它确实生成了您所要求的确切布局。

<table>
    <tr>
        <td colspan="2" style="text-align: center;">
            First Column
        </td>
        <td colspan="2" style="text-align: center;">
            Second Column
        </td>
    </tr>
    <tr>
        <td colspan="2" style="vertical-align:top;text-align: center;">
            Some Text
        </td>
        <td colspan="2">
            <table style="text-align: center; width: 100%">
                <tr>
                    <td>
                        Value
                    </td>
                    <td>
                        Currency
                    </td>
                </tr>
                <tr>
                    <td>
                        100
                    </td>
                    <td>
                        USD
                    </td>
                </tr>
                <tr>
                    <td>
                        3000
                    </td>
                    <td>
                        USD
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>

这是结果(添加了边框):