title: How to create inline table elements in HTML5?
body: <p><strong>Goal:</strong> Display some text with a paired word-for-word translation directly underneath.  Text must wrap in window.  Must work in HTML5.  Solution should look like this:</p>
  
  <p><a href="http://example.teadroid.com/home/screenshots/wraptable.png" rel="nofollow">Screenshot</a></p>
  
  <p>Reason for HTML5 is I want the page to be supported in jQuery and jQuery Mobile.  Solution doesn't have to use tables, I just want to display these word pairs above/below each other.</p>
  
  <p>This is my first post here but already been soaking up the wisdom from stackoverflow for weeks.  What a great resource!  Looking forward to some smart replies.</p>
  
  <blockquote>
    <p><strong>Additional info:</strong></p>
    
    <p>I have done it for non-HTML5 by using inline tables, but as soon as
    you put in an HTML5 identifying "!DOCTYPE html" tag, it breaks and
    the browser treats the tables as block level elements.</p>
    
    <p>My solution for non-HTML5:</p>
  </blockquote>
  
  <pre><code>&lt;HTML&gt;
  &lt;BODY&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;hello&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;bonjour&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;folks&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;les gens&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;thank you&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;je vous remercie&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;for your&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;pour votre&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;helping me&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;aide-moi&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;solve&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;à résoudre&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;this&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;ce&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;intractable&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;problème&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;problem&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;insoluble&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;.&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;hello&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;bonjour&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;folks&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;les gens&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;thank you&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;je vous remercie&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;for your&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;pour votre&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;helping me&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;aide-moi&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;solve&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;à résoudre&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;this&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;ce&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;intractable&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;problème&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;problem&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;insoluble&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;table border="1" style="display:inline"&gt;&lt;tr&gt;&lt;td&gt;.&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;.&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>