apex:outputtext automatically creates a table td element. How to prevent it?

Question

I have built an html table inside apex:pageBlockSection and trying to display a number field in currency format in one of the cell (i.e., in a table td). Since i need to format the number to currency format i have used apex:outputText with apex:param. But the output is not what i expected. apex:outputText automatically creates a td element and render the output. So, how could i prevent it from happening. Because the issue is it creates an additional td and the table messed up now. Any suggestions please. Is there any other workaround for this issue?

    <apex:pageBlockSection columns="2">
        <table class="list" cellspacing="0" cellpadding="0" border="0">
            <tr class="headerRow">
                <th class=" zen-deemphasize">Aging Periods</th>
                <th class=" zen-deemphasize">Invoice Count</th>
                <th class="CurrencyElement zen-deemphasize" scope="col">Amount</th>
            </tr>

            <tr class="dataRow even first">
                <td>0 to 30 Days</td>
                <td class=" dataCell  ">{!CustCreditInfo.InvLessThan30}</td>
                <td class=" dataCell  ">
                    <apex:outputText value="{0,number,currency}">  
                        <apex:param value="{!CustCreditInfo.AmtLessThan30}" />  
                    </apex:outputText>              
                </td>
            </tr>

            <tr class="dataRow even">
                <td>31 to 60 Days</td>
                <td class=" dataCell  ">{!CustCreditInfo.Inv31To60}</td>
                <td class=" dataCell  CurrencyElement">{!CustCreditInfo.Amt31To60}</td>
            </tr>

            <tr class="dataRow odd">
                <td>61 to 90 Days</td>
                <td class=" dataCell  ">{!CustCreditInfo.Inv61To90}</td>
                <td class=" dataCell  CurrencyElement">{!CustCreditInfo.Amt61To90}</td>
            </tr>

            <tr class="dataRow even">
                <td>91 to 120 Days</td>
                <td class=" dataCell  ">{!CustCreditInfo.Inv91To120}</td>
                <td class=" dataCell  CurrencyElement">{!CustCreditInfo.Amt91To120}</td>
            </tr>

            <tr class="dataRow odd last">
                <td>More than 120 Days</td>
                <td class=" dataCell  ">{!CustCreditInfo.InvGreaterThan121}</td>
                <td class=" dataCell  CurrencyElement">{!CustCreditInfo.AmtGreaterThan121}</td>
            </tr>

        </table>

        </apex:pageBlockSection>

Rendered HTML (from Inspect Element firefox)

<table class="list" border="0" cellpadding="0" cellspacing="0">
                    <tbody><tr class="headerRow">
                        <th class=" zen-deemphasize">Aging Periods</th>
                        <th class=" zen-deemphasize">Invoice Count</th>
                        <th class="CurrencyElement zen-deemphasize" scope="col">Amount</th>
                    </tr>

                    <tr class="dataRow even first">
                        <td>0 to 30 Days</td>
                        <td class=" dataCell  ">0</td>
                        <td class=" dataCell  "></td><td class="dataCol  first " colspan="2">$0.00</td></tr><tr><td class="dataCol  last " colspan="2">                 
                        </td>
                    </tr>

                    <tr class="dataRow even">
                        <td>31 to 60 Days</td>
                        <td class=" dataCell  ">1</td>
                        <td class=" dataCell  CurrencyElement">20.00</td>
                    </tr>

                    <tr class="dataRow odd">
                        <td>61 to 90 Days</td>
                        <td class=" dataCell  ">0</td>
                        <td class=" dataCell  CurrencyElement">0.00</td>
                    </tr>

                    <tr class="dataRow even">
                        <td>91 to 120 Days</td>
                        <td class=" dataCell  ">0</td>
                        <td class=" dataCell  CurrencyElement">0.00</td>
                    </tr>

                    <tr class="dataRow odd last">
                        <td>More than 120 Days</td>
                        <td class=" dataCell  ">55</td>
                        <td class=" dataCell  CurrencyElement">54655.95</td>
                    </tr>

                </tbody></table>

Screen shot of the output:

Answer 1

If it is creating the for you, you may able to try:

<apex:outputText value="{0,number,currency}" styleClass="dataCell">  
    <apex:param value="{!CustCreditInfo.AmtLessThan30}" />  
</apex:outputText>

However, with that said, this isn't really an issue with <apex:outputText> but with <apex:pageBlockSection>. The formatting is coming from the <apex:pageBlockSection> because traditional <apex:outputText> just renders as a <span>. If you look at the documentation for <apex:pageBlockSection>:

A section of data within an <apex:pageBlock> component, similar to a section in a standard Salesforce page layout definition.

An <apex:pageBlockSection> component consists of one or more columns, each of which spans two cells: one for a field's label, and one for its value. Each component found in the body of an <apex:pageBlockSection> is placed into the next cell in a row until the number of columns is reached. At that point, the next component wraps to the next row and is placed in the first cell.

To add a field from a Salesforce object to an , use an <apex:inputField> or <apex:outputField> component. Each of these components automatically displays with the field's associated label. To add fields for variables or methods that are not based on Salesforce object fields, or to customize the format of Salesforce object field labels, use an <apex:pageBlockSectionItem> component. Each <apex:inputField>, <apex:outputField>, or <apex:pageBlockSectionItem> component spans both cells of a single column.

Notice how this specific tag is really only supposed to be used for a field. What is happening is that your <apex:pageBlockSection> is trying to format the <apex:outputText> like it is the only thing inside the tag. Unfortunately, that is what it expects. You may be able to do something by wrapping everything in an <apex:outputText> or something, but that kind of breaks what that tag is for as well. To be honest, your best bet is to get this code out of the <apex:pageBlockSection> if you can.