I have an html table in which I am placing images side by side inside the td's. How can I get it so that there is no space at all between each image? By default all browsers seem to put in a small space despite 0 padding and margin on each table element. I am not specifying a width on the td's so by default it takes up the width of the image inside of it.
i.e:
<table>
<tr>
<td><img ... /></td> //no space between the td's
<td><img ... /></td>
</tr>
</table>
One more thing that can avoid unwanted space between images:
<td style="line-height:0;">
Apply this css:
td, tr, img { padding: 0px; margin: 0px; border: none; }
table { border-collapse: collapse; }
This resets all spaces to 0.
cellspacing and cellpadding should be 0 on the table.
<table cellspacing="0" cellpadding="0">
<tr>
<td><img></td>
<td><img></td>
</tr>
</table>
Take a look at cellpadding, border, and cellspacing attributes for the HTML table tag. If you are using XHTML or CSS, then check out the corresponding styles - border-collapse, padding, etc.
On my situation, I am trying to continue coding photoshop / imageready splitted html (generated via slice tool or save for web).
If table have a "height" attribute and you replace some images with shorter content, table maintain height adding mysterios gaps between images.
All I have to remove the height. Simple and stupid, but this is a situation can happen.
Related
In the "table style" portion of my code, is there a way for me to adjust the space between the columns in a table? Also, what attribute should I put in to make sure the tables position is aligned completely to the left and top?
<table style="width: 960px; height: 81px;" border="0">
For current and future compatibility use CSS:
// cellspacing
table { border-collapse:separate; border-spacing: 5px; }
To make sure the table is aligned to the left and top, remove any top and left margins. You might also want to change the positioning (position:relative or position:absolute) based on where the table need to exist.
Ref: border-collapse | border-spacing
cellpadding controls the gaps inside cells and cellspacing controls the space between them.
<table style="width: 960px; height: 81px;" border="0" cellpadding="0" cellspacing="0">
As for alignment, you control this within table cells:
<td align="left" valign="top">
you can try with cellspacing property in order to create space
I have a table in which I don't want to set padding &/or margin on each td to apply some spacing between cells, First answer would be to use CellSpacing and/or CellPadding properties of table but when I use these properties they apply space on every side(i.e. on top, bottom, left and right) but I just want to apply space on Top and Bottom.
Is there any solution to my problem?
Use empty row for spacing
See the example below
<table class="style1">
<tr style="height: 20px;">
<td>
sfgefgfeg</td>
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
</tr>
<tr style="height: 5px;" >
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr style="height: 20px;">
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
</tr>
<tr style="height: 20px;">
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
<td>
&sfgefgfeg;</td>
</tr>
</table>
Here the row with height 5px is added for spacing.
You could use border-top and border-bottom on the TD elements and make the colour of the border the same as the background colour of your page.
You can always use padding with <td> to have space on top and bottom in table cell.
To add spacing between rows of table, set <tr> as block element then you can use margin property on that.
Check the demo here http://codepen.io/pen/10248/2
Edits:
Updated to contain spacing between rows.
The alternative ways to create spacing between cells (so that the spacing appears between borders, if cells have borders) is to use cellspacing attribute on a table element in HTML and to use the border-spacing property in CSS. The former suffers from the inflexibility mentioned in the question. The latter has limited browser support. You could use both, so that older browsers use the simple HTML spacing and newer browsers the CSS way.
The following example sets a vertical spacing (i.e., between rows) of 0.5em and a smaller, 0.1em, horizontal spacing (i.e., between columns).
table { border-spacing: 0.1em 0.3em; }
(The order deviates from the usual order in CSS property values: here horizontal comes first, then vertical, whereas e.g. in margin: 0.1em 0.3m an opposite order applies.)
you can simulate spacing by adding border-bottom: 3px solid #fff (change color as you need, same for top)
I have this code :
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
</table>
As you can see, the first tr/td should be height 60px (min-height:60px) but in fact it isn't.
For many reasons, I can't use height directly (this code is formatted trought back office system, in a newsletter).
So, how can I take the whole height on the td trought min-height?
Also, tried putting min-height:60px; on tr, but nothing change...
min-height doesn't work for table elements:
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
I can only assume this applies to td and tr as well.
What should always work is wrapping the content in a div, and applying min-height to that, as shown in this JSFiddle:
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;">
<div style="min-height: 60px; background-color: green">
This is my text that I need in 2 lines
</div>
</td>
Edit: You say this doesn't work with Outlook.
Alternative idea: Place a 60 px tall image in the td, and make it float: left:
<td>
<img src="..." style="float: left">
</td>
Use <td height="60"> not CSS height or min-height
For HTML email set your table cell as <td height="60"> and it will treat that as the min-height. If your content is more than 60px, it will expand accordingly.
Put a DIV in the cell, style the DIV instead.
Min-height doesn't works on tables.
It is sometimes useful to constrain the height of elements to a certain range. Two properties offer this functionality: min-height & max-height
But these can't be used on non-replaced inline elements, table columns, and column groups.
You can't set min-height and min-width, but you can use some CSS3 for achievements this same effect.
.default-table table {
border-collapse: collapse;
}
.default-table table td {
padding: 0;
}
.default-table tr:before {
width: 0px;
content: '';
float: left;
overflow: hidden;
height: 28px;
font-size: 0;
}
.default-table {
overflow: hidden;
}
<div class="default-table">
<table>
<tbody>
<tr>
<td>Steve</td>
<td>Smith</td>
<td>stevesmith#gmail.com</td>
</tr>
<tr>
<td>Jone</td>
<td>Polanski</td>
<td>jonep#gmail.com</td>
</tr>
</tbody>
</table>
</div>
but if u having collapse or padding in td. You must give for .default-table table minus margin-left.
HTML :
<table></table>
CSS :
table{
height:0px; /*Set any facultative length value to Height (percentage value doesn't work)*/
min-height:100vh;
}
That's how I always resolve this problem ...
Add display block
<td style="font-family:Arial;min-height:60px;font-size:12px;line-height:14px;display:block;">
Here's a solution that works in Outlook (tested) and other e-mail clients:
<td style="mso-line-height-rule:exactly;line-height:300px;"> </td>
This is cleaner than using an image, which could negatively affect your spam score, and does the exact same thing.
If you have other content in the <td> that you don't want to have that line height, you can just wrap the non-breaking space in a <span> and set the line-height on that tag:
<td><span style="mso-line-height-rule:exactly;line-height:300px"> </span>**Other content without 300px line-height here**</td>
The reason height or min-height works on <div> tags and not <td> is because <td> are set to display:table-cell and do not respect height the same way that display:block (<div>) elements do.
I have resolved this issue by adding display:block; to its style as
<td style="display:block; min-height:200px;">
min-height does not work in td, Set height that will work like min-height and automatic increase height if needed. That is worked for me
Here is a solution that does not depend on the height in pixels. It works in all email clients:
<table cellspacing="0" cellpadding="0" border="0" style="width:415px">
<tbody>
<tr valign="top">
<td style="font-family:Arial;font-size:12px;line-height:14px;">
This is my text that I need in 2 lines
</td>
<td style="font-family:Arial;font-size:12px;line-height:14px;">
<br/><br/>
</td>
</tr>
<tr valign="top">
<td style="font-size:12px;line-height:14px">
Second Line
</td>
</tr>
</tbody>
The solution works by adding a zero-width column with two lines to the right of the first one. It uses the character, which is a non-breaking zero-width space.
It may be reviving a 2012 post, for those who searched and found this post like me:
Note: Check these addresses for the email client support before using this method, at the time of writing this answer, the support was around 50% -ish.
E-mail client support range of :first-child
E-mail client support range of ::before
table tr:first-child td:before {
min-height: 100px;
display: block;
content: ""
}
<table border="1">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
What I found !!!, In tables CSS td{height:60px;} works same as CSS td{height:60px;}
I have an HTML page which repeats the following table multiple times. Currently the two cells equally share half the page. I'd like to place a border between them that runs vertically down the centre of the page. I've tried placing right borders on the cells of the left cell, but it doesn't produce a uniform border because of the spacing between the cells, and the spacing between the separate tables.
Does anyone have any suggestion as to how I could create this uniform border through the centre of the page?
<table class="ex2" width="100%">
<tr>
<td width=50%>Test Title - Left</p></td>
<td width=50%><p style="font-family:verdana;color:red">Test Title - Right</p></td>
</tr>
<tr>
<td width=50%><p style="font-family:verdana;color:grey">Test Body - Left</p></td>
<td width=50%><p style="font-family:verdana;color:grey">Test Body - Right</p></td>
</tr></table>
Your table does not mention what css is on it already. If there is no top/bottom margins on the table then using border-collapse: collapse on the table works, see http://jsfiddle.net/GY7CW/3/.
If you have top/bottom margin on the tables, and don't care about IE7 or below, then you can use a wrapping element styled to give you the border via a :before pseudo element, see http://jsfiddle.net/GY7CW/2/.
To remove the extra space between the cells you could use:
<style type="text/css">
table.ex2{
border-collapse: collapse;
}
</style>
Okay I've figured out a simple although potentially simplified solution (if you want to use js/jquery/etc)
There are probably better ways to do what you want (i.e not using tables) but here you go haha
<style>
.addborder {
border-right: 1px solid #666;
}
.addspace {
padding-left: 20px;
}
.ex2 { padding: 0px; margin: 0px; }
</style>
for the css and
<table width="100%" border="0" cellpadding="0" cellspacing="0" class="ex2">
<tr>
<td class="addborder" width=50%>Test Title - Left</p></td>
<td class="addspace" width=50%><p style="font-family:verdana;color:red">Test Title - Right</p></td>
</tr>
<tr>
<td class="addborder" width=50%><p style="font-family:verdana;color:grey">Test Body - Left</p></td>
<td class="addspace" width=50%><p style="font-family:verdana;color:grey">Test Body - Right</p></td>
</tr></table>
for your table html ;)
Hope this helps!
On this page I would like to add a white gap between the background of the "Before" and "After table headings, that aligns with the gap between the photos in each column
I've tried setting the width, max-width and margin-right properties of the "Before" heading and also tried setting the margin-left of the "After" heading, but none of these seem to work.
Thanks,
Don
Easiest way is using colgroup and set a border to act as margin.
<table>
<colgroup />
<colgroup style="border-left:5px solid #fff;" />
See also: http://jsfiddle.net/gwYaQ/
A table is easiest I admit, but it's not really tabular data is it.
You're abusing the table for layout =P
Info about colgroup: http://www.w3schools.com/tags/tag_colgroup.asp
There's a rather dirty way, but does the job:
<tr>
<th>Before</th>
<th style="width: 10px; background: none;"> </th>
<th>After</th>
</tr>
<tr>
<td>IMG1</td>
<td>&nbps;</td>
<td>IMG2</td>
</tr>
I don't think you can achieve that simply changing your CSS.
The white gap between the photo is due to the table cells padding-right (10px), so it's "inside" the cell.
The gradient in the heading being the backgound of the heading cells, a white space between them would have to be "ouside".
On way to fix this would be to add a 10px wide column between the 2 columns. Another is to use colgroup.
But BGerrissen is right : you should not use for that.
th {
padding-left: 50px;
}
td {
padding-left: 50px;
}