<html>
<body style="background:grey;">
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr>
<tr>
<td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr><tr>
<td><img width="500" src="https://s28.postimg.org/yrbcuftd9/zip.png"></td>
</tr>
</tbody>
</table>
</body></html>
I don't understand why the height of third zip image is 18. Basically, when I add the image as background,there is no gap between each row (No gap between row 1 and row 2). However, when I use image tag, it creates gap between row 2 and row 3. I don't understand why. Any ideas? And also how can I delete the gap between row 2 and there.
<img> is considered inline by default, so like other inline elements, it has a line height and space for descenders. Descender space is that little padding under each line that isn't accounted for anywhere, for the hanging bits of letters like in 'p' or 'q'.
If you set it to display: block, everything will click together.
A <td> tag will by default inherit display:table-cell; as a style. To resolve this, simply override that to flex.
<html>
<body style="background:grey;">
<table width="500" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr>
<tr>
<td style="
background-image: url(https://s28.postimg.org/yrbcuftd9/zip.png);
height: 9px;
"></td>
</tr><tr>
<td style="display:flex;"><img width="500" src="https://s28.postimg.org/yrbcuftd9/zip.png"></td>
</tr>
</tbody>
</table>
</body></html>
Anything added through the CSS is not considered 'content' by the browser.
The only reason you see the first two rows is because of the height:9px; CSS.
If you remove that you will see that the rows do not appear (0 height) this is because the rows do not contain any content so they rely on CSS to specify their dimensions.
Because the last <td> has content in the <img ... tag it will display the image with the standard table spacing as this has not been overridden by any css.
Related
i just started learning in HTML.
I'm having a problem in cell padding and spacing...
the one that i created have a cell padding and spacing on all row... is it possible to have a cell spacing and padding in the 1st row but not in the 2nd row?
`
</td>
<tr>
<td width="250" height="500">
</td>
<td width="750">
</td>
</tr>
<tr>
<td colspan="2" height="75">
</td>
</tr>
`
You can simply add padding to each TD not TR
But spacing between cells only for the whole TABLE
The Attribute padding is the response about cell padding
<table border="1" style="border-spacing:2px;">
<tr>
<td width="250" height="500" style="padding:5px;">One</td>
<td width="750" style="padding:5px;">Two</td>
</tr>
<tr>
<td colspan="2" height="75">Three</td>
</tr>
</table>
I would suggest to wrap the content you want to edit in a and add css properties like for example:
Take a look at this div and style combination, it gets kinda useful sometimes. You can make the particular elements special even when they are in a table with constant style.
You can even add this style attribute to the / tags themselves. Maybe what you're looking for.
I want to write the simpliest example of the following image
My example should work in ie6,7,8,9 and so on. So I can't use float or anything helpfull. I made jsFiddle using table
<table width="500px">
<tr>
<td width="45px"><span>e-mail</span>
</td>
<td align="center"> <div style="border-bottom: 1px solid;">test#gmail.com</div></td>
</tr>
<tr>
<td width="45px"></td>
<td align="center"> <span>(email)</span>
</td>
</tr>
</table>
, but the bottom (email) have margin from the line.
And I want that everything was like on my first image. Thanks
I have tried this.
Check this jsFiddle link
<table width="500px" style="padding:0px; border-spacing:1px">
<tr>
<td width="45px" style="padding:0px"><span>e-mail</span>
</td>
<td align="center" style="padding:0px"> test#gmail.com <hr noshade style="border-top:1px; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-top: 0; -webkit-margin-bottom: 0;"/> </td>
</tr>
<tr>
<td width="45px" style="padding:0px"></td>
<td align = "center" style = "margin-top:0px; padding:0px">(email)</td>
</tr>
The “margin” you are referring to is partly spacing between cells, partly padding inside the cell, partly leading, and partly spacing in the font. In your approach, the simplest fix is probably to set cell spacing to zero and to move the cell content upwards a bit, using relative positioning.
<table width="500" cellspacing="0">
<tr>
<td width="45">e-mail
</td>
<td align="center" style="border-bottom: 1px solid">test#gmail.com</td>
</tr>
<tr>
<td width="45"></td>
<td align="center"><span style="position: relative; top: -0.15em">(email)</span>
</td>
</tr>
</table>
apply border-spacing: 0 to the table's style (border-collapse: collapsewould work too, aswell as cellspacing attribute)
add padding: 0 to the tdcontaining <span>(email)</span>
To increase the space between the upper e-mail-adress and the bottom border (which you did not mention explicitly but is not the same as your example image):
move the border-bottom style from div to its parent td
add a padding-bottom to the same td
I need to create a table with 2 cells (or 2 divs. Doesn't matter), which will be contained within a TD tag, like this:
<td style="height:200px;">
<table>
<tr>
<td>Top Cell</td>
</tr>
<tr>
<td>Bottom Cell</td>
</tr>
</table>
</td>
Each cell will contain 1 image (see image below). My problem however, is the image in the top cell always needs to be at the very top and the image in the bottom cell always needs to be at the very bottom, irregardless of the height of the parent TD tag. So in the example below, lets say sample #1's parent TD tag is 200px height. The images align to the very top and bottom of their cells. If I switch the height of the TD tag to 800px (Sample #2), then the images should still align properly.
alignment sample http://functionalevaluations.com/images/imagealignment.jpg
I should also mention that I can't hardcode a height into the table itself. The height of the table will always need to be 100% of the parent TD tag and the only value where I can manually adjust the height value is in the parent TD.
How can I do this? Oh, also it doesn't matter if this is a table or divs or whatever. The only thing that needs to be there is the parent TD tag.
Finally, here's my current HTML. My parent TD adjusts fine, however the height of my table is always no more than the height of my 2 images. I can't seem to get it to be the same height of the parent TD:
<td width="155" valign="top" rowspan="2" style="border:solid 1px #000;height:200px; ">
<table border="1" cellspacing="0" cellpadding="0" style="height: 100%;">
<tr>
<td valign="top" style="height:50%;">
<img src='includes/images/itemImages/TopImage.jpg' border="0"
style="vertical-align: top">
</td>
</tr>
<tr>
<td valign="bottom" style="height:50%;">
<img src='includes/images/itemImages/bottomImage.jpg' border="0" style="vertical-align: bottom">
</td>
</tr>
</table>
</td>
Try this - DEMO
HTML
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="top">
<img src='http://lorempixel.com/100/100' />
</td>
</tr>
<tr>
<td class="bottom">
<img src='http://lorempixel.com/100/100' />
</td>
</tr>
</table>
CSS
img {
display: block;
margin: auto;
}
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }
HTML markup:
<table class='cardc'>
<tr>
<td rowspan='5' width='10%'>
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>
<td width='70%' colspan='3'>"
."<a href='".$profilePage."&sid=".$sfid."#box-one'>".($record->fields->FirstName)." ".($record->fields->LastName)."</a></font>
</td>
<td>
".$record->fields->Email."
</td>
</tr>
<tr>
<td class='greyF' colspan='3'>
".$record->fields->Country_of_Citizenship__c."
</td>
</tr>
<tr>
<td>
<div class='greyF'>year</div>".$record->fields->Fellowship_year__c."
</td>
<td>
<div class='greyF'>Organization</div>".$record->fields->Partner_Organization__c."
</td>
<td>
<div class='greyF'>Country</div>".$record->fields->Fellowship_Country__c."
</td>
</tr>
<tr>
<td colspan='3'>
<div class='greyF'>Education</div>".$record->fields->Education__c."
</td>
</tr>
<tr>
</tr>
</table>
CSS markup:
.cardc {
border: 5px outset white;
padding: 3px;
width:80%;
}
But as the title says, I'm having cross Browser issues, the border that's supposed to cover the whole table gets cut off at the bottom.
Any recommendations for alternative ways to create the border?
Edited HTML taking everybody's worries into consideration. Border still draws improperly.
See a demo here
It's caused by a combination of an invalid rowspan and border collapsing (which is the default when you select "Normalized CSS" in jsFiddle). If you turn that off or provide the correct number of rows then the border draws correctly.
<td rowspan='5' width=10%> indicates that there are at least 4 following rows, since the current cell shall span 5 rows. Since you don't provide any of those rows the <td> will spill out of the table. Drop the rowspan attribute:
<td style="width:10%">
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' height='120' width='100'/>
</td>
You have a rowspan="5" on the first td which is breaking the bottom border of the table, probably because it cannot find the remaining 4 rows to merge with. Removing the rowspan fixes the border.
http://jsfiddle.net/Q3e9m/
Try fixing the errors with html in your code, for starters. Your code lacks some quotation marks, and styling attributes in tags are deprecated.
<html>
<head>
<style>
.cardc {
border: 5px outset white;
padding: 3px;
width:80%;
}
</style>
</head>
<body>
<table class='cardc' style="height:100px;">
<tr>
<td style="width:10%">
<img src='http://fwfn.ca/sites/default/files/pictures/blank_person.jpg' style="height:120px;width:100px;"/>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
</body>
Lack of quotation marks and units.you need to specify whether your values are in pixels or ems ....try and use color coding codes, eg #fff or rgb(255 255 255) instead of of saying white.
I'm using this boilerplate: http://htmlemailboilerplate.com/
I want a table row to be 6px of height and one row to be 1px of height. No matter what I try the table rows wont go less than a height of 15px. Coincidently 15px is the font-size.
Code:
...
<tr>
<td height="6" style="height: 6px;"> </td>
</tr>
<tr>
<td height="1" style="height: 1px;"><img src="images/bar.gif" width="220" height="1" /></td>
</tr>
...
Any way I can get this table rows to be the height I want?
Did you try using CSS to set line-height:1px on your td?
I dont know if they have changed the rules for Outlook 2013 recently, but I found that setting line height and font size on the TD didnt work. I even tried setting it on the TR, that didnt work either.
I put a & nbsp; in the cell and set its font size to 0px as well as putting line height and font size on the TD just to make doubly sure. That seems to have worked for me.
The example below has a 2px green cell - tested in litmus and "real" 2013. Hope this helps!
<table width="600" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" bgcolor="#0000CC"></td>
</tr>
<tr>
<td height="2" bgcolor="#00FF00" style="line-height:0px; font-size:0px;"><font style="font-size:0px; -webkit-text-size-adjust: none;"> </font></td>
</tr>
<tr>
<td height="20" bgcolor="#0000CC"></td>
</tr>
</table>
I needed to add
table td { mso-line-height-rule: exactly; }
to make it work in Outlook 2013.
Table cells will expand to hold the content you put in them, no matter what height you set them to be.
The non-breaking space will be the height of a line. You need to wrap it like this:
<span style="line-height:1px;font-size:1px;"> </span>
Similarly, the cell with the image will be at least as tall as bar.gif
I use line-height and font-size (if smaller than the current) with a (space) -
<table width="600" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="line-height:5px; font-size:5px;"> </td>
</tr>
</table>
Or if inline -
<span style="line-height:5px; font-size:5px;"><br /><br /></span>