Question

我有HTML格式的表格

我希望下面的第二个标题与第一个标题垂直对齐，以及第二个标题下方的其他表格，但我找不到正确的方法，我在互联网上搜索了一些信息但仍然不起作用。

以下是我的示例html代码：

<html>
    <head>
        <meta http=equiv="content-Type" content="text/html; charset-utf-8"/>
        <title>Payments</title>
    </head>
    <style type="text/css">
        #wrap {
            width: 460px;
        }
    </style>
    <body>
        <h5 style="text-align:left"></br></br>PROVIDENCE 
            MEMORIAL PARK-SAN JOSE DEL MONTE BULACAN <p></p>
            OFFICIAL PRICE LIST effective May 10, 2013</h5> 
    </body>
    <table border="$" cellpadding="10" width="400">
        <tr>
            <th>Lot type</td>
            <th>Lot price</td>
            <th>Mem'rl maintenance fund</td>
            <th>Total price</td>
        </tr>
    </table>
    <table border="$" cellpadding="10" width="400" >
        <tr>
            LAWN LOT 1 (Reflection of Life & Evergreen 

            Mem'ries)
            <td height="20">Regular</td>
            <td height="20">40,000.00</td>
            <td height="20">4,500.00</td>
            <td height="20">44,500.00</td>
        </tr>
        <tr>
            <td>Special</td>
            <td>42,000.00</td>
            <td>4,500.00</td>
            <td>46,500.00</td>
        </tr>
        <tr>
            <td>Premium</td>
            <td>46,000.00</td>
            <td>4,500.00</td>
            <td>50,500.00</td>
        </tr>
    </tr>
</table>
<table border="$" cellpadding="10" width="400">
    <tr>
        LAWN 2 LOTS (Eternal Devotion)
        <td>Regular</td>
        <td>87,000.00</td>
        <td>10,000.00</td>
        <td>97,000.00</td>
    </tr>
    <tr>
        <td>Special</td>
        <td>93,000.00</td>
        <td>10,000.00</td>
        <td>103,000.00</td>
    </tr>
    <tr>
        <td>Premium</td>
        <td>98,000.00</td>
        <td>10,000.00</td>
        <td>10,000.00</td>
    </tr>
</tr>
</table>
<table border="$" cellpadding="10" width="400">
    <tr>
        COURT 4 LOTS (Court of serenity)
        <td>Regular</td>
        <td>157,000.00</td>
        <td>20,000.00</td>
        <td>177,000.00</td>
    </tr>
    <tr>
        <td>Special</td>
        <td>168,000.00</td>
        <td>20,000.00</td>
        <td>188,000.00</td>
    </tr>
    <tr>
        <td>Premium</td>
        <td>180,000.00</td>
        <td>20,000.00</td>
        <td>200,000.00</td>
    </tr>
</tr>
</table>
<table border="$" cellpadding="10" width="400">
    <tr style="margin-top:10px;"></tr>
    <tr>
        <th>Lot type</td>
        <th>Lot price</td>
        <th>Mem'rl maintenance fund</td>
        <th>Total price</td>
    </tr>
</table>
<table border="$" cellpadding="10" width="400">
    <tr>
        COURT 8 LOTS  (Court of tranquility)
        <td>Regular</td>
        <td>348,000.00</td>
        <td>40,000.00</td>
        <td>388,000.00</td>
    </tr>
    <tr>
        <td>Special</td>
        <td>369,000.00</td>
        <td>40,000.00</td>
        <td>409,000.00</td>
    </tr>
    <tr>
        <td>Premium</td>
        <td>392,000.00</td>
        <td>40,000.00</td>
        <td>432,000.00</td>
    </tr>
</tr>
</table>
<table border="$" cellpadding="10" width="400">
    <tr>
        ESTATE 12 LOTS (Piety Estate)
        <td>Premium</td>
        <td>646,000.00</td>
        <td>60,000.00</td>
        <td>706,000.00</td>
    </tr>
</table>
<table border="$" cellpadding="10" width="400">
    <tr>
        ESTATE 18 LOTS (Harmony Estate)
        <td>Premium</td>
        <td>968,000,00</td>
        <td>90,000,00</td>
        <td>1,058,000.00</td>
    </tr>
</table>
<table border="$" cellpadding="10" width="400">
    <tr>
        ESTATE 24 LOTS (Solace Estate)
        <td>Premium</td>
        <td>1,218,000.00</td>
        <td>120,000.00</td>
        <td>1,388,000.00</td>
    </tr>
</table>
</body>
</html>

任何建议将不胜感激：）

Answer 1

这样的事情FIDDLE。

CSS

table {
    width: 500px;
    border-collapse: collapse;
}
td, th {
    border-collapse: collapse;
    text-align: center;
}

我不会在这里重复HTML，但教学点是：

将表格放在一起（结构和内容）后，请使用CSS设置样式。

所有<td>都应以</td>结尾。

所有<th>都应以</th>结尾。

<td colspan='4'></td>会给你一个4列宽的单曲。

创建两个垂直对齐的表

1 个答案: