Formatting nested tables

Question

From this thread, I was suggested to use a nested table which in turn, performed the intended operation/function.

<table>
    <thead class="center">
        <tr>
            <th><a href="viewfaculty?columnName=professor_id">ID</a></th>
            <th><a href="viewfaculty?columnName=professor_last_name">L. Name</a></th>
            <th>F. Name</th>
            <th>M. Name</th>
            <th>Sex</th>
            <th><a href="viewfaculty?columnName=professor_employment_status">Empl. Status</a></th>
            <th><a href="viewfaculty?columnName=professor_department">Dept.</a></th>
            <th>Modify</th>
        </tr>
    </thead>

    <tbody>
        <c:forEach var="professor" items="${facultyList}">
        <tr>
            <td>
                <form action="savechanges" method="post">
                <table>
                    <tr>
                        <td align="center">${professor.profId}</td>
                        <td>${professor.profLastName}</td>
                        <td>${professor.profFirstName}</td>
                        <td>${professor.profMiddleName}</td>
                        <td align="center">${professor.profSex}</td>
                        <td align="center">${professor.profEmplStatus}</td>
                        <td align="center">${professor.profDept}</td>

                        <td align="center">
                            <c:choose>
                                <c:when test="${professor.profEmplStatus.equals('FULL')}">
                                    <select name="profEmplStatus" required>
                                        <option value="FULL" selected>FULL</option>
                                        <option value="PART">PART</option>
                                        <option value="RET">RET</option>
                                        <option value="TRMTD">TRMTD</option>
                                    </select>
                                </c:when>

                                <c:when test="${professor.profEmplStatus.equals('PART')}">
                                    <select name="profEmplStatus" required>
                                        <option value="FULL">FULL</option>
                                        <option value="PART" selected>PART</option>
                                        <option value="RET">RET</option>
                                        <option value="TRMTD">TRMTD</option>
                                    </select>
                                </c:when>

                                <!-- more <c:when> -->
                            </c:choose>
                        </td>

                        <td align="center">
                            <c:choose>
                                <c:when test="${professor.profDept.equals('BSCS-SE')}">
                                    <select name="profDept" required>
                                        <option value="BA-MMA">BA-MMA</option>
                                        <option value="BFDT">BFDT</option>
                                        <option value="BS-AN">BS-AN</option>
                                        <option value="BS-GPD">BS-GPD</option>
                                        <option value="BSBA-FM">BSBA-FM</option>
                                        <option value="BSBA-MKT">BSBA-MKT</option>
                                        <option value="BSCS-SE" selected>BSCS-SE</option>
                                        <option value="BSIT-WD">BSIT-WD</option>
                                        <option value="GENED">GENED</option>
                                    </select>
                                </c:when>

                                <c:when test="${professor.profDept.equals('GENED')}">
                                    <select name="profDept" required>
                                        <option value="BA-MMA">BA-MMA</option>
                                        <option value="BFDT">BFDT</option>
                                        <option value="BS-AN">BS-AN</option>
                                        <option value="BS-GPD">BS-GPD</option>
                                        <option value="BSBA-FM">BSBA-FM</option>
                                        <option value="BSBA-MKT">BSBA-MKT</option>
                                        <option value="BSCS-SE">BSCS-SE</option>
                                        <option value="BSIT-WD">BSIT-WD</option>
                                        <option value="GENED" selected>GENED</option>
                                    </select>
                                </c:when>

                                <!-- more <c:when> -->
                            </c:choose>
                        </td>

                        <td class="center">
                            <input type="hidden" name="profId" value="${professor.profId}" />
                            <input type="submit" value="Save" />
                        </td>
                    </tr>
                </table>
                </form>
            </td>
        </tr>
        </c:forEach>
    </tbody>
</table>

The tables just appeared messed up though, as seen in this screenshot:

enter image description here

How to do it so it appears as originally intended?

enter image description here

