Problems with re-rendering HTML components in VisualForce

Question

I seem to be far outside my element here with this HTML/VF balance I'm trying to strike. I am having multiple problems and at this point, and am really banging my head against a wall.

I have subsections of an several html table rows that I would like to conditionally render. Allow me to walk you through the difficulties I've had as context for my current code.

I had originally wrapped up some td elements inside an outputpanel with conditional rendering. Problem is, the output is super wacky when the panel is rendered. I then learned that layout="none" is the ticket to not imposing additional tags that can cause this issue. However, I quickly learned that the render conditions were no longer being honored after making this change, come to find a blog that says layout="none" and conditional rendering do not play nicely. Okay, well darn.

So ... I decided to add conditional rendering to each child element instead as a workaround (inside each td is an apex:* component where this could be applied). This worked for both of the inputField components, but for some reason the outputText component would not rerender unless I gave it an id (not that I had to reference it anywhere, strange...), so I did, and all seemed to rerender properly.

However, now my inputs in the inputFields are not being passed to the controller for some reason, and when I go to save I receive some validation errors that stem from the fields being null (which they shouldn't be...). At this phase I feel I just need help. Here is a snippet from my current build:

<tr styleClass="standardLook">
    <td style="text-align:right"><apex:outputLabel value="Sunday" styleClass="standardLook"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td>
        <apex:actionRegion >
            <apex:selectList value="{!ds.Sun__c}" size="1">
                <apex:selectOptions value="{!dayOptions}"/>
                <apex:actionSupport event="onchange" rerender="sunRow"/>
            </apex:selectList>
        </apex:actionRegion>
    </td>
    <apex:outputPanel id="sunRow" layout="none">
        <td style="text-align:center"><apex:inputField rendered="{!ds.Sun__c == 'Select Hours'}" value="{!ds.SunStart__c}" style="width:50px; text-align:center" html-placeholder=" - - : - - "/></td>
        <td style="text-align:center"><apex:outputText rendered="{!ds.Sun__c == 'Select Hours'}" id="text1" style="width:20px; font-size:13px; color:black; padding-right:4px" value="to"/></td>
        <td style="text-align:center"><apex:inputField rendered="{!ds.Sun__c == 'Select Hours'}" value="{!ds.SunEnd__c}" style="width:50px; text-align:center" html-placeholder=" - - : - - "/></td>
    </apex:outputPanel>
</tr>

I am not married to any of my methods - I've only been trying to get through, and some of this may be quick and dirty. Any feedback you can provide for how to clean this up and follow any best practices is greatly appreciated. Here are my questions:

1. Why can't I conditionally rerender an outputPanel with layout="none"?

2. Why does my apex:outputText not rerender unless it has an id while inside an outputPanel with layout="none"?

3. Why is my user input to the apex:inputFields not being passed to the controller when rerendering the outputPanel where layout="none"? (When I remove the layout attribute, or instead rerender the outputPanel that wraps the entire table, the inputs are successfully passed)

UPDATE: I'm taking Lance Shi's advice and re-working this using apex:variable to wrap these td components. Though this section will not rerender on selectlist change as expected. It will rerender when I rerender the outputpanel surrounding the tr tags, but this is not desired.

<tr styleClass="standardLook">
    <td style="text-align:right"><apex:outputLabel value="Sunday" styleClass="standardLook"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</td>
    <td>
        <apex:actionRegion >
            <apex:selectList value="{!ds.Sun__c}" size="1">
                <apex:selectOptions value="{!dayOptions}"/>
                <apex:actionSupport event="onchange" rerender="sunRow"/>
            </apex:selectList>
        </apex:actionRegion >
    </td>
    <apex:variable id="sunRow" var="s" value="s" rendered="{!ds.Sun__c == 'Select Hours'}">
        <td style="text-align:center"><apex:inputField value="{!ds.SunStart__c}" style="width:50px; text-align:center" html-placeholder="- - : - -"/></td>
        <td style="text-align:center"><apex:outputText id="text1" style="width:20px; font-size:13px; color:black; padding-right:4px" value="to"/></td>
        <td style="text-align:center"><apex:inputField value="{!ds.SunEnd__c}" style="width:50px; text-align:center" html-placeholder="- - : - -"/></td>
    </apex:variable>
</tr>

Answer 1

If I understand correctly, you are using <apex:outputPanel> only for rendering.

If that is the case...

Use the following code:

<apex:variable var="foo" value="foo" rendered="{!(YOUR_ATTRIBUTE)}">
    <td></td>
</apex:variable>

Works far better than outputPanel.