Is automatically defined in a table?

Question

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

score 0 · Accepted Answer · answered Jun 29 '20 at 07:16

0

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.

answered Jun 29 '20 at 07:16

ag-dev

213
2
12

Thanks for the advice. :) As I said I'm still a beginner. Just one question which still I do not understand is that the second table does not contain then how it's effected? – Elnaz K.Zonouzi Jun 29 '20 at 09:46
Quite simply because even if you do not indicate it a table necessarily has a body (tbody) even if you do not write it. Do not forget to mark my answer as valid if it was what you wanted to know and to write it down if my help was useful to you. – ag-dev Jun 29 '20 at 10:19

Is automatically defined in a table?

1 Answers1