Is a Div Inside a Td a Bad Idea

Is a DIV inside a TD a bad idea?

Using a div instide a td is not worse than any other way of using tables for layout. (Some people never use tables for layout though, and I happen to be one of them.)

If you use a div in a td you will however get in a situation where it might be hard to predict how the elements will be sized. The default for a div is to determine its width from its parent, and the default for a table cell is to determine its size depending on the size of its content.

The rules for how a div should be sized is well defined in the standards, but the rules for how a td should be sized is not as well defined, so different browsers use slightly different algorithms.

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

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

DIV inside a TD with rowspan

If we consider the fact that you will have the same height for your cells then you can do this relying on the height property:

td {  border: 1px #ddd solid;  text-align: center;  padding: 10px 20px;  position:relative;}
table {  border-spacing: 0;  border-collapse: collapse;}
.item {  background:red;}[class*="row-span"] {  position:absolute;  top:0;  left:0;  right:0;}.row-span-4 {  height:calc(400% + 3*1px);}.row-span-3 {  height:calc(300% + 2*1px);}.row-span-2 {  height:calc(200% + 1*1px);}.row-span-1 {  height:calc(100% + 0*1px);}

<table>  <tr>    <td></td>    <td>      <div class="item row-span-4"></div>    </td>    <td></td>    <td></td>    <td></td>    <td></td>  </tr>  <tr>    <td></td>    <td></td>    <td></td>    <td><div class="item row-span-3"></div></td>    <td></td>    <td></td>  </tr>  <tr>    <td></td>    <td></td>    <td></td>    <td></td>    <td></td>    <td><div class="item row-span-1"></div></td>  </tr>  <tr>    <td></td>    <td></td>    <td></td>    <td></td>    <td></td>    <td></td>  </tr>  <tr>    <td></td>    <td></td>    <td></td>    <td></td>    <td></td>    <td></td>  </tr>  <table>

Placing a div inside a table cell

<table cellspacing="0" cellpadding="0" border="0">

-- or --

td { padding:0 }

Is a Div Inside a Td a Bad Idea