HTML & CSS: row in colum in the table

Question

I am creating a table but I am having trouble in the last panel (Condition). I want the table have 2 rows but I have tried and failed, how to create in a 2 row colum?

likely this image

I tried everything but could not, you can explain it to me Thank a lot

<table id="items">
        <tr>
            <th width="25%">Prestation</th>
            <th width="10%">Prix Unitaire</th>
            <th width="10%">Quantity</th>
            <th width="10%">Montant</th>
            <th width="45%">Condition</th>
        </tr>

        <tr class="item-row">
            <td class="item-name">
                <div class="delete-wpr"><input type="text" style="width: px; height: 47px;"><a class="delete" href="javascript:;" title="Remove row">X</a></div>
            </td>

            <td><input type="text" class="cost" style="width: 100px; height: 47px;"></td>

            <td><input type="text" class="qty" style="width: 60px; height: 47px;"></td>
            <td><span class="price"></span></td>

            <tr class="condition">
            </tr>

            <tr id="hiderow">
                <td colspan="5"><a id="addrow" href="javascript:;" title="Add a row">Add a row</a></td>
            </tr>

            <tr>
                <td colspan="1" class="blank"> </td>
                <td colspan="2" class="total-line">Subtotal</td>
                <td class="total-value">
                    <div id="subtotal"></div>
                </td>
            </tr>
            <tr>

                <td colspan="1" class="blank"> </td>
                <td colspan="2" class="total-line">Total</td>
                <td class="total-value">
                    <div id="total"></div>
                </td>
            </tr>
            <tr>
                <td colspan="1" class="blank"> </td>
                <td colspan="2" class="total-line">Montant payé</td>

                <td class="total-value"><input type="text" id="paid" style="width: 50px; heigth: ;"></td>
            </tr>
            <tr>
                <td colspan="1" class="blank"> </td>
                <td colspan="2" class="total-line balance">Solde dû</td>
                <td class="total-value balance">
                    <div class="due"></div>
                </td>
            </tr>
</table>

Answer 1

I am not sure about your question. If you mean, have one column in 2 row, try use rowspan="2" in tag <row> instead of colspan .

• Colspan will stretch one column through columns.
• Rowspan will stretch one row through rows.