When displaying information about my student from the database, I use the Spring MVC <form:xxx> tags, but I don't know how to display it simply in a cell, I don't use input tags, textarea tags, etc. For some reason it doesn't work otherwise. It looks like this now:
and I need this information to be just in the cell, I also attach my output code:
<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>
The solution was found, it was necessary to place my data between the tags and the information began to be displayed correctly :
<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"><p>${student.name}</p></td>
<td style="padding-bottom: 20px"><p>${student.surname}</p></td>
<td style="padding-bottom: 20px"><p>${student.group}</p></td>
<td style="padding-bottom: 20px"><p>${student.date}</p></td>
</td>
</tr>
</form:form>
</table>
I am trying to make the following page responsive. But when I hit 550px width I got the following result. If I go further down the resolution all my stuff will be slanted to the left except for the footer. I am a beginner trying to learn responsive design. I really appreciate all the help I can get. If you can provide a bit of explanation it will be great. All help is deeply appreciated. Thank you in advance.
https://jsfiddle.net/hansheung/Lhyk3s86/1/
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;" />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">
<title>Benefits</title>
<style type="text/css">
body {
width: 100%;
background-color: #ffffff;
margin: 0;
padding: 0;
font-family: 'Open Sans'
}
p,
h1,
h2,
h3,
h4 {
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
}
html {
width: 100%;
}
table {
font-size: 14px;
border: 0;
}
/* ----------- responsivity ----------- */
#media only screen and (max-width: 640px) {
/*------ top header ------ */
.main-header {
font-size: 20px !important;
}
.main-section-header {
font-size: 28px !important;
}
.show {
display: block !important;
}
.hide {
display: none !important;
}
.align-center {
text-align: center !important;
padding-top: 20px;
}
.align-left {
text-align: left !important;
padding-bottom: 20px;
}
.no-bg {
background: none !important;
}
/*----- main image -------*/
.main-image img {
width: 640px !important;
height: auto !important;
}
/*-------- container --------*/
.container600 {
width: 460px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 640px !important;
height: auto !important;
} */
}
#media only screen and (max-width: 600px) {
/*------ top header ------ */
.main-header {
font-size: 18px !important;
}
.main-section-header {
font-size: 26px !important;
}
/*-------- container --------*/
.container600 {
width: 400px !important;
}
/*-------- secions ----------*/
/* .section-img img {
width: 600px !important;
height: auto !important;
} */
}
.responsive{
width: 100%;
height: auto;
}
#font-face {
font-family: Kollektif Regular;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif.woff);
}
#font-face {
font-family: Kollektif Bold;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Bold.woff);
}
#font-face {
font-family: Kollektif Italic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-Italic.woff);
}
#font-face {
font-family: Kollektik BoldItalic;
src: url(http://www.talent-trust.com/public-html/fonts/Kollektif-BoldItalic.woff);
}
.text{
color: #2d2a26;
font-size: 16px;
line-height: 28px;
text-align: justify;
}
.singleLine{
line-height:16px;
}
.doubleLine{
line-height:40px;
}
.subtitle{
font-size: 20px;
color:#FF7F30;
}
.text-color{
color: #ffffff;
font-size: 14px;
line-height: 23px;
}
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- header -->
<table width="100%" bgcolor="ffffff">
<tr>
<td >
<table align="center" width="600" class="container600">
<tr>
<td height="10" > </td>
</tr>
<tr>
<td>
<table border="0" align="center" width="600" class="container600">
<tr>
<td class="section-img">
<a href="http://www.talent-trust.com" ><img src="http://www.talent-trust.com/documents/img/j19-ttc_header.png" width="640"/></a>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="10"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end header -->
<!-- big banner section -->
<table width="100%" >
<tr>
<td align="center" valign="top" style="background:#ffffff url(http://www.talent-trust.com/documents/img/j19-ttc_banner.jpg);background-repeat:no-repeat;background-position:center;background-size:cover;border-top:0;border-bottom:0;padding-top:150px;padding-bottom:150px">
<table align="center">
<tr>
<td valign="top"></td>
</tr>
</table>
</td>
</tr>
</table>
<!--end banner-->
<table border="0" align="center" width="70%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td style="line-height: 50px;"> </td>
</tr>
<tr>
<td align="justified" style="color: #053D56; font-size: 40px; font-family: Kollektif; line-height: 28px;">
<p>Member Benefits</p>
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td class="text">
At TTc, we aim to give missionaries the security, physical health, mental health, and wellness support and resources that they need to excel in their calling and stay in the field longer.
</td>
</tr>
<tr>
<td class="doubleLine"> </td>
</tr>
<tr>
<td align="center">
<table border="0" width="70%" align="center" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<td height="2" style="font-size: 2px; line-height: 2px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- 2 Column Blog Layout-->
<table width="100%">
<tr>
<td align="center">
<table border="0" align="center" width="100%" cellpadding="0" cellspacing="0" class="container600">
<tr>
<td>
<table width="50%" align="left" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div>
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Keeping your costs down</p>
<br>
<p class="text">We know cost is a big deal, so we provide multiple ways to keep costs down:</p>
<br>
<p class="text">
No Claims Bonus – We reward our members for staying healthy, which helps us to keep our premiums down. See how you can save up to 50% of your premium. <a href="http://www.talent-trust.com/benefits/ncb.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
<table width="50%" align="right" cellpadding="80px" cellspacing="0" class="container600">
<tr>
<td class="align-center">
<div >
<p style="color: #053D56; font-size: 30px; font-family: Kollektif; line-height: 28px;">Tailored Services help you THRIVE Long-Term</p>
<br>
<p class="text">We look at what services and technology we can offer that will help our members to stay in the field longer.</p>
<br>
<p class="text">
vHealth – a 24/7 service that connects you to a European based family doctor from anywhere in the world for free. Using an app on your phone, you can video call or have a vHealth doctor visit whenever and wherever you need it. <a href="http://www.talent-trust.com/benefits/vhealth.html" target="blank" >Read more…</a>
</p>
<br>
</div>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="50" style="font-size: 50px; line-height: 50px;"> </td>
</tr>
</table>
</td>
</tr>
</table>
<!-- end section -->
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td class="text">
</td>
</tr>
<tr>
<td class="singleLine"> </td>
</tr>
<tr>
<td height="50" style="font-size: 30px; line-height: 30px;"> </td>
</tr>
</table>
<!-- end section -->
<!-- contact section -->
<table width="100%" bgcolor="#053D66">
<tr>
<td height="40" style="font-size: 40px; line-height: 40px;"> </td>
</tr>
<tr>
<td >
<table width="600" cellpadding="0" cellspacing="0" bgcolor="#ff7f30">
<tr>
<!-- <td height="2" style="font-size: 2px; line-height: 2px;"> </td> -->
</tr>
</table>
</td>
</tr>
<tr>
<td >
<table align="center" width="700" class="container600">
<tr>
<td>
<table width="300" align="left" cellpadding="0" cellspacing="0" class="container600">
<tr>
<!-- logo -->
<td align="right" class="align-center">
<a href="http://www.talent-trust.com" ><img width="200" border="0" style="display: block; width: 200px;" src="http://www.talent-trust.com/documents/img/j19-logo_footer.png" alt="" /></a>
</td>
</tr>
<tr>
<td height="25"> </td>
</tr>
<tr>
<td style="text-align:right;" class="align-left"><img width="24" height="24" src="http://www.talent-trust.com/documents/img/j19-fb_icon.png" ></td>
</tr>
</table>
<table width="2" align="left" cellpadding="20" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td class="hide" width="2" height="25"></td>
</tr>
</table>
<table width="250" align="left" cellpadding="0" cellspacing="0" style="border-collapse:collapse;" class="container600">
<tr>
<td align="left">
<div class="text-color">
Email us: abc#hotmail.com
</div>
</td>
</tr>
<tr>
<td height="15" style="font-size: 15px; line-height: 15px; color: #ffffff;">Tel: +604-899-8945</td>
</tr>
<tr>
<td height="33" style="font-size: 33px; line-height: 33px;"></td>
</tr>
<tr>
<td>
<table align="left" cellpadding="0" cellspacing="0">
<tr>
<td class="text-left p1"><img width=24 height=24 src="http://www.talent-trust.com/documents/img/j19-youtube_icon.png" ></td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="60"> </td>
</tr>
</table>
<!-- end section -->
I tried to align the html video tag and image in html table. But did not succeeded. Seems like video tag align more bottom instead of top.
Picture is attached how its look.
Css
.newsImage {
width: 354px;
height: 204px;
vertical-align: top;
text-align: left;
}
HTML:
<table cellpadding="0" cellspacing="0" class="auto-style1" align="center">
<tr>
<td colspan="5" style="height: 80px; margin-bottom: 20px;">
<h2>NYHETER</h2>
</td>
</tr>
<tr>
<td class="newsImage">
<span id="Content_lbImageNews1"><video width="354" height="240" controls="controls" preload="metadata"><source src="https://bokning.7a.se/Media/newsImages/11332241297A-v5.mp4#t=0.5" type="video/mp4">Your browser does not support the video tag.</video></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews2"><img src="https://bokning.7a.se/Media/newsImages/1142145490news3.png" Height="204" Width="354"></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews3"><img src="https://bokning.7a.se/Media/newsImages/279096911logga.jpg" Height="204" Width="354"></span>
</tr>
</table>
In your inline height value you set it to be 240 instead of 204 which matches your other elements:
<video width="354" height="240" controls="controls" preload="metadata">
Change that back and you should have to mess with any other code.
.newsImage {
min-width: 354px;
min-height: 204px;
vertical-align: top;
text-align: left;
}
<table cellpadding="0" cellspacing="0" class="auto-style1" align="center">
<tr>
<td colspan="5" style="height: 80px; margin-bottom: 20px;">
<h2>NYHETER</h2>
</td>
</tr>
<tr>
<td class="newsImage">
<span id="Content_lbImageNews1"><video width="354" height="204" controls="controls" preload="metadata"><source src="https://bokning.7a.se/Media/newsImages/11332241297A-v5.mp4#t=0.5" type="video/mp4">Your browser does not support the video tag.</video></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews2"><img src="https://bokning.7a.se/Media/newsImages/1142145490news3.png" Height="204" Width="354"></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews3"><img src="https://bokning.7a.se/Media/newsImages/279096911logga.jpg" Height="204" Width="354"></span>
</tr>
</table>
Have you try this to the css file
.newsImage {
vertical-align:top;
}
.newsImage {
vertical-align:top;
}
<html>
</html>
<body>
<table cellpadding="0" cellspacing="0" class="auto-style1" align="center">
<tr>
<td colspan="5" style="height: 80px; margin-bottom: 20px;">
<h2>NYHETER</h2>
</td>
</tr>
<tr>
<td class="newsImage">
<span id="Content_lbImageNews1"><div class="videoWrapper"><video width="100%" height="100%" controls="controls" preload="metadata"><source src="https://bokning.7a.se/Media/newsImages/11332241297A-v5.mp4#t=0.5" type="video/mp4">Your browser does not support the video tag.</video></div></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews2"><img src="https://bokning.7a.se/Media/newsImages/1142145490news3.png" Height="204" Width="354"></span>
</td>
<td> </td>
<td class="newsImage">
<span id="Content_lbImageNews3"><img src="https://bokning.7a.se/Media/newsImages/279096911logga.jpg" Height="204" Width="354"></span>
</tr>
</table>
</body
I have structure as follows in fiddle.
HTML
<table width="100%" border="0" cellspacing="0" cellpadding="20" style="width:100%;">
<tbody>
<tr style="text-align:justify;">
<td valign="top"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Hello,</span></font>
<br><br>
<font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Following contact form has been submitted.</span></font>
<div>
<font face="Arial,sans-serif!important" size="1">
<span style="font-size:13px;">
<div style="margin-top:5px;"> </div>
<table width="100%" border="0" cellspacing="0" cellpadding="2" style="width:100%;">
<tbody>
<tr>
<td align="left" valign="top" style="width:17%;text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Name :</b></span></font></td>
<td align="left" valign="top" style="width:83%;text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">pratik </span></font></td>
</tr>
<tr>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Email :</b></span></font></td>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1"><span style="font-size:12px;">p#d.com</span></font></td>
</tr>
<tr>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Phone :</b></span></font></td>
<td align="left" valign="top" style="text-align:justify;"><font size="1"><span style="font-size:12px;">8</span></font></td>
</tr>
<tr>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;"><b>Name of Facility:</b></span></font></td>
<td align="left" valign="top" style="text-align:justify;"><font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">wee</span></font></td>
</tr>
</tbody>
</table>
</span>
</font>
</div>
</td>
</tr>
<tr style="text-align:justify;">
<td valign="top">
<font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Thank you,</span></font>
<br>
<font face="Arial,Helvetica,sans-serif" size="1" color="#333333"><span style="font-size:12px;">Admin</span></font>
</td>
</tr>
</tbody>
</table>
So I want to keep all alignment as it is Just move "Thank you,
Admin" Section to little top
I am working on Email Template,So inline CSS
you have cell-padding table attribute, change it to 0 then design your table by css
I think this is what you need
<table width="100%" border="0" cellspacing="0" style="width:100%;padding-left:20px;">
DEMO: http://jsfiddle.net/MX9TF/3/
remove some of your empty div, and br by cleaning up the markup .
http://jsfiddle.net/MX9TF/8/
<table>
<tbody>
<tr>
<td>
<p>Hello,
<br/>Following contact form has been submitted.</p>
<table>
<tbody>
<tr>
<th>Name :</th>
<td>pratik</td>
</tr>
<tr>
<th>Email :</th>
<td>p#d.com
</td>
</tr>
<tr>
<th>Phone :</th>
<td>8</td>
</tr>
<tr>
<th>Name of Facility:</th>
<td>awee</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<p>Thank you,
<br/>Admin</p>
</td>
</tr>
</tbody>
</table>
table {
font-family:"Arial,Helvetica,sans-serif";
font-size:12px;
color:#333;
width:100%;
text-align:justify;
}
table table th {
width:17%;
font-weight:bold;
}
Then you can tune and style your tables from style sheet with plain CSS.
:)
<td style="padding-top: 1px" valign="top">
Also, you could have mentioned in the question that css is not allowed, so that we wont think that way
One more thing worth mentioning. You could figure this with some development tools such as Firebug in Firefox. eg, open your html code in a browser, use firebug inspect to select your block, and it shows you have big space over your final td. You can also try to edit in on runtime using the firebug tool. It is a firefox plugin. If you don't have firefox, other browsers too have similar development tools
The quick answer is to remove the cellpadding="20" from your parent table and use padding or <br> on each cell instead. The cellpadding and cellspacing should only be used for zero-ing out as they do not render consistently in all clients.
There are also a whole bunch of little things you don't need in your code. Here is how it should look - this will work 100% in all email clients:
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="width:100%;">
<tr>
<td valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:30px;">
Hello,
<br><br>
Following contact form has been submitted.
</td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Name:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
pratik
</td>
</tr>
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Email:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
p#d.com
</td>
</tr>
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Phone:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
#
</td>
</tr>
<tr>
<td valign="top" width="17%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
<b>Name of Facility:</b>
</td>
<td valign="top" width="83%" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-bottom:10px;">
...
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top" style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #333333; padding-top:10px;">
Thank you,<br>
Admin
</td>
</tr>
</table>
img {
max-width: 100%;
this is breaking content namely the images shrink down in my bootstrap based template - I cant get a reason why this is.
content is a table with rows and some icon images such as
<table>
<tr class="sectiontableentry2 even" id="tree_row_26">
<td align="center" valign="middle" width="20">4</td>
<td id="jlms_step_26" valign="middle" width="20"><img alt="accept" border=
"0" class="JLMS_png" height="16" src="../lms_images/toolbar/btn_accept.png"
width="16"></td>
<td align="center" valign="middle" width="16">
<div style="text-align: center; vertical-align: middle">
<span style="text-align:center;"><img alt="content" border="0" class=
"JLMS_png" height="16" src=
"http://demo1.bwood1.wok.catn.com/components/com_joomla_lms/lms_images/files/file_content.png"
width="16"></span>
</div>
</td>
<td align="left" colspan="1" valign="middle" width="100%"><a href=
"javascript:seek_step_id=26;ajax_action('lpath_seek');">Automation
criteria</a></td>
</tr>
</table>
The width of all your rows together is more than the width of the table.
Only set the width of the table and of the columns with a fixed width.
<table style="width: 100%">
<tr class="sectiontableentry2 even" id="tree_row_26">
<td align="center" valign="middle" width="20">4</td>
<td id="jlms_step_26" valign="middle" width="20"><img alt="accept" border=
"0" class="JLMS_png" height="16" src="../lms_images/toolbar/btn_accept.png"
width="16"></td>
<td align="center" valign="middle" width="16">
<div style="text-align: center; vertical-align: middle">
<span style="text-align:center;"><img alt="content" border="0" class=
"JLMS_png" height="16" src=
"http://demo1.bwood1.wok.catn.com/components/com_joomla_lms/lms_images/files/file_content.png"
width="16"></span>
</div>
</td>
<td align="left" colspan="1" valign="middle"><a href=
"javascript:seek_step_id=26;ajax_action('lpath_seek');">Automation
criteria</a></td>
</tr>
</table>
http://jsfiddle.net/LqVyu/
Next time, please ask as 'why is this happening' or 'what am I doing wrong' to prevent getting down voted. Because the question on itself is valid.
A good fix from #_pier is:
table td img {
display: block;
width: 100%;
}