<Div> into a <Tr>: Is It Correct

div into a tr: is it correct?

No it is not valid. tr elements can only contain th and td elements. From the HTML4 specification:

<!ELEMENT TR       - O (TH|TD)+        -- table row -->
<!ATTLIST TR                           -- table row --
  %attrs;                              -- %coreattrs, %i18n, %events --
  %cellhalign;                         -- horizontal alignment in cells --
  %cellvalign;                         -- vertical alignment in cells --
>

Html table tr inside td

You must add a full table inside the td

    <table>      <tr>        <td>          <table>            <tr>              <td>                ...              </td>            </tr>          </table>        </td>      </tr>    </table>

div' inside 'table'

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>test</title>
  </head>
  <body>
    <table>
      <tr>
        <td>
          <div>content</div>
        </td>
      </tr>
    </table>
  </body>
</html>

This document was successfully checked as XHTML 1.0 Transitional!

how to properly insert div with tr inside a table?

Update

re-reading your structure you most likely need

<table>
  <thead>
   <tr>
      <th>name</th>
      <th>age</th>
      <th>gender</th>
   </tr>
  </thead>
  <tbody id="contents">
     <tr>
        <td>John</td>
        <td>12</td>
        <td>male</td>
     </tr>
     <tr>
        <td>Jess</td>
        <td>13</td>
        <td>female</td>
     </tr>
  </tbody>
</table>

Original answer

You can't have tr as direct children of a div.

You need to use a table

Either

<table>
   <tr>
      <th>name</th>
      <th>age</th>
      <th>gender</th>
   </tr>
   <td>
      <table id="contents">
       <tr>
          <td>John</td>
          <td>12</td>
          <td>male</td>
       </tr>
       <tr>
          <td>Jess</td>
          <td>13</td>
          <td>female</td>
       </tr>
      </table>
   <td>
</table>

<table>
   <tr>
      <th>name</th>
      <th>age</th>
      <th>gender</th>
   </tr>
   <td>
      <div id="contents">
       <table>
        <tr>
          <td>John</td>
          <td>12</td>
          <td>male</td>
        </tr>
        <tr>
          <td>Jess</td>
          <td>13</td>
          <td>female</td>
        </tr>
       </table>
      </div>
   <td>
</table>

How to align 3 divs (left/center/right) inside another div?

With that CSS, put your divs like so (floats first):

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

P.S. You could also float right, then left, then center. The important thing is that the floats come before the "main" center section.

P.P.S. You often want last inside #container this snippet: <div style="clear:both;"></div> which will extend #container vertically to contain both side floats instead of taking its height only from #center and possibly allowing the sides to protrude out the bottom.

Is it really bad idea to group tr tags with div?

divs immediately inside a table tag is invalid. use tbody instead

Select all 'tr' except the first one

By adding a class to either the first tr or the subsequent trs. There is no crossbrowser way of selecting the rows you want with CSS alone.

However, if you don't care about Internet Explorer 6, 7 or 8:

tr:not(:first-child) {
    color: red;
}

How to append a div tag into a tr tag with exactly position of tr tag

Just go with this and you don't need jquery if you want to highlight

table {    font-family: arial, sans-serif;    border-collapse: collapse;    width: 100%;}
td, th {    border: 1px solid #dddddd;    text-align: left;    padding: 8px;}
tr:nth-child(even) {    background-color: #dddddd;}#playingBar {  position: absolute;     margin: 0 0 0 0;   padding: 0 0 0 0;    width: 100%;    height: 100%;    background-color: rgba(0,255,0,0.4);    text-align: center; /* To center it horizontally (if you want) */    line-height: 30px; /* To center it vertically */    color: white;}
tr#highlight {background-color: rgba(0, 255, 0, 0.4);}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><body>
<table>  <tr>    <th>Company</th>    <th>Contact</th>    <th>Country</th>  </tr>  <tr>    <td>Alfreds Futterkiste</td>    <td>Maria Anders</td>    <td>Germany</td>  </tr>  <tr id="highlight">    <td>Centro comercial Moctezuma</td>    <td>Francisco Chang</td>    <td>Mexico</td>  </tr>  </table>
</body>

<Div> into a <Tr>: Is It Correct