html-tablehtml-tbody

Is <tbody> automatically defined in a table?


I'm a starter and I was trying some elements, as practice. There's sth that i can't figure it out.I also have searched google but no answers found. I wrote 2 tables, in the first one I used tbody to style the body of the table. But when I load the page, I see the style used in css for the tbody in the first table, has also effected the second table(without tbody tag) completely.Why is this happening?

Here is the code :

<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>

And here is the css used :

#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;}

Solution

  • That's really simple, that affect the second table cause you use tbody in css and not #t1 tbody, use correct selector if you want to affect only one element.

    In addition I advise you not to use style on HTML and in CSS except in the case of manipulation in JavaScript. This will also allow you to better understand what does what, if you want to give a particular style to elements of your table assign their classes to your CSS.