<tbody> 是否自动定义在 table 中？

Question

我是初学者，我正在尝试一些元素作为练习。有些东西我想不通 out.I 也搜索过 google 但没有找到答案。我写了 2 tables，在第一个中我使用 tbody 来设计 table 的正文。但是当我加载页面时，我看到第一个 table 中的 tbody 在 css 中使用的样式也影响了第二个 table（没有 tbody 标签）completely.Why 是这样吗？

这是代码：

<table id="t1">
<caption>UFO Seen by People</caption>
<thead>
  <tr>
    <th>Name</th>
    <th>City Name</th>
    <th>Seen</th>
    <th>Times seen</th>
  </tr>
</thead>

<tbody>
  <tr>
    <td rowspan="3">Jack</td>
    <td>North Russia</td>
    <td>2020-06-12</td>
    <td>once</td>
  </tr>

  <tr>
    <td>North Korea</td>
    <td>2000-06-12</td>
    <td>once</td>
  </tr>

  <tr>
    <td>North Pole</td>
    <td>1995-06-12</td>
    <td>twice</td>
  </tr>
</tbody>

<tfoot>
  <tr>
    <td colspan="4">Blah Blah Blah</td>
  </tr>
</tfoot>
</table>
  
<table id="t2">
<caption>UFO Seen by People2</caption>
<colgroup>
  <col span="2" style="text-align:right; background-color:yellow;">
  <col style="background-color:cyan; background-image:url('baelen.jpg');">
</colgroup>

  <tr>
    <th>Name</th>
    <th>City Name</th>
    <th>Seen</th>
    <th>Times seen</th>
  </tr>

  <tr>
    <td rowspan="3">Dan</td>
    <td>North Russia</td>
    <td>2020-06-12</td>
    <td>once</td>
  </tr>

  <tr>
    <td>North Korea</td>
    <td>2000-06-12</td>
    <td>once</td>
  </tr>

  <tr>
    <td>North Pole</td>
    <td>1995-06-12</td>
    <td>twice</td>
  </tr>
</table>

这是使用的 css :

#t1 { border:2px solid black; border-spacing:10pt; background-color:pink; width:100%;}
#t2 { border:2px solid rgb(20,20,20); border-collapse:collapse; width:100%;}
tbody { background-color:white; text-align:center; vertical-align:middle; font-size:20pt;}

Answer 1

这很简单，影响第二个 table 因为你在 css 中使用 tbody 而不是 #t1 tbody，如果你只想影响一个，请使用正确的选择器元素.

此外，我建议您不要在 HTML 和 CSS 中使用样式，除非在 JavaScript 中进行操作。如果您想为 table 的元素赋予特定样式，将它们的类分配给您的 CSS.

，这也将使您更好地理解什么是什么。

<tbody> 是否自动定义在 table 中？

Is <tbody> automatically defined in a table?

html-table

html-tbody