Placing content underneath each row of a table

Question

I would like to put custom data underneath each row of table. Here is what I am doing

<table class="table" id="foo">
    <tr>
        <th>
            Name
        </th>
        <th>
            Detail
        </th>
        <th>
            Custom
        </th>
        <th>
            Properties
        </th>
        <th></th>
    </tr>

        <tr>
            <td>
                Col0
            </td>
            <td>
                Col1
            </td>
            <td>
               Col2
            </td>
            <td>
               Col3
            </td>
            <td>
                Col4
            </td>
        </tr>

        <tr>
           someData2
        </tr>

</table>

and this is what I get

someData2
Name    Detail  Custom  Properties  
Col0    Col1    Col2    Col3    Col4

I would like someData to appear after the row (Col0,Col1,...). Basically i will have a row then some data underneath that row. Then another row and the pattern continues. Can anyone tell me how i can place someData2 after the row ? and what I am doing wrong here? I know i can do it if I enclose it in a someData2 but then it only has the width of one column i would like to tell it to use the entire space.

Answer 1

This is a very basic HTML question, you need a TD with a colspan attribute:

<table class="table" id="foo">
<tr>
    <th>
        Name
    </th>
    <th>
        Detail
    </th>
    <th>
        Custom
    </th>
    <th>
        Properties
    </th>
    <th></th>
</tr>

    <tr>
        <td>
            Col0
        </td>
        <td>
            Col1
        </td>
        <td>
           Col2
        </td>
        <td>
           Col3
        </td>
        <td>
            Col4
        </td>
    </tr>

    <tr>
      <td colspan="5">
        someData2
      </td>
    </tr>
</table>

Read here: https://html.com/attributes/td-colspan/