<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
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.
Office rendering of HTML is a known headache an I have a problem with Outlook 2016. A small, 1px horizontal line is rendered below my table. Tables are a common practice for formatting due to many Outlook/Office/Word HTML/Richtext/Mixup flaws.
The 1px line is really a small gap or hole in the white background color of the table, showing the background color of the body. I managed to figure this out by changing background color to red instead of grey.
The code can be tested in Notepad++ by selecting Run>Send via Outlook on a computer with Windows and Outlook Client installed...
<!DOCTYPE html>
<html>
<head>
<style>
html,
body
{
font-family: 'sans-serif';
}
</style>
</head>
<body style="background-color: red">
<table style="background-color: white;" >
<tr>
<td>
<table>
<tr>
<td>
Test before
</td>
</tr>
</table>
<table>
<tr>
<td>
<p>
Test 1<br>
Test 2<br>
Test 3
</p>
</td>
</tr>
</table>
<br/><br/>
Test after
</td>
</tr>
</table>
</body>
</html>
The structure is a scaled down version of an email where the elements are used to present information.
(Note! TL;DR; - Best solution in the bottom)
There are couple of different ways of changing the structure to make the gap go away. However this is not an option in my case. The solution that fixed it for me, was to scale down everything to a minimal, step by step according to the above, and finally try to change all values.
The final solution in my case, was to change font size in the table before, to NOT 30px.
Test before
In my specific encounter with the randomizer-magic of Ms Outlook rendering, this was the key. I am sure the solution may vary for others, but changing a few font-sizes around might be worth a shot.
Since this took me long enough I thought I better post the solution, maybe it can help someone as frustrated as me!
[Edit] Here is another example of this issue - Messing with line-height
<!DOCTYPE html>
<html>
<head>
<title>Yea</title>
</head>
<body style="width: 100%; background-color: white;">
<br/><br/>
<table cellspacing="0" cellpadding="0" style="background-color: white;width: 100%; line-height: 0;" border="0" border-size="0">
<tr>
<td style="height: 114px; font-size: 100px; background-color: #999999"><span> My name is Jasper</span></td>
</tr>
</table>
<br/><br/>
</body>
</html>
Well, the issue in this case when investigating the code, was the line-height: 0; of the table element. Remove it or set it to 1px to get rid of the element that looks like a white thick line but is actually a glimpse of the background. This is definitely a rendering bug and it at least shows in Outlook 2019 / 2016 (win 10). Reproduceable with Litmus.
[Edit #2 - Add an invisible tag]
By adding the patent pending gap-line eliminator directly before the problem-table-tag I managed to get rid of some lines.
<table class="unwanted-line-eliminator" cellpadding="0" cellspacing="0" style="height:0">
<tr>
<td style="font-size: 0px;line-height: 0px;"> </td>
</tr>
</table>
[Edit #3 - Finally - Best solution!]
Since the gaps are a bit random between Outlook versions, appears both horizontally and vertically (according to my last few hours of troubleshooting) and depends on DPI settings amongst other things the absolute best solution seems to be the following...
Add a content encapsulating <table style="background-color: lime"><tr><td>CONTENT</td></tr></table> with the top/front background-color. This will for some reason cover all gaps! Best of luck!
Another possible solution which helped in my case was to avoid using paragraphs <p> - I've just replaced them with line breaks <br/><br/>.
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.
I'm trying to write some HTML/CSS to display a certain row with some of the elements left-aligned and some of them in the center. This was my HTML code:
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<div class="mid">
<td> Subtotal </td>
<td> Tax </td>
<td> Total </td>
</div>
</tr>
And this is my CSS code:
.mid {
text-align: center;
}
.mainInfo {
font: bold 13px Tahoma;
}
#header {
background-color: #68891;
color: white;
}
But the last three elements are not moving to the center, and I really don't understand why not. I tried putting class="mid" in the <td> tags and that worked, but doesn't that defeat the purpose of DRY?
Fiddle Demo
You cannot put a div instead of td element.
You should validate your HTML code with w3 validator.
If you'll do so you'll see you get this error message:
document type does not allow element "DIV" here; missing one of "TH", "TD" start-tag
Maybe you can do it this way:
<table>
<tr class="mainInfo" id="header">
<td> Item </td>
<td> Color </td>
<td> Size </td>
<td class="center">Subtotal</td>
<td class="center">Tax</td>
<td class="center">Total</td>
</tr>
</table>
JSFiddle example
No, you should not put divs inside tr's or tables.
And you should not use tr's or td's without table-element.
<table>
<tr>
<td>hello world</td>
<!-- This is bare minimum to use tables properly -->
</tr>
</table>
You can insert whatever(not tr or td, but could start new table) you want inside TD-elements though.
It's possible to use other elements to replace these standard ones with css display-property set to table-row etc., but you should stick to conventional tags.
Use colspan/rowspan to span over multiple table columns or rows.
CSS classes are designed to be used as often you need/want to. Only IDs should appear once per page.
Of course you should always keep the DRY concept in mind but in your case it's totally fine. It wouldn't if you would set your .mid class to every <td> because in that case you could just set the properties directly to the <td> element.
middle is not a valid value for text-align, so I'm going to assume, in your CSS, that's meant to be vertical-align. If so, it's because vertical-align will only apply to table cells, not divs - that would explain why it is only being successfully applied to your tds.
Additionally, you shouldn't really put a div inside a table (and shouldn't put a td inside of that) but that's not related to your problem.
Assign one class for left alignment and other for center like so...
.left {
text-align:left;
}
.center {
text-align:center;
}
Asign class to TD elements
<tr class="mainInfo" id="header">
<td class='left'> Item </td>
<td class='center'> Color </td>
</tr>
I want to display 4 or 5 boxes(vary) which occupy's 100% of the page width, so it will span start to end of page. and want height just to fit contents.
I am trying to use table for that so it will assign width for each box and fill up whole row.
Problem with code below is all divs in td are centered and does not have same height. tried all i can think of but it doesn't work. tried vertical alignment, height to 100% .....
How can i have all div in td with same height?
Also if there is another way to doing same please let me know. I am html dummy so may not using the right thing.
<table style="width: 100%; text-align:justify;">
<tr>
<td>
<div style="margin-right:15px; background-color:Gray">
Some text here
</div>
</td>
<td>
<div style="margin-right: 15px; background-color:Gray">
column 2 text here
</div>
</td>
<td>
<div style="margin-right: 15px; background-color:Gray">
Column 3 text here
</div>
</td>
<td>
<div style="background-color:Gray">
Last column text here
</div>
</td>
</tr>
</table>
Like I've told plenty of other people, you shouldn't be using divisions inside table cells.
This will achieve the exact same effect, without the divisions:
<table style="width: 100%; text-align: justify;">
<tr>
<td style="margin-right: 15px; background-color: gray;">
Some text here
</td>
<td style="margin-right: 15px; background-color: gray;">
column 2 text here
</td>
<td style="margin-right: 15px; background-color: gray;">
Column 3 text here
</td>
<td style="background-color: gray;">
Last column text here
</td>
</tr>
</table>
If you get rid of the divs and apply your styles and content directly to the table cells you will get the effect you want.
In case there is no special purpose of using div tag inside td. I would just do it without div. add style to td tag.
Mamu, I would suggest that you do not use inline style elements. Instead of styling your table tags it would be far more efficient, and better to add the the following between your <head> tags:
<style type="text/css">
table {width:100%; text-align:justify;}
table td {margin-right:15px; background-color:gray;}
</style>
Using only those two lines of code you can apply the same elements consistently across your entire website. If you only wanted to apply them to some elements, you could create classes by adding a "." to a name of your choice:
<style type="text/css">
.MyTable {width:100%; text-align:justify;}
.MyTable td {margin-right:15px; background-color:gray;}
</style>
And add the following to your HTML:
<table class="MyTable">
Note that class names are case sensitive. But this reusable code is far more efficient.
Furthermore, I would urge to consider the use of tables only if you are presenting tabular data. Tables load slower and are not SEO friendly. It would not be semantically correct to use them for layout. You should separate content from presentation whenever possible, and if it is layout you are after I would suggest using divs and other elements instead.