<div> Tag help

Question

I was trying to make a table like the one posted below. My idea was to have multiple tables and to have separate ID's for CSS styling. I get that I cannot is the <div> tag like this, but why? Also is there a better way to do this?

FYI, I just started CSS so I know that there might be something higher leveled to work with. I am just trying to get a better understanding of each part before moving on.

<table>
<div>
<tr>
<td>1R 1C</td>
<td>1R 2C</td>
</tr>
</div>
<tr>
<td>2R 1C</td>
<td>2R 2C</td>
</tr>
</table>

Here is a more detailed example of the idea I am working with:
https://code.sololearn.com/WehPjI6GUBMI

I tried this in the Playground and it showed an error that stated there was an unexpected tag that caused a voodoo effect.

My confusion stems from where you can and cannot apply the <div> tag.

Answer 1

Dakota apparently <div> doesn’t work inside tables.

Answer 2

Are you looking for something just like it??
https://code.sololearn.com/Wfaa0cO19T4w/?ref=app

Answer 3

Can you clarify?

Answer 4

@Al Araf, That would work, or I just realized that I can add an ID or Class directly to the <tr> tag, which would solve that problem.

Now I just need an explanation of the proper use of the <div> tag in general.

Answer 5

@yinhaodragon7, Haha, I'll just have to accept that. I get that there is an odd relation between <div> and <table> due to them both being block elements. Maybe it affected by the way the table formats the text.

Answer 6

You can not input div tag inside table tag whereas you can input table tag inside div tag!!😊