Are you sure you want nested tables, not just `` rows for each record? — Andrew Dunai, Jan 08 '15 at 11:00
@AndrewDunai If only we could do that. Reason is that it is illegal to put a `
` around a `` hence the nested table. — silver, Jan 08 '15 at 11:04
That question was about parameters interceptor, and I didn't like to tie it with formatting html, because you didn't provide enough information for it. That's why I suggested you to post this question. And please reference a question, not the answer. — Roman C, Jan 08 '15 at 11:05
Don't nest the tables. It's semantically wrong and is the cause of your layout problem. See [this question](http://stackoverflow.com/questions/5967564/form-inside-a-table) instead. — Quentin, Jan 08 '15 at 11:12
@ohtph This question is pure html 1+. Add the right number of colspans and you will be ok. — Roman C, Jan 08 '15 at 11:18
@RomanC — It's a tabular data structure, so a single table makes sense. — Quentin, Jan 08 '15 at 11:25
@RomanC — What do colspans have to do with it? There's no data that needs to span multiple columns. It's a very simple tabular structure. — Quentin, Jan 08 '15 at 11:26
@Quentin I don't understand what are you saying. Would you provide the answer? — Roman C, Jan 08 '15 at 11:30
@RomanC — To answer the question I would have to fix a layout caused by broken HTML instead of fixing the broken HTML. The solution to the problem is to ignore the question and fix the HTML instead. At which point it becomes a duplicate of the question I linked to in my earlier comment. — Quentin, Jan 08 '15 at 11:33
@Quentin, there is no HTML in your thread that will suggest how to "fix the broken HTML" here. I did comment there on _why_ I cannot use a single table, explaining my current scenario. — silver, Jan 08 '15 at 11:39
Quote: "Use one form around the entire table. Then either use the clicked submit button to determine which row to process (to be quick) or process every row (allowing bulk updates)." It's very simple. — Quentin, Jan 08 '15 at 11:41
@Quentin You don't understand what you by *clearly said* nobody can understood except may be you. The answer should provide a usable code example if it does matter or if OP is asked about. — Roman C, Jan 08 '15 at 11:44
@RomanC – That answer has a **lot** of up votes for a one that only I can understand. If there is anything about it that needs clarification, then I'd be happy to explain further. If such an explanation would benefit from an example than I'd probably give one. Before that happens, someone needs to explain what about it is unclear. — Quentin, Jan 08 '15 at 11:47
@Quentin No, not in this way. Stay happy with the number of upvotes except one, which is on my answer. And welcom to [struts2] tag, waiting your posts :/. — Roman C, Jan 08 '15 at 11:51
@RomanC, thanks for trying to help. I have come to think Quentin may not be familiar with Struts2 and JSTL, hence why he may not get why the `` is submitting as many times as the row and why wrapping a single table in a form won't work. — silver, Jan 08 '15 at 12:03
@ohtph For the best to get answer about html you need to post a html output of the page, just copy what you see in the browser source window. — Roman C, Jan 08 '15 at 12:16
I have no trouble understanding a foreach loop in a template. It doesn't stop you putting a single table in a form. You just move the form tags outside of the for each loop and leave the inputs inside it. This will, obviously, submit all the inputs inside the form which is why, as per the answer on the other question and the quote above, you use the submit button that is clicked to determine which set of fields to process on the server. — Quentin, Jan 08 '15 at 12:24
"You just move the form tags outside of the for each loop and leave the inputs inside it." - Doing so means putting the `
` outside the `` (making it a child of ``), which, clearly from your answer with many upvotes (Quote: A form is not allowed to be a child element of a table, tbody or tr.), is **not allowed**. Do you get it now? — silver, Jan 08 '15 at 12:35
**sigh**. Not **immediately** outside the for each loop. Far enough outside it that the `
` becomes the parent element of the ``. To quote another part of the answer you are quoting: "**Use one form around the entire table.**" — Quentin, Jan 08 '15 at 12:36
Placement is crucial as that is the problem here, so vague statements are not going to be helpful too. And no, it cannot be placed outside the form as that has been done with Exceptions. Quentin, if you are NOT going to provide usable code, then don't comment anymore adding confusion to this already lengthy discussion. Thanks. — silver, Jan 08 '15 at 12:39
As mentioned in other comments on other questions, the exception appears to be caused by you failing to implement the "use the clicked submit button to determine which row to process" part of the answer you are quoting. You should write correct HTML and then fix the exception instead of writing incorrect HTML (which causes you unsolved layout issues) to avoid dealing with the exception. — Quentin, Jan 08 '15 at 12:42

score 0 · Accepted Answer · answered Jan 08 '15 at 12:40

0

The html is designed with nested tables which include a form tag inside a cell of the outer table. From the picture of the output in the browser you see that the nested table occupied the space belong to the first column. But you need both tables to have the same number of collumns. Count a number of columns in the nested table and use colspan attribute of <td> tag to spread a cell to occupy space dedicated to other columns of the outer table.

<td colspan="10" align="right" valign="top">
   <form action="savechanges" method="post">
      <table style="width:100%;" cellspacing="0" cellpadding="0" border="0">

answered Jan 08 '15 at 12:40

Roman C

47,329
33
60
147

That deals with all the sub tables being under "ID" from the main table. It doesn't make the columns of those sub tables line up with each other. – Quentin Jan 08 '15 at 12:43
@RomanC, it worked! =) See [here](http://s16.postimg.org/p47os02qt/new.png) for screenshot. I have also tested updating a row, and it also worked. I only have to adjust the column widths a bit, but all is fine. Thanks also for sticking to this question even if it went in circles. Appreciated and marked accepted answer. =) – silver Jan 08 '15 at 13:06
The column widths are still broken and you consider that "working"? – Quentin Jan 08 '15 at 13:08
1

@Quentin, stop being bitter. – silver Jan 08 '15 at 13:09
This simply doesn't do what you asked! – Quentin Jan 08 '15 at 13:09
1

It does, adjusting column widths is doable. And you never provided usable code. – silver Jan 08 '15 at 13:11
The only way you could adjust the column widths would be to specify absolute widths for all of them, which will be exceedingly fragile (especially since the data for them appears to be dynamically generated) and likely to break. My not providing you with usable code (which I didn't do for this question because it isn't a sensible problem to try to solve) doesn't make this a good answer. – Quentin Jan 08 '15 at 13:13
@ohtph I have counted 10 `td`s on the record, but you have only 8 `th`s. Shouldn't it be a problem? – Roman C Jan 08 '15 at 13:14
@RomanC — As mentioned several times, if you (or anyone) has trouble understanding that answer then they can ask for clarification about the part they do not understand. I'm not going to provide a generic example because such an example is unlikely to make anything clearer. I will address specific questions. – Quentin Jan 08 '15 at 13:22
1

@Quentin, you don't even have an answer for this question. You don't get to say what makes a good one. Also, if you feel strongly not providing an answer (which is your choice, I don't mind), why do you keep hanging around this thread? :| – silver Jan 08 '15 at 13:24
Since when was being able to solve a problem a prerequisite for criticising failed attempts to solve it? – Quentin Jan 08 '15 at 13:25
Then why not post your "successful" attempt? – silver Jan 08 '15 at 13:27
@ohtph — As mentioned several times, you appear to have skipped one of the steps in that answer. I've pointed that out several times already. Many solutions will fail if you miss parts of them out. – Quentin Jan 08 '15 at 13:37
Problem has been addressed. Bye. – silver Jan 08 '15 at 13:38

Formatting nested tables

1 Answers1