[SalesForce] and tags within rendering above the table

I am making a table that has within it to fill it with rows and fill the cells with information.

I cannot use a pageBlockTable as I am using many sets of information that all need to go into the same table, and because I am using bootstrap and need to make the page appear a certain way.

For some reason when the page renders as HTML the Table, and the repeats inside of it render incorrectly, with the values being rendered as tags above the actual table.

Visualforce:

<apex:outputPanel id="priceTableBreakdown" rendered="{!selectedProducts_OneTime.size != 0 || customContentList_OneTime.size != 0 || selectedProducts_Monthly.size != 0 || customContentList_Monthly.size != 0 || selectedProducts_Yearly.size != 0 || customContentList_Yearly.size != 0}">
    <table class="table table-bordered table-striped">
        <apex:outputPanel rendered="{!selectedProducts_OneTime.size != 0 || customContentList_OneTime.size != 0}">
            <tr>
                <td class="text-center info" colspan="5">
                    One Time Fees
                </td>
            </tr>                                        

            <tr>
                <th><div class="pull-right">Item</div></th>
                <th class="text-center">Quantity</th>
                <th class="text-center">Unit Price</th>
                <th class="text-center">Total Fee</th>
                <th class="text-center">Total Discounted Fee</th>
            </tr>

            <apex:repeat value="{!selectedProducts_OneTime}" var="listItem">
                <tr>
                    <!-- <td>'s and their content go here -->
                </tr>
            </apex:repeat> 

            <apex:repeat value="{!selectedProducts_Monthly}" var="listItem">
                <tr>
                    <!-- <td>'s and their content go here -->
                </tr>
            </apex:repeat> 
            <apex:repeat value="{!selectedProducts_Yearly}" var="listItem">
                <tr>
                    <!-- <td>'s and their content go here -->
                </tr>
            </apex:repeat>
        </apex:outputPanel>
    </table>
</apex:outputPanel>

HTML Render:

<span id="j_id0:j_id4:priceTableBreakdown">
    <span id="j_id0:j_id4:j_id121">
        One Time Fees 
        <div class="pull-right">Item</div>
        QuantityUnit PriceTotal FeeTotal Discounted Fee 
        <div class="pull-right">Activation &amp; Setup</div>
        <span id="j_id0:j_id4:j_id123:0:j_id127">10</span>
        $ 150.00
        <span id="j_id0:j_id4:j_id123:0:j_id136">$ 1,500.00</span>
        <span id="j_id0:j_id4:j_id123:0:j_id143">$ 1,500.00</span> 
        Total One Time Fees$ 150.00$ 1,500.00$ 1,500.00</span>
    <table class="table table-bordered table-striped"></table>
</span>

Is this a glitch, or is there something with how it's being put in causing it to render this way?