Blog: www.amedecrwanda.blogspot.com
On the homepage post I've set the table as: <table cellpadding="0" cellspacing="50">
But it affects spacing at the top too, pushing the table further down the page. Anyone got a fix for this - to keep spacing between columns the same, but remove the gap at the top?
Remove those lines:
<div class="post-header">
<div class="post-header-line-1"></div>
</div>
Make cellspacing zero for table. Add margin for for that particular table using CSS. In this way, you can control the way space (margin) from top.
<style>
table td{
margin:20px;
margin-top:0px;
}
</style>
<table cellspacing="">
...
</table>
Replace this code <table cellpadding="0" cellspacing="50"> with <table cellpadding="0" cellspacing=""> and yes of course you should add the css styles advised by #vishal kokate
Related
I have an HTML e-mail that is breaking on Outlook 2013. Between every row, there is a white space: Photo
Every image is set to display: block, I have added border-collapse: collapse to the table and page-break-before: always to table rows but nothing had effect...
set the cellpadding, spacing and border to 0
without seeing your code and knowing exactly what you have, below is sample of what I use and usually works in Outlook:
<table align="center" cellpadding="0" cellspacing="0" border="0" style="border-collapse:collapse;">
<tr>
<td style="display:block; border-collapse:collapse;">
<img alt="Sample Image" src="http://placehold.it/230x150.png" width="230" style="display:block;" />
</td>
</tr>
</table>
Outlook ads a default font size of 13px. If you add a style of font-size: 1px and line height of 1px on the and the this might fix it.
This fixed it for me when I ran into this issue.
A pretty hacky way of fixing that is using margin-bottom: -10px; or w.e
Perhaps specifically set the padding/margin to 0px.
Why right and down border is invisible?
Here is my table:
http://jsfiddle.net/dFu5e/
You're writing white TD borders over the table border.
You can fix the problem by setting the table border to 2 px.
DEMO
But instead of all those border definitions, I would recommend for next time to use CSS. There are many tools helping you define the CSS of tables for your goals. For example :
http://www.somacon.com/p141.php
http://www.css-generators.com/css-tools/css-table-generator
Remove tr and td border.
Use border="1" and cellpadding="0" and cellspacing="0" for table tag:
<table border="1" cellpadding="0" cellspacing="0">
....
</table>
Or you can remove the overflow: hidden from the table.
It is because you are using overflow:hidden. modified jsfiddle
Remove overflow: hidden; from your table style, fiddle here.
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
This is for a dense display of status information. Preferrably I would like to make the images butt up against each other. Where is the extra white space coming from?
Here's what the generated table elements look like:
<table>
<tr>
<td><small>anim-dept</small></td>
<td>
<a href="http://foo/bar">
<img height="24" width="32" src="http://foo/bar.jpg">
</a>
</td>
....
Use the border-collapse:collapse in the css for the table as follows
table{
border-collapse:collapse;
}
or only for an specific table with id images
table#images{
border-collapse:collapse;
}
Or (if you have no css)
<table cellspacing="0">
DEMOS: without border-collapse and with border-collapse and without css but cellspaacing
This might not be an optimal solution, but I was able to fix this by adding:
tr {
display:inline-block;
height:24px;
}
The css border-collapse: collapse only seems to work for columns, rows still have spacing. Setting the rows to inline-blocks instead of table-rows seems to fix it, although as I said it is probably not the best solution.
Set the TABLE's CELLSPACING and CELLPADDING to zero.
Note that you may need to add padding style to the first table row cells.
<table cellspacing="0" cellpadding="0">
<tr>
<td><small>anim-dept</small></td>
<td>
<a href="http://foo/bar">
<img height="24" width="32" src="http://foo/bar.jpg">
</a>
</td>
....
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.