创建包含两行的HTML表

这是我现在拥有的表和我想要创建的表：

这是我的代码：

HTML:

像这样的

<table class="table-1">
        <tr>
            <th>Name:</th>
            <td>Bill Gates</td>
            <th>Name:</th>
            <td>Steve Jobs</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
        </tr>
</table>

姓名：
比尔盖茨
姓名：
史蒂夫 乔布斯
电话：
55577854
电话：
55577854

我认为最优雅的方式是使用：）

你所要做的就是用一个父div包装你的代码，然后使用flex。然后，我们还可以添加一些左文本对齐方式，以将数据保留在列中，并添加一些右边距，以使其能够呼吸

.table容器{
显示器：flex；
}
.表1{
文本对齐：左对齐；
右边距：2米；
}

姓名：
比尔盖茨
电话：
55577854



姓名：
比尔盖茨
电话：
55577854

您对此有何看法

表th，td{
文本对齐：左对齐；
}
.姓名，.电话{
字体大小：粗体；
}
.空间{
宽度：10px；
}

姓名：
比尔盖茨
姓名：
比尔盖茨
电话：
比尔盖茨
电话：
比尔盖茨

添加到CSS'.table-1{display:inline block；}' 这不是最佳选择，但您可以在几秒钟内修复它：

<style>
.table-1 th, td {
    text-align: left;

}
.table-1 {
    display:inline-block;
    }
</style>

<table class="table-1">
        <tr>
            <th>Name:</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
        </tr>
 </table>
 <table class="table-1">
        <tr>
            <th>Name:</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
        </tr>
  </table>

.表1，td{
文本对齐：左对齐；
}
.表1{
显示：内联块；
}
姓名：
比尔盖茨
电话：
55577854
姓名：
比尔盖茨
电话：
55577854

尽管有一个公认的答案，但我想在没有

的情况下展示这一点，因为我认为这些东西不是表，而是目录条目

这显示了一个“entrylist”，其中包含多个条目“entry”，每个条目包含一个“name”和一个“phone”。标签不会重复，它们是在内容生成之前通过CSS添加的。
类用于描述每件事物是什么，而不是它的外观

每行的条目数可以通过使用flex布局样式来控制

.entrylist{
显示器：flex；
}
.进入{
右边距：1米；
填充：3p0.4em；
背景颜色：浅绿色；
}
.entry.name、.entry.phone{
显示：块；
空白：nowrap；
}
.条目*：在{
显示：内联块；
宽度：10ex；
右边距：0.5em；
}
.entry.姓名：before{
内容：“姓名：”；
}
电话：之前{
内容:"电话:";；
}

比尔盖茨
55577854
史蒂夫 乔布斯
55533987
埃隆麝香
55599123

为什么要创建两个单独的表？行跨度是怎么回事？这似乎不是表的正确用法。你为什么重复标题？它违背了拥有标题的目的。如果你想简单地将一些数据格式化成大小相等的方框，请查看。同意上面的说法。如果要重复标题，则不创建表。您可能想考虑使用定义列表并结合下面的一些反馈，使用CSS/Flex Box将它们放在适当的位置，就像使用Flex布局的想法一样，但是您不应该在那里需要代码< > BR> BR> <代码>，它们似乎没有区别。如果您确实需要创建一些空间，只需添加一些边距和/或填充。（我知道-它们来自OP原始标记）@StephenP我完全同意，我只是把它们放在那里，向OP展示我刚刚用div包装了他的代码（不需要做任何更改）。我喜欢只使用HTML的方法。问题是需要显式指定rowspan才能使此解决方案工作。数据和设计的任何更改都将中断。

<table class="table-1">
        <tr>
            <th>Name:</th>
            <td>Bill Gates</td>
            <th>Name:</th>
            <td>Steve Jobs</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
        </tr>
</table>

<style>
.table-1 th, td {
    text-align: left;

}
.table-1 {
    display:inline-block;
    }
</style>

<table class="table-1">
        <tr>
            <th>Name:</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
        </tr>
 </table>
 <table class="table-1">
        <tr>
            <th>Name:</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
        </tr>
  </table>