CODEWITHSUNDEEP
jsphtml-tablejstl
MarkKush
MarkKush

Reputation: 103

c:forEach displays everything in a single table row

At the moment I am doing a project in which I need to display information in a column from my database, but for some reason they are displayed in a row. Now the display looks like this:

enter image description here

I am also attaching the code from my jsp page :

<table border="1"
       cellspacing="0" cellpadding="3"
       style="font-size: small; line-height: 100px; border-color: #D1EEEE">
    <tr bgcolor="#DCDCDC" align="left" style="border-color: #838B83">
        <th width="250px">Discipline</th>
        <th width="100px">Mark</th>
    </tr>

    <c:forEach items="${Disc}" var="Dis">
        <td style="padding-bottom: 20px">${Dis.discipline}</td>
        <td style="padding-bottom: 20px">0</td>
    </c:forEach>

    <td/>
</table>

How is this caused and how can I solve it?

Upvotes: 0

Views: 615

Answers (2)

MarkKush
MarkKush

Reputation: 103

I managed to find a solution - it was obvious. It was necessary to: Add <tr> and </tr> to the loop. Remove the obscure <td/>.

               <table>
                    <tr>
                        <td style="padding: 50px 0 0 0">
                            <table border="1"
                                   cellspacing="0" cellpadding="3"
                                   style="font-size: small; line-height: 100px; border-color: #D1EEEE">
                                <tr bgcolor="#DCDCDC" align="left" style="border-color: #838B83">
                                    <th width="250px">Discipline</th>
                                    <th width="100px">Mark</th>
                                </tr>


                                    <c:forEach items="${Disc}" var="Dis">
                                <tr>
                                <td style="padding-bottom: 20px">${Dis.discipline}</td>
                                        <td style="padding-bottom: 20px">0</td>
                                </tr>
                                </c:forEach>
                                
                            </table>

Upvotes: 2

davo
davo

Reputation: 128

Boostrap is not a bad idea (mentioned and linked in Bhola Galy's answer). But if you definitely need to use a table for some reason, know that <tr> stands for "table row." A <td> tag and closing tag enclose a cell of data. A <th> is a table header.

MDN's article on table basics is useful.

Not sure if this is exactly what you mean, but below I've added <tr>s wrapping what you might want as a row. Within a single <tr>, elements placed there will fall into a row.

This example is only a subset of your snippet, but may show the principle.

<table cellspacing="0">
    <tr>
        <td>
            <table border="1" cellspacing="0" cellpadding="3"
                style="font-size: small; line-height: 25px; border-color: #D1EEEE">
                <tr>
                    <th>Name</th>
                    <td style="vertical-align: middle;">(Name here)</td>
                </tr>
                <tr>
                    <th>Surname</th>
                    <td style="vertical-align: middle;">(Surname here)</td>
                </tr>
                <tr>
                    <th>Group</th>
                    <td style="vertical-align: middle;">(Group here)</td>
                </tr>
                <tr>
                    <th>Date of enrollment</th>
                    <td style="vertical-align: middle;">(Date here)</td>
                </tr>

            </table>
        </td>
    </tr>
</table>

Most Internet users are on devices that differ greatly in screen size. By default Bootstrap acknowledges the need for responsiveness to differing screen sizes.

Upvotes: 0

Related Questions