I have not the most difficult question, but unfortunately my knowledge in HTML is very weak. 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:
I am also attaching the code from my jsp page :
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div >
<table>
<tr>
<td><a href="${pageContext.request.contextPath}/">Home</a></td>
<td><a href="${pageContext.request.contextPath}/allStudents">Back</a></td>
</tr>
</table>
</div>
<div >
<h3>Displayed progress for the next student:</h3>
<table cellspacing="0">
<tr>
<td>
<table border="1" cellspacing="0" cellpadding="3"
style="font-size: small; line-height: 25px; border-color: #D1EEEE">
<tr bgcolor="#DCDCDC" align="left" style="border-color: #838B83">
<th width="100px">Name</th>
<th width="230px">Surname</th>
<th width="270px">Group</th>
<th width="220px">Date of enrollment</th>
</tr>
<form:form action="studentProgress" modelAttribute="student">
<form:hidden path="id"/>
<tr valign="bottom">
<td style="padding-bottom: 20px"><form:form path="name"/></td>
<td style="padding-bottom: 20px"><form:input path="surname"/></td>
<td style="padding-bottom: 20px"><form:select path="group"/></td>
<td style="padding-bottom: 20px"><form:textarea path="date"/></td>
</td>
</tr>
</form:form>
</table>
</td>
</tr>
<tr>
<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">
<td style="padding-bottom: 20px">${Dis.discipline}</td>
<td style="padding-bottom: 20px">0</td>
</c:forEach>
<td/>
</table>
<input type="hidden" name="id" value="">
<td style="padding: 50px 0 0 30px" valign="top">
<table
style="width: 450px" cellpadding="0" cellspacing="0">
<tr align="right">
<td>Select semester</td>
<td style="padding-left: 10px">
<select>
<c:forEach items="${semestr}" var="sem">
<option value="">${sem.name}</option>
</c:forEach>
</select>
</td>
<td style="padding-left: 10px"><input type="submit"
value="Select" id="button"
style="width: 100px"></td>
</tr>
<tr style="line-height: 100px">
<td colspan="3"><big>Average grade per semester: 4
points</big></td>
</tr>
</table>
</td>
</table>
</td>
</tr>
</table>
</div>Please don't be put off by such terrible writing, html is not my forte... thanks in advance for your understanding and I will be very grateful for any kind of help in resolving this issue!
CodePudding user response：
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.
CodePudding user response：
I would suggest that you look into Bootstrap: https://getbootstrap.com/
Read about bootstrap display property, containers, rows, and columns.