I have a Google form that I am trying to force to email me the results in a specific format. It works, but the table I insert has a large blank space above it that I would like to get rid of. For example:
Hello!
I have a purchase request that I would like to submit for review, approval,
and processing. Please see below and attached. Thanks.
Name:
Ryan M
Project Number:
Numbers
Project Comments:
No Comments
Website Link to Product:
Cost:
Purpose of Order:
Test
Document Upload:
https://drive.google.com/file/d//view
Date Required By:
2017-01-13
Confirmed Lead Time:
teeeeeest
Here is the Code I'm using:
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
margin-top:0px;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<table>
<tr>
<td><b>Name:</b></td>
<td>{{Name}}</td>
</tr>
<tr>
<td><b>Project Number:</b></td>
<td>{{Project Number}}</td>
</tr>
<tr>
<td><b>Project Comments:</b></td>
<td>{{Project Comments}}</td>
</tr>
<tr>
<td><b>Website Link to Product:</b></td>
<td>{{Website Link to Product}}</td>
</tr>
<tr>
<td><b>Cost:</b></td>
<td>{{Cost}}</td>
</tr>
<tr>
<td><b>Purpose of Order:</b></td>
<td>{{Purpose of Order}}</td>
</tr>
<tr>
<td><b>Document Upload:</b></td>
<td>https://drive.google.com/file/d/{{Document Upload}}/view</td>
</tr>
<tr>
<td><b>Date Required By:</b></td>
<td>{{Date Required By}}</td>
</tr>
<tr>
<td><b>Confirmed Lead Time:</b></td>
<td>{{Confirmed Lead Time}}</td>
</tr>
</table>
</body>
</html>
Any clues would be a great help. Thanks!
HTML emails can be viewed in various different tools and none of them (outlook) support it the same way (CSS markup included).
The way the output looks make me think that the table is not expanding to 100%. Notice how the table cells are stacked. This could be symptomatic of your real problem, the viewport.
You might start by setting the <html> and <body> width to 100%. Try both CSS and the in-line style markup.
<body width="100%">
I'd stay away from any HTML5 options like <meta name="viewport" content="initial-scale=1, width=device-width"> since you can't guarantee support in email applications.
The CSS markup might not be an option so you could try putting it all inline.
Hope this helps.
Related
I have been trying to get the height of the hr to 0px, any other amount seems to be fine and the two matches. I will also post my code at the bottom. I am not sure if this is a CSS issue or an HTML issue. Any explanation would be greatly appreciated.
Here are two of my hr elements with the CSS code I made with it, yet both look different
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
background-color: whitesmoke;
border-style: dotted;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3>Experience</h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body>
Before Update:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
background-color: whitesmoke;
border-style: dotted;
border-width: 2px 0 0 0;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3>Experience</h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body>
UPDATE:
I did find a way to get to my goal by deleting the border color and changing the border style for the different sides of the border to none except for one. I got the dotted line I was looking for, but I still would like to understand why exactly my issue came about in the first place? It didn't seem there was any real distinction between the way I set up my first <hr> tag and my second. If someone can clear that up in case the issue occurs with other tags that would be greatly appreciated. Also, I will put code snippets of before and after.
After Update:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Personal Website</title>
<style>
body{
background-color: #97BFB4;
}
hr {
/* background-color: whitesmoke; */
border-style: dotted none none none;
border-color: grey;
border-width: 5px;
height : 0px;
width: 10%;
}
</style>
</head>
<body>
<table cellspacing= "20">
<tbody>
<tr>
<td><img src=""></td>
<td>
<h1> <a href="">Personal
Site </a></h1>
<p><em> Computer Engineer at Stony Brook University </em></p>
<p>
</p>
</td>
</tr>
</tbody>
</table>
<hr>
<h3>Experience</h3>
<table>
<thead>
<th>
Dates
</th>
<th>
Work
</th>
</thead>
<tbody>
<tr>
<td>June 2021</td>
<td>Undergraduate Researcher</td>
</tr>
<tr>
<td>Sept 2020</td>
<td>Vice President Of Robotics</td>
</tr>
</tbody>
<tfoot></tfoot>
</table>
<hr>
</body>
It's not really different behaviour.
It's behaviour that happens all over webpages whenever the numbers don't line up exactly.
How do you render a 99px image at width: 100px; ?
How many pixels wide is a width: 33.3%;-div in a 100px-container ?
The answer will involve rounding numbers causing them to go a little bit up, or a little bit down. You're seeing the same effect here with the border aligning differently under high pressure.
If instead of your <hr>, it was a roughly 100px by 100px block, then you wouldn't be able to tell when the border was slightly different in different cases.
In your case, in the top example, your bordered <hr> ended up being displayed as a 3 pixel high component, and in the lower example as 2 pixels. I'm guessing that consists of:
1px for the border-top
1px for the border-bottom
either 0px or 1px for the content that is in between the borders (due to rounding up or down).
If I had continued to make hr tags under these high-pressure
conditions, should I expect more variations? i.e. if I added more hr
tags with height 0, would they randomly be between [0,1] pixels?
Saad Satter
No i suspect not. In your case it either rounds up or down, there's not really another outcome.
Things end up being rounded to an integer of whatever the smallest supported (sub)unit is (1 pixel in this case i suppose).
It is possible that, if on top of the height being such a dodgy edge-case (where rounding can make or break it), the width was also such an edge case, then you might potentially have a handful of different possible endresults. A width: 0.5px; height: 0.5px;-type of situation.
For any designer though, you either want to be clear as to what you want (eg: supply whole numbers, not partial pixels), or you want to have conditions in place where either result is fine.
If your website has a content area which contains lots of paragraphs of text, which is width: 1207.5px; then it'll look fine no matter if it ends up being 1207px or 1208px, no-one will be able to tell.
Okay, we know that 0 means nothing. When the value is empty then we use 0. Now, here you are saying in CSS that make the height of hr 0px. That means no value. So, without a single px it can't show anything to you in display. That's why 0px doesn't exist. Hope you got it.
In theory what you are doing is fine, there is theoretically no problem with having a zero height element with borders.
However, CSS pixels do not on many modern screens, map one to one with screen pixels. Several screen pixels may be used for one CSS pixel.
There can therefore be edge effects when the system has to decide exactly where to place things. You can see this sometimes by zooming. In your example try this and you will probably see the unwanted white line come and go at different magnifications.
So in answer to one of your queries, yes it is something to avoid. In your case try setting just the top border at twice the height without the other borders and see what happens.
I have a <table> of data where consecutive rows are conceptually related and need to stay together. I've group each pair of rows in a <tbody> tag. When it comes time to print the table, I want to make sure that page breaks only happen between <tbody> tags.
I've tried some variations of page-break-inside: avoid and page-break-after: auto, but can't seem to get it to work in Chrome 42 (see screenshot below)
However, it does seems to work as expected in Firefox 40 and IE 11 though. It looks like page-break-* might only apply to block level elements. Is there a good way to accomplish this in html/css?
Example code:
<!doctype html>
<html>
<head>
<style>
table {
width: 70%;
border-collapse: collapse;
}
thead {
display: table-header-group;
text-align: left;
border-bottom: 2px solid #000;
}
tbody {
page-break-inside: avoid;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Project #</th>
<th>Owner</th>
<th>% Complete</th>
</tr>
</thead>
<tbody>
<tr>
<td>HR-123</td>
<td>Arther Dent</td>
<td>42%</td>
</tr>
<tr>
<td colspan='3'>Description: Find travel guide to get me back to earth.</td>
</tr>
</tbody>
<tbody>
<tr>
<td>RD-123</td>
<td>Frodo Baggins</td>
<td>9%</td>
</tr>
<tr>
<td colspan='3'>Description: Find a better way to get the ring to Mordor.</td>
</tr>
</tbody>
<!-- repeat tbody sections as necessary to get onto the second page -->
</table>
</body>
</html>
Here's a JSFiddle that'll give you a bit of an idea of what I'm trying to accomplish.
Edit: I considering not using a table but didn't since (i) I want my columns to line up, and (ii) I really don't want to hard-code column widths to make sure they're all the same.
Try wrapping it all in a
make that specific a block element (http://learnlayout.com/inline-block.html)
then use page-break-*
I'm having difficulties in formatting my HTML page.
As you can see from the source code, it's a table where each row contains a formatted list of records dynamically populated by my web app.
In the case one of the columns has an empty value, I would like to keep the formatting of the lines, so I should basically add enough spaces or think about an HTML block with the exact size of the text value.
The nice thing is each value has a fixed character length, so it should come in advantage.
I thought about creating a span but it doesn't support the width attribute and I should change the style to display:block, but in my opinion, it's getting a little too tricky, as I would like a simple and clever solution.
I attach the source code of the page and the output I get at the moment.
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"></head>
<body>
<table>
<tr><td style="font-size: 11px; color: #000000; font-family: Verdana; border-bottom: #ff0000 1px solid;">
<table>
<tr><td>test1:</td></tr>
<tr><td>
<ul>
<li>FIELD1:;, FIELD2: <b>443</b>, FIELD3: <b>191,51</b></li>
<li>FIELD1: <b>1000101</b>, FIELD2: <b>442</b>, FIELD3: <b>43,2</b></li><li>FIELD1: <b>1000176</b>, FIELD2:, FIELD3: <b>36</b></li>
</ul></td></tr>
</table>
</body>
</html>
Your problem is that you got your semantics messed up. You try to build a table but then you put the whole table content in 1 cell and then you try to emulate the table in there by using a list.
Just put 1 field in 1 table cell and and it will come together quite easily. Also: "test1" is in this context the table caption or maybe a headline.
The first variant assumes that the field names might vary from row to row. If that is not the case they belong into the table header instead.
table#test1 tbody tr th {
font-weight: normal;
text-align: left;
}
table#test1 tbody tr td {
font-weight: bold;
text-align: right;
}
table#test2 thead tr td {
font-weight: bold;
}
table#test2 tbody tr td {
text-align: right;
}
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
</head>
<body>
<table id="test1">
<caption>test1</caption>
<tbody>
<tr><th>FIELD1:</th><td></td><th>FIELD2:</th><td>443</td><th>FIELD3:</th><td class="value">191,51</tr>
<tr><th>FIELD1:</th><td class="value">1000101</td><th>FIELD2:</th><td class="value">442</td><th>FIELD3:</th><td class="value">43,2</tr>
<tr><th>FIELD1:</th><td class="value">1000176</td><th>FIELD2:</th><td class="value"></td><th>FIELD3:</th><td class="value">36</tr>
</tbody>
</table>
<table id="test2">
<caption>test2</caption>
<thead>
<tr><td>FIELD1</td><td>FIELD2</td><td>FIELD3</tr>
</thead>
<tbody>
<tr><td></td><td>443</td><td>191,51</tr>
<tr><td>1000101</td><td>442</td><td>43,2</tr>
<tr><td>1000176</td><td></td><td>36</tr>
</tbody>
</table>
</body>
</html>
I have created an HTML document with many tables. How can I convert the document to Word?
The problem is that if I open an HTML document with Word, I get non-standard double-lines tables for some reason.
<table border="1" color="#000000" cellpadding="0" cellspacing="0" width=100%>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td width = 15%>0</td>
<td width = 15%>0</td>
<td width = 40%>0</td>
<td> - </td>
</tr>
</table>
Most simple solution: Open the HTML in a browser, select the table (or the whole document) and copy and then paste into Word. You might get even better results when pasting into Excel, first, and then copy&paste from there to Word (kudos to Josiah for this tip). That often works pretty well, especially if the table looks good/correct in IE.
There are other solutions but they are much more complicated: You would need a HTML parser and something which can create OOXML files. If you want to try this, use Python with Beautiful Soup as HTML parser. Writing OOXML is explained in this question: How can I create a Word document using Python?
Note that the effort for this solution is probably 1-2 weeks.
Solved the problem convert a lot of tables to Word document using css styles. After open Generate.html with Word all tables normal
File CSSTable.css
table.CSSTable {
border-width: 1px;
border-spacing: 0px;
border-style: solid;
border-color: black;
border-collapse: collapse;
background-color: white;
}
table.CSSTable th {
border-width: 1px;
padding: 0px;
border-style: solid;
border-color: black;
background-color: white;
-moz-border-radius: ;
}
table.CSSTable td {
border-width: 1px;
padding: 0px;
border-style: solid;
border-color: black;
background-color: white;
-moz-border-radius: ;
}
Generate.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<link rel="stylesheet" href="CSSTable.css" type="text/css">
</head>
<body>
<table class="CSSTable" width=100%>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td width = 15%>0</td>
<td width = 15%>0</td>
<td width = 40%>0</td>
<td> - </td>
</tr>
</table>
You can use an altChunk, provided the document is to be opened in Word. Word is needed only for opening it.
In terms of Microsoft's OpenXML SDK classes:
you will want AlternativeFormatImportPart of type AlternativeFormatImportPartType.Html
See this or this for examples
From http://www.wordbanter.com/showthread.php?t=105850
"You have to go into the table, select
"Table", then Table properties, then Options. Under "default cell spacing"
deselect "allow spacing between cells."
<html>
<tr>
<td style="padding-left: 5px;padding-bottom:3px; font size="35;""> <b>Datum:</b><br/>
November 2010 </td>
</html>
is my code correct? i would like to increase the font of the first line. Not sure if i have to put 2 "'s here. and it seems it didn't work.
Try this:
<html>
<table>
<tr>
<td style="padding-left: 5px;
padding-bottom: 3px;">
<strong style="font-size: 35px;">Datum:</strong><br />
November 2010
</td>
</tr>
</table>
</html>
Notice that I also included the table-tag, which you seem to have forgotten. This has to be included if you want this to appear as a table.
font-size:35px;
So like this:
<html>
<table>
<tr>
<td style="padding-left:5px;padding-bottom:3px;">
<strong style="font-size:35px;">Datum:</strong>
<br/>
November 2010
</td>
</tr>
</table>
</html>
Although inline styles are a bad practice and you should class things. Also you should use a <strong></strong> tag instead of <b></b>
you dont need those quotes
<td style="padding-left: 5px;padding-bottom:3px; font-size: 35px;"> <b>Datum:</b><br/>
November 2010 </td>
There are a couple of answers posted here that will give you the text effects you want, but...
The thing about tables is that they are organized collections of labels and data. Having both a label ("Datum") and the value that it labels in the same cell is oh so very wrong. The label should be in a <th> element, with the value in a <td> either in the same row or the same column (depending on the data arrangement you are trying to achieve). You can have <th> elements running either vertically or horizontally or both, but if you don't have heading cells (which is what <th> means), you don't have a table, you just have a meaningless grid of text. It would be preferable, too, to have a <caption> element to label the table as a whole (you don't have to display the caption, but it should be there for accessibility) and have a summary="blah blah blah" attribute in the table tag, again for accessibility. So your HTML should probably look a lot more like this:
<html>
<head>
<title>Test page with Table<title>
<style type="text/css">
th {
font-size: 35px;
font-weight: bold;
padding-left: 5px;
padding-bottom: 3px;
}
</style>
</head>
<body>
<table id="table_1" summary="This table has both labels and values">
<caption>Table of Stuff</caption>
<tr>
<th>Datum</th>
<td>November 2010</td>
</tr>
</table>
</body>
</html>
That may not be exactly what you want -- it's hard to tell whether November 2010 is a data point or a label from what you've posted, and "Datum" isn't a helpful label in any case. Play with it a bit, but make sure that when your table is finished it actually has some kind of semantic meaning. If it's not a real table of data, then don't use a <table> to lay it out.
Don't need to quote css attributes and you should specify an unit.
(You should use an external css file too..!)
<html>
<table>
<tr>
<td style="padding-left: 5px;padding-bottom:3px; font-size:35px;"> <b>Datum:</b><br/>
November 2010 </td>
</table>
</html>
just write the css attributes in a proper manner i.e:
font-size:35px;
I suggest you use CSS instead, seems like you're going to repeat those lines later on. But to answer your question:
<html>
<head>
<style type="text/css">
td.randname {
padding-left: 5px;
padding-bottom:3px;
font-size:35px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="randname"> <b>Datum:</b><br/>
November 2010 </td></tr>
</table>
</body>
</html>
The correct CSS for setting font-size is "font-size: 35px". I.e.:
<td style="padding-left: 5px; padding-bottom:3px; font size: 35px;">
Note that this sets the font size in pixels. You can also set it in *em*s or percentage. Learn more about fonts in CSS here: http://www.w3schools.com/css/css_font.asp