Here is the html for a simple jsp page, all the <th> tags are invalid location. I am following a guide of the same type of project I am trying to do and this is how the guide is too..
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Doctors</title>
</head>
<body>
<div align="center">
<h1>Doctor List</h1>
<h3>New Doctor</h3>
<table border="1">
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Medical Degree</th>
<th>Education</th>
<th>Action</th>
<c:forEach var="doctor" items="${doctors}">
<tr>
<td>${doctor.id}</td>
<td>${doctor.lastName}, ${doctor.firstName}</td>
<td>${doctor.email}</td>
<td>${doctor.degree}</td>
<td>${doctor.education}</td>
<td>
Edit
Delete
</td>
</tr>
</c:forEach>
</table>
</div>
</body>
</html>
EDIT: Thanks for the quick answers
Add <tr> tag and place all <th> in between that.
Like This:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Doctors</title>
</head>
<body>
<div align="center">
<h1>Doctor List</h1>
<h3>New Doctor</h3>
<table border="1">
<tr>
<th>Id</th>
<th>Name</th>
<th>Email</th>
<th>Medical Degree</th>
<th>Education</th>
<th>Action</th>
</tr>
<c:forEach var="doctor" items="${doctors}">
<tr>
<td>${doctor.id}</td>
<td>${doctor.lastName}, ${doctor.firstName}</td>
<td>${doctor.email}</td>
<td>${doctor.degree}</td>
<td>${doctor.education}</td>
<td>
Edit
Delete
</td>
</tr>
</c:forEach>
</table>
</div>
I hope this will solve this issue.
looks like you just need some table rows, but lets add tbody and thead for safe measure:
<table>
<thead>
<th>Id</th>
<th>Name</>
<th>Email</th>
<th>Medical Degree</th>
<th>Education</th>
<th>Action</th>
</thead>
<tbody>
<c:forEach var="doctor" items="${doctors}">
<tr>
<td>${doctor.id}</td>
<td>${doctor.lastName}, ${doctor.firstName}</td>
<td>${doctor.email}</td>
<td>${doctor.degree}</td>
<td>${doctor.education}</td>
<td>
Edit
Delete;
</td>
</tr>
</c:forEach>
</tbody>
</table>
Related
My id #kiwi doesn't seem to work. Could anyone explain me why it is not working? I've been searching for some help but couldn't find it. It doesn't even work when I try to class it too.
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
you should assign the id to <tr> tag and not put it in a div
This works:
<head>
<title>this is the title sucker</title>
<style>
#kiwi {background-color:green;}
</style>
</head>
<body>
<table border="1">
<tr>
<th colspan="3">Statistics</th>
</tr>
<tr>
<th colspan="1">Car model name</th>
<th colspan="0">Vegetables</th>
<th>Delicious Fruits</th>
</tr>
<tr id="kiwi">
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</tr>
<tr>
<td>BMW</td>
<td>Potato</td>
<td>Apples</td>
</tr>
<tr>
<td>AUDI</td>
<td>Cabbage</td>
<td>Watermelon</td>
</tr>
</table>
</body>
In fact it does work. It is the matter of div content.
Instead of
<div id="kiwi">
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td>Kiwi</td>
</div>
</tr>
Try for example:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="kiwi">Kiwi</div></td>
</tr>
Edit: As it turns out, you can use a div inside a tr as well. So you can either place it inside the td tag, as shown below. Or if you want to color the whole row, you can put id on 'tr' itself, as suggested by others here.
There are a few things there. First of all, you cannot put a<div> directly inside a <table> tag. You have to place it inside a <th> or <td> tag.
See more here : div inside table
Also, you <div> tag is opened before <tr>, but closed after it, which is not correct. Always open and close tags in correct order.
You can do something like this:
<tr>
<td>Jaguar</td>
<td>Tomato</td>
<td><div id="#kiwi">Kiwi</div></td>
</tr>
Einstein wrote: <var>E</var> = <var>mc</var><sup>2</sup>
!DOCTYPE HTML
<HTML>
<Head>
<Title>fci<\title>
<\head>
<Body>
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Bob</td>
<td>Yellow</td>
</tr>
<tr>
<td>Michelle</td>
<td>Purple</td>
</tr>
</table>
<\body>
<\html>
Actually your question is not delivered properly, anyhow there's markup errors in your code. Your code should be as follows,
<!DOCTYPE html>
<html>
<head>
<title>fci</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Favorite Color</th>
</tr>
<tr>
<td>Bob</td>
<td>Yellow</td>
</tr>
<tr>
<td>Michelle</td>
<td>Purple</td>
</tr>
</table>
</body>
</html>
To close a HTML tag you should use forward slash '/'
example: <h1></h1>
I have a table in which I need to split into 2 columns which contain 30% of the image and 70% of the contents. In the 30% of image section
1.I need a big image
2. Below that, I need 4 small images
HTML:
<table>
<thead>
<th style="width:30%">Image</th>-- I want this to be 30% of the table heading
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
<th>Data1</th>
</thead>
<tbody>
<tr *ngFor="let data of dataa>
<td> </td>-- I want this to cover 30% of the table, it should have one big image which combines 2 rows and below that, I need small 4 images with 2 images in each row
<!-- This should be 70% of table column -->
<td>{{data1}}</td>
<td>{{data2}}</td>
<td>{{data3}}</td>
<td>{{data4}}</td>
<td>{{data5}}</td>
<td>{{data6}}</td>
<td><img></td>
<td>{{data7}}</td>
<td>
<button></button>
<button></button>
</td>
<!-- 70% ends here -->
</tr>
</tbody>
</table>
Do you want something like this. The below class is to remove the space between the images.
.images {
text-align:center;
}
th.width{
width:30%;
}
<table>
<thead>
<th class="width">Image</th>
<th>Data1</th>
<th>Description</th>
<th>Address</th>
<th>Website</th>
<th>Phone No</th>
<th>E-mail</th>
<th>Images</th>
<th>Comments</th>
<th>Actions</th>
</thead>
<tbody>
<tr>
<td>
<div><img src="http://via.placeholder.com/400x150" width="100%" /></div>
<div class="images">
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
<img src="http://via.placeholder.com/50x50" width="45%" />
</div>
</td>
<td>{{data1}}</td>
<td>{{data2}}</td>
<td>{{data3}}</td>
<td>{{data4}}</td>
<td>{{data5}}</td>
<td>{{data6}}</td>
<td><img></td>
<td>{{data7}}</td>
<td>
<button></button>
<button></button>
</td>
</tr>
</tbody>
</table>
Try using bootstrap's grid system. It should do the trick and give you a nice responsive table aswell. You can get bootstrap from: here After including bootstrap try using the classes for tables and the grid system for styling the table.
Example source
Simple example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Bordered Table</h2>
<p>The .table-bordered class adds borders to a table:</p>
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Hope this helps!
I'm trying to display data from a database in a table based on a name you choose on a drop down list on another page. But I cannot understand how you compare a jsp string inside the tags?
My drop down list is populated from the database on another .jsp page and is called "dropselect". I know you can get the name inside the <%%> but that cannot be accessed inside the tags?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="newcss.css" rel="stylesheet" type="text/css">
<title>JSP Page</title>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>E-mail</th>
<th>Full name</th>
<th>SQL</th>
<th>Collection</th>
<th>Req</th>
<th>OS</th>
<th>Exam Project</th>
<th>Attendance</th>
<th>Total</th>
</tr>
<c:forEach var="user" items="${listUsers.rows}">
<%
String selected = (String)request.getParameter("dropselect");
%>
<c:if test="${user.fullname eq selected}">
<tr>
<td id="id"><c:out value="${user.id}"/></td>
<td><c:out value="${user.email}"/></td>
<td><c:out value="${user.fullname}"/></td>
<td id="midt"><c:out value="${user.sp_sql}"/></td>
<td id="midt"><c:out value="${user.sp_coll}"/></td>
<td id="midt"><c:out value="${user.sp_req}"/></td>
<td id="midt"><c:out value="${user.sp_os}"/></td>
<td id="midt"><c:out value="${user.sp_examp}"/></td>
<td id="midt"><c:out value="${user.sp_att}"/></td>
<td id="midt"><c:out value="${user.total}"/></td>
</tr>
</c:if>
</c:forEach>
%>
</table>
<form method="post" action="index.jsp">
<input type="submit" value="Tilbage">
</form>
</body>
If your parameter dropselect is not null, can you try this code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="newcss.css" rel="stylesheet" type="text/css">
<title>JSP Page</title>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>E-mail</th>
<th>Full name</th>
<th>SQL</th>
<th>Collection</th>
<th>Req</th>
<th>OS</th>
<th>Exam Project</th>
<th>Attendance</th>
<th>Total</th>
</tr>
<c:forEach var="user" items="${listUsers.rows}">
<c:if test="${user.fullname eq param.dropselect}">
<tr>
<td id="id"><c:out value="${user.id}"/></td>
<td><c:out value="${user.email}"/></td>
<td><c:out value="${user.fullname}"/></td>
<td id="midt"><c:out value="${user.sp_sql}"/></td>
<td id="midt"><c:out value="${user.sp_coll}"/></td>
<td id="midt"><c:out value="${user.sp_req}"/></td>
<td id="midt"><c:out value="${user.sp_os}"/></td>
<td id="midt"><c:out value="${user.sp_examp}"/></td>
<td id="midt"><c:out value="${user.sp_att}"/></td>
<td id="midt"><c:out value="${user.total}"/></td>
</tr>
</c:if>
</c:forEach>
</table>
<form method="post" action="index.jsp">
<input type="submit" value="Tilbage">
</form>
</body>
I do not understand why I couldn't insert a new line in this simple html code. I tried both the <p> tag and the <br> as well as the <h4>, etc. I know it must be a simple solution but I can't find it. The last sentence must be under the table. Here is the code:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html>
<body>
<h2>
<span style="color:#FF0000;">Summary</span>
</h2>
<h4></h4>
<table align="left" border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<thead>
<tr>
<th scope="col" style="text-align: left;">RESULT</th>
<th scope="col" style="text-align: left;">QUANTITY</th>
<th scope="col" style="text-align: left;">PERCENTAGE</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>56</td>
<td>3,69</td>
</tr>
<tr>
<td>B</td>
<td>153</td>
<td>10,09</td>
</tr>
<tr>
<td>C</td>
<td>349</td>
<td>23,02</td>
</tr>
<tr>
<td>D</td>
<td>393</td>
<td>25,92</td>
</tr>
<tr>
<td>E</td>
<td>565</td>
<td>37,27</td>
</tr>
<tr>
<td>
<b>SUM</b>
</td>
<td>
<b>1516</b>
</td>
<td>
<b>100</b>
</td>
</tr>
</tbody>
</table>
<p>I want Newline here!!</p>
</body>
</html>
Any suggestions?
Remove the attribute align="left" in the table tag
Have you tried adding a <br /> tag after <table>?
I hope this works for you.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<html><body>
<h2><span style="color:#FF0000;">Summary</span></h2>
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<thead><tr><th scope="col" style="text-align: left;">RESULT</th>
<th scope="col" style="text-align: left;">QUANTITY</th>
<th scope="col" style="text-align: left;">PERCENTAGE</th></tr></thead>
<tbody><tr><td>A</td><td>56</td><td>3,69</td></tr><tr>
<td>B</td><td>153</td><td>10,09</td></tr><tr>
<td>C</td><td>349</td><td>23,02</td></tr><tr>
<td>D</td><td>393</td><td>25,92</td></tr><tr>
<td>E</td><td>565</td><td>37,27</td></tr><tr>
<td><b>SUM</b></td><td><b>1516</b></td><td><b>100</b></td></tr></tbody></table>
<p>I want Newline here!!</p></body></html>
Here i removed the align='left' attribute from the table tag. Now the text is in next new line in end of table.
Hope this fixed your problem. If there is some other problem, then comment accordingly.
Use <div style="clear:both;height:1px;"><p>I want Newline here!!</p> </div> instead.