Html 如何使我的4篇文章(2栏)具有相同的高度?

Html 如何使我的4篇文章(2栏)具有相同的高度?,html,css,html-table,padding,Html,Css,Html Table,Padding,请看一看: HTML: <table class="art-article" border="0" cellspacing="0" cellpadding="0" style="width:100%;"> <col width="50%" /> <col width="50%" /> <tbody> <tr> <td><table class="metaart" wid

请看一看:

HTML:

<table class="art-article" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<col width="50%" />
<col width="50%" />
    <tbody>
        <tr>
            <td><table class="metaart"  width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox" align="justify" background="./images/backgroundxa.png"; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM </span></span><span style="color:rgb(235, 81, 5);"><a href="./services/operating-systems.html"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">IPSUM</span></span></a><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;">; </span></span></span></span></span></span><span style="font-size:20px;"></span></th>
                        </tr>

                        <tr>
                            <td> <img src="./images/win7-logo.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                            </tr>
                        <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                            <p style="text-align:right"><strong><a href="./services/operating-systems.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                </table></td>
            <td> <table class="metaart"   width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox" align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM IPSUM DOLOR</span></span><span style="color:rgb(235, 81, 5);"><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;"> </span></span></span></span></span></span></th>
                        </tr>

                        <tr>
                            <td> <img src="./images/ubbuntu.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                            </tr>
                        <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
                            <p style="text-align:right"><strong><a href="./services/operating-systems.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                </table></td>
        </tr>
        <tr>
          <td>&nbsp; </td>
          <td>&nbsp; </td>
        </tr>
        <tr>
          <td><table class="metaart"  width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox" align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="color:rgb(61,60,51);"><span style="font-size:20px;">LOREM IPSUM DOLOR</span></span><span style="color:rgb(235, 81, 5);"><span style="color:rgb(61,60,51);"><span style="font-weight:normal;"><span style="font-size:20px;"><span ;"> </span></span></span></span></span></span></th>
                        </tr>

                        <tr>
                            <td> <img src="./images/brands.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                            </tr>
                        <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
                            <p style="text-align:right"><strong><a href="./services/laptop.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                </table></td>
          <td><table class="metaart" padding=10px;  width="100%" border="0">
                    <tbody>
                        <tr>
                            <th class="titlebox"  align="justify" background="./images/backgroundxa.png" ; style="text-align:left" scope="col"><span style="text-align:left;"><span style="font-size: 20px; color: rgb(61,60,51)">LOREM IPSUM DOLOR </span></span></th>
                        </tr>

                        <tr>
                            <td> <img src="./images/farmacy.jpg" width="100%" style="border-top-width:0;border-right-width:0;border-bottom-width:0;border-left-width:0;"/></td>
                                </tr>
                            <tr>
                          <td><p style="font-size:12px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam</p>
                            <p style="text-align:right"><strong><a href="./services/medical-software.html"><img src="./images/mores.png" width="119" height="32" alt="Διαβάστε περισσότερα" style="border:0;"/></a></strong></p></td>
                          </tr>
                    </tbody>
                    </table></td>
        </tr>
    </tbody>
</table><br />

                </div>
                <div class="cleared"></div>
                </div>
标题中阴影效果和渐变的css代码位于btm的css部分

我想做的是使我的桌子有相同的高度。如您所见,右侧表格/单元格的高度小于左侧表格/单元格的高度


第二个问题。。我应该把填充的代码放在哪里,以增加文本和文本框之间的空间

将表放在一个表中,或重新组织成一个表,其中表1是第一列等