Html 将表格行设置为标题

我正在一个移动网站上工作，目标是那些CSS\html支持有限的老手机，所以我要回到表格

我试图在一个特定页面上实现的是，让一个表行具有一个特定值的标题，然后在同一个表中的另一行具有该值和一个要编辑的链接

问题是标题只跨一列，我希望能够设置它的样式，以便有一些填充、边距以及边框

有人能提供一些关于如何做到这一点的建议吗

HTML

<div class="navalt">
    <table style="width:100%;">
        <tbody>
        <tr class="edHeading">
            <td><fmt:message key="editprofile.location"/></fmt:message></td>
        </tr>
        <tr>
            <td class="leftTd">USA</td>
            <td class="rightTd"><a href="">Edit</a></td>
        </tr>

<table style="width:100%;">
 <thead>
    <tr>
    <th colspan="2">Heading - location use th tags</th>
   </tr>
 </thead>
 <tbody>
<tr>
    <td class="leftTd">USA</td>
    <td class="rightTd"><a href="">Edit</a></td>
    </tr>
</tbody>
 </table>

---

除非我遗漏了什么，否则您能否将

colspan=2

添加到标题

，使其覆盖整个表

<tr class="edHeading"><td colspan="2"><fmt:message key="editprofile.location"/></td></tr>

---

正如Wabs所说，您可以在标题中的

td

中添加一个colspan

另一种方法是使用

thead

标记，这将使您能够更清楚地区分样式，因为您已经使用了

这将更有意义

另外-作为旁注，您的

div

和

body

和

表

没有结束标记-尽管我认为这是因为您只复制了部分代码

这是一把小提琴：

守则如下：

HTML

<div class="navalt">
    <table style="width:100%;">
        <tbody>
        <tr class="edHeading">
            <td><fmt:message key="editprofile.location"/></fmt:message></td>
        </tr>
        <tr>
            <td class="leftTd">USA</td>
            <td class="rightTd"><a href="">Edit</a></td>
        </tr>

<table style="width:100%;">
 <thead>
    <tr>
    <th colspan="2">Heading - location use th tags</th>
   </tr>
 </thead>
 <tbody>
<tr>
    <td class="leftTd">USA</td>
    <td class="rightTd"><a href="">Edit</a></td>
    </tr>
</tbody>
 </table>

---

试过了，它解决了跨越的问题，但我仍然不知道如何最好地实现该头部的样式谢谢，这正是我所需要的，是的，只是出于兴趣忘了复制它们，我刚刚发现你可以完全删除thead css，只需样式是的，你也可以删除tbody。虽然为了把桌子的每一部分都划分成它自己的责任，把它们放进去总是很好的。它还允许您以不同的方式定位标记，如

td

，例如

tbody td{myBodycellStyle}

和

thead td{myheadcellsyle}

——这样您就不需要定义自己的自定义类来定位不同的

td