After closing the last topic because I thought it was completely answered, it turns out that's not the case. Link: Space between two td or tr tags The line-height: 0; isn't very helpful in this situation. In the original work I'm doing with other elements, the line height is condensing all content into a very small line, except for images. While I could apply line-height: 0; to specific td elements and not all tds, the main goal remains to eliminate the space between the tds as it used to be in HTML4, I believe. Hoping someone knows the solution. Thank you!
Here's an ''example''
<table class="main-table-default">
<tr>
<td>
<table class="main-table-header-default">
<tr>
<td><img src="http://i1.ytimg.com/vi/OguOU5cyikI/hqdefault.jpg" border="0">
</td>
</tr>
<tr>
<td><img src="http://i1.ytimg.com/vi/OguOU5cyikI/hqdefault.jpg" border="0">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
</td>
</tr>
<tr>
<td>random text<br><Br>
</td>
</tr>
</table>
I have found a solution, although it's quite ugly. My current approach involves setting line-height: 0; for a specific td, then setting line-height: 100% for the other tds within that td. It seems complicated and there must be a better way to achieve this. Otherwise, it looks very messy :/