I'd like to ask something as I am really baffled why this happens and browser debug methods cannot tell me why this strange addition of a th element occurs.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Stuff Page</title>
</head>
<body>
<center>
<div>
<br/><br/>
<form method="POST">
Find Pattern
<input type="text" name="pattern" value="" /><input type="submit" value="Find" />
<input type="reset" value="Clear" />
</form>
</div>
</center>
<center>
<div>
<table>
<caption>Table Rendering of Found Data</caption>
<thead>
<tr>
<th scope="col" class="column1">Name<th>
<th scope="col">Type</th>
<th scope="col">Size</th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
</center>
</body>
</html>
If you take that segment of html code and run it in a browser (I tested it with latest chrome and ff) it adds one more th element in the table (the final page has 4 columns instead of 3) and I have absolutely no clue why this happens! If someone can tell me the reason behind it I'd be glad!
You didn't close your tag.
"<th scope="col" class="column1">Name<th>"
The last <th> should be </th>
Check this line again:
<th scope="col" class="column1">Name<th>
Related
EDIT: The following outlined example works in thunderbird as well.
I'm currently learning how to create emails using foundation for emails. What I currently want to do is to create an "expanded button" within a grid. I've come up with the following HTML by referencing the examples outlined for grid here and examples outlined for expanded button here.
The following is what I came up with, my thinking based on what I have read thus far is that I have to add the "expanded button" within the column of my grid, so I have the following HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Title</title>
<link rel="stylesheet" href="css/foundation-emails.css" />
</head>
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="columns first last">
<table>
<tr>
<table class="row">
<tbody>
<tr>
<column>
<table class="button expanded">
<tr>
<td>
<table>
<tr>
<td>
<center data-parsed><a href="#"
align="center"
class="float-center">Reset Password</a>
</center>
</td>
</tr>
</table>
</td>
<td class="expander"></td>
</tr>
</table>
<table class="button small-expanded">
<tr>
<td>
<table>
<tr>
<td>Expand small only</td>
</tr>
</table>
</td>
</tr>
</table>
</column>
</tr>
</tbody>
</table>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</html>
It looks exactly as I expect it to look like in Firefox, however it looks incorrect in outlook. For example, this is what it appears as in Firefox:
Here is what it looks like in outlook when I send an email:
For context, I'm trying to create an typical "Reset Password" email template. Do note that I have run the HTML through the CSS inliner located here, as instructed by the documentation.
This issue is resolved in version 2.3.1, but their official download link was not updated to serve the latest version of the code, hence I spent time trying to resolve an issue that was already rectified. While the button is now expanded, there is an issue with the anchor link in outlook.
See https://github.com/foundation/foundation-emails/issues/415 for more information.
<table>
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
I want it to auto jump to next line if the label text overflow. I no want the label to be hidden or using ellipsis.
Note: In my case, i will loop the div content in the same row td. I want to break the word to next line in full size of browser or browser resized to smaller.
How can i solve this problem?
Apologies for having too less reputation to post a comment.
But have you checked out Bootstrap tables?
It not only solves your problem, but is a good step in moving towards simple web development.
Bootstrap takes care of everything and allows us to make neat and clean tables with very little code from our side.
If at all you need to further style your table, you can add styling OVER the bootstrap styled table.
Check out the following simple tutorial where you can also try it out online.
https://www.w3schools.com/bootstrap/bootstrap_tables.asp
To prove how simple it is,
I have pasted my code into a simple HTML page.
Added bootstrap.
And voila! Your issue is solved in the example given below.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<table class="table">
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div>
<label>abcdefghijklmnop</label>
</div>
<div>
<input type="checkbox">
</div>
<div>
<label>abcdefghijklmnop</label>
</div>
<div>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
<table class="table">
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td> <label>abcdefghijklmnop</label> </td>
<td> <input type="checkbox"> </td>
</tr>
<tr>
<td> <label>abcdefghijklmnop</label> </td>
<td> <input type="checkbox"> </td>
</tr>
</tbody>
</table>
</body>
</html>
I am still confused on what you wanted, so I have included 2 approaches.
Try Float:right;
<table>
<thead>
<th>Item</th>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:10%; float:right;">
<label style="display:block">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
You can use word-wrap: break-word for your label tag.
The word-wrap property allows long words to be able to be broken and wrap onto the next line. break-word allows unbreakable words to be broken
<table>
<thead>
<tr>
<th>Item</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div style="display:inline-block;width:25%">
<label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label>
<input type="checkbox">
</div>
<div style="display:inline-block;width:10%">
<label style="display:block;word-wrap: break-word;">abcdefghijklmnop</label>
<input type="checkbox">
</div>
</td>
</tr>
</tbody>
</table>
MDN web docs word-wrap
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>
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.
This is an excert from a dynamically built table. What is the proper CSS to make the first <td> in the second rwo (id='backdate') a fixed width? (currently it does not change width when increasing or decreasing the 70 value)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<table class='fifo' width='850' style='width:850px;table-layout:fixed;'>
<thead><tr>
<th colspan='3' style='width:820px;'>Details</th>
<th style='cursor:pointer;width:15px;' title='Click to save.'><span class='ui-icon ui-icon-check'/></th>
<th style='width:15px;' title='Click to close.'><span class='ui-icon ui-icon-closethick'/></th>
</tr></thead>
<tbody>
<tr><td id='BACKDATE' colspan='1' class='button' style='cursor:pointer;width:70px;' width='70' title='Back Date Start Date/time.'>Back Date</td>
<td colspan='4' style='width:780px;' width='780'><b>Start Date: </b></td></tr>
</tbody>
</table>
</body>
</html>
FIDDLE WITH SOLUTION...
Adding a dummy row with the widths that the browser 'displays', but isn't seen solves the problem. To get rid of the extra border, I had to add border-top-width:0px; to the table's style.
HTML
<tr>
<th class='test' style='width:80px;'/>
<th class='test' style='width:560px;'/>
<th class='test' style='width:150px;'/>
<th class='test' style='width:15px;'/>
<th class='test' style='width:15px;'/>
CSS
.test {
padding:0px!important;
border-width:0px!important;
height:0px!important;
}