title: What is the correct inline CSS to replace this HTML table?
body: <p>Apologies for the low quality of this question.  CSS and HTML are not my usual stomping ground.  I have reached the stage where I'm just going to ask: how the heck do I do this?</p>
  
  <p>I'm working on a friend's site (Wordpress, self-hosted) setting up some new pages for her.  I don't want to change the theme's stylesheet, and creating child themes is beyond me, so I think I'm limited to inline CSS (correct me if I'm wrong - I'm also a Wordpress noob).</p>
  
  <p>I currently have the following HTML table, which begins as follows:</p>
  
  <pre><code>&lt;table&gt;
  &lt;tbody&gt;
  &lt;tr&gt;
  &lt;td style="vertical-align: top; padding-right: 20px;"&gt;
  &lt;h2 style="padding-top: 5px;"&gt;Swiss balls/eggs&lt;/h2&gt;
  &lt;p&gt;Large inflatable balls of varying sizes that provide support and/or an unstable base to add challenge and variety to your workout. For those with balance issues, inflatable eggs roll in one direction only for security.&lt;/p&gt;&lt;/td&gt;
  &lt;td style="width: 160px;"&gt;&lt;img alt="Swiss ball" src="/wp-content/uploads/2013/08/eqpt-swissball-trans.png" /&gt;&lt;/td&gt;
  &lt;td style="vertical-align: top;" rowspan="6"&gt;&lt;img alt="Fitness equipment" src="/wp-content/uploads/2013/08/equipment-vertical.jpg" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>...and then has 5 further repeating row elements such as this:</p>
  
  <pre><code>&lt;tr&gt;
  &lt;td style="vertical-align: top;"&gt;
  &lt;h2 style="padding-top: 5px;"&gt;Pilates balls&lt;/h2&gt;
  &lt;p&gt;Smaller, soft inflatable balls of varying size that can add support, postural correction and resistance for many of the classic exercises.&lt;/p&gt;&lt;/td&gt;
  &lt;td style="width: 160px;"&gt;&lt;img alt="Small Pilates balls x 5" src="/wp-content/uploads/2013/08/eqpt-smallpilatesballsx5-trans.png" /&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>This produces a 3 column by 6 row layout similar to this.</p>
  
  <p><img src="https://i.stack.imgur.com/F68Rf.png" alt="Layout example"></p>
  
  <p>I have spent the last few hours browsing forums and stackoverflow etc. (e.g. <a href="https://stackoverflow.com/questions/218760/how-do-you-keep-parents-of-floated-elements-from-collapsing">here</a>) attempting the various implementations of floating divs, but while I can get examples to work with small amounts of text and no images, as soon as I replace the placeholder text with my images and text, it all falls apart and the divs start appearing one after the other vertically.</p>