How to make this table structure responsive - html

Question

I'm trying to get a resposive table with a % and not hard coded pixel values, but the column in which I want to place the image gets very small when I resize the window.
HTML:
<TABLE BORDER=1 style="width: 90%; margin: 5%;">
<TR>
<TD width="70%">
<h4>ABOUT US</h4>
<p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
</p>
<p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
<br/><br/><br/><br/><br/>
</TD>
<TD width="30%" rowspan=2><img src="images/foto.jpeg"></TD>
</TR>
<TR>
<TD>
<h4>MEET THE TEAM</h4>
<p>content</p>
</TD>
</TABLE>
jsFiddle
Is there any way to do this so that the table resize in such manner that the column 2 becomes row 3? If I would have to do the same thing using divs I would by okay with that.

Answer 1

Here's a simple rule when it comes to responsive web design (or any web design in general)...
Never
Ever
Ever
... Use tables to define the layout of a page. Tables are designed to present tabular data not to define the layout of a page. Use div elements instead
A useful link to bear in mind is http://shouldiusetablesforlayout.com/.

Answer 2

Tables shouldn't be used for layout (as #davblayn pointed out), but if you want/need to use them:
HTML:
<TABLE BORDER=1 style="width: 90%; margin: 5%;">
<TR>
<TD id='firstItem' width="70%">
<h4>ABOUT US</h4>
<p spellcheck="false" style="padding: 15px;">content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent
</p>
<p>content contentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontentcontent</p>
<br/><br/><br/><br/><br/>
</TD>
<TD width="30%" id='responsiveItem' rowspan=2><img src="images/foto.jpeg"></TD>
</TR>
<TR>
<TD>
<h4>MEET THE TEAM</h4>
<p>content</p>
</TD>
</TABLE>
CSS:
#media all and (max-width: 699px) and (min-width: 520px) {
td{
width:100%;
}
#firstItem{
display:block;
}
#responsiveItem{
float:left;
}
}
jsFiddle
Play with resizing the JSFiddle window, the column with the image drops down to become a row when there isn't enough room.

Answer 3

Don't use tables for layout. You can't easily do what you want with CSS anyway, since you'd have to override the display property for multiple elements.

Answer 4

If by "responsive" you mean does not go screwy when text does not fit, and maintains image size (images do not scale nicely), then you can use this:
<table border="1" width="800px" height="250" style="min-width:800px; width: 90%; margin: 5%;">
<tr>
<td>
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
</td>
<td style="height: 250px; width: 250px;" rowspan="2">CONTENT</td>
</tr>
<tr>
<td>
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
CONTENT CONTENT CONTENT CONTENT
</td>
</tr>
</table>
Basically, you need to set minimum space to accomodate the content, then you can scale outwards as much as you want.
While yes, tables are generally frowned upon, it is another form of "WHY WOULD YOU WANT TO DO THAT" and since the question particularly asks for tables, there is no need to completely change the question to satisfy your pet peeve.
Tables work fine for websites, the main issue with them is that they take a while to set up, and once they are set up, they stay that way forever, and changing them is impossible without total re-tabling.
This does not appear to the main issue here.