[FIXED] Why are sequential TABLE elements displayed on new lines in browser?

Issue

I have 4 labels + radio buttons I want to display next to each other on the same line:

+--------+ +--------+ +--------+ +--------+
|  NONE  | |   NO   | |   Yes  | |  N/A   |
+--------+ +--------+ +--------+ +--------+
| Button | | Button | | Button | | Button |
+--------+ +--------+ +--------+ +--------+

Instead, each Label + Button is going onto a separate line in the browser (Chrome or MSIE 11). There are no explicit newline elements in the HTML. Why are they going onto their own line and how do I keep them together? This is one part of a form in a COTS product. I don't have full control over the generated HTML, CSS or JS.

As an extra bonus points question, why is jQuery automatically adding TBODY elements inside my TABLE? I'm not doing it.

Here's the HTML I generate with jQuery:

<span id="F1538.wrapper" class="fieldWidget">
       <table><tbody>
          <tr><td><label for="F1538">(None)</label></td></tr>
          <tr><td><input type="radio" name="F1538" value="0" checked="checked"></td></tr>
       </tbody></table>
       <table><tbody>
          <tr><td><label for="F1538">No</label></td></tr>
          <tr><td><input type="radio" name="F1538" value="782"></td></tr>
       </tbody></table>
       <table><tbody>
          <tr><td><label for="F1538">Yes</label></td></tr>
          <tr><td><input type="radio" name="F1538" value="783"></td></tr>
       </tbody></table>
       <table><tbody>
          <tr><td><label for="F1538">N/A</label></td></tr>
          <tr><td><input type="radio" name="F1538" value="784"></td></tr>
       </tbody></table>
    </span>

Solution

That's not how tables work.

First of all, each <table> is a block element, so unless specifically told not to, the next element after a table, will show up below it.

Within the tables, each <tr> represents a Table Row (they stack on top of each other). And within each row, each <td> represents a column of that row (they show up one next to each other, within that row).

If you really want to use a <table>, you must put the labels in the first <tr> and all the buttons in the second.

You may want to explore other options (most people would say you absolutely should, since semantically, this is not what a table is for). You can use 4 divs, each containing label + button, and make them either float next to each other, or use flex to achieve that same effect.

Answered By - Victoria Ruiz

Answer Checked By - David Goodson (PHPFixing Volunteer)