We have a items lined up in a table with no borders or padding. Each first row contains a graphic and the row immediately below is either blank or contains an anchor link to a disclaimer. The link should be closer to the graphic directly above it, but there's still a big gap.
What can I do to format the table so that the graphics and the disclaimer link can be closer?
This is the link to the page I'm working on: http://edenred.jp/for-beneficiaries/for-current-beneficiaries/main-affiliates-list.aspx
Here is a sample of the code: (this was taken from the third row from the bottom)
<tr>
<td>
<span style="font-size: 14px;"><img alt="てんや" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo35-(1).gif.aspx" style="width: 160px; height: 48px;" title="てんや" /></span></td>
<td>
<span style="font-size: 14px;"><img alt="とりかく" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo36-(1).gif.aspx" style="width: 160px; height: 48px;" title="とりかく" /></span></td>
<td>
<span style="font-size: 14px;"><img alt="とんかつがんこ" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo37-(1).gif.aspx" style="width: 160px; height: 48px;" title="とんかつがんこ" /></span></td>
<td>
<span style="font-size: 14px;"><img alt="とんかつ浜勝" src="/getattachment/For-Beneficiaries/For-current-beneficiaries/Main-affiliates-list/rogo38-(1).gif.aspx" style="width: 160px; height: 48px;" title="とんかつ浜勝" /></span></td>
</tr>
<tr>
<td style="text-align: right; vertical-align: top;">
<span style="font-size:14px;">※1</span></td>
<td style="text-align: right; vertical-align: top;">
<span style="font-size:14px;">※1</span></td>
<td>
</td>
<td>
</td>
</tr>
You have padding set to 10px:
.cpMain td {
vertical-align: top;
padding: 10px; // play with it, change to padding: 0px for the beginning
width: 220px;
}
remove it and it will look good.
Or you can create a css class below the .cpMain td class:
.table-no-padding td {
padding: 0px;
}
and add this class to the list of css classes in your html:
<table class="table-no-padding">
<!-- td content -->
</table>
This is generally caused when you do not define cellspacing=0 and cellpadding=0 while writing table tag. Please check for it.
In your code, I can see that you have applied 10px padding to the class .cpMain td
And 5px right padding is applied to .fruitboxDeliveryForm table.customer td, .simpleForm td
Removing or setting them to 0 these may help you achieve it.
Browsers have a default display for every element. You can uses a tool like firebug for firfox to inspect elements and see what they are for yourself. If you do not explicitly set the style the default will be used.
Using a tool like firebug will also show you where applied styles are coming from
Use CSS to set the style as required. :Set cellpadding and cellspacing in CSS?
In each td of the anchore, set padding-top to 0
padding-top="0px"
eg
<td style="text-align: right; vertical-align: top;padding-top:0px;">
<span style="font-size: 14px;">※8</span></td>
hope it helps :)
Related
I have a table and what I want is to not make the space between the content as big. This is what the page looks like right now:
So this is some of the code for the table (I'm not posting it all because it's repetitive, all the tags are closed at the end too).
I have tried changing the padding and margin and it doesn't work. This is the CSS:
/*styling the table for the add ons*/
table,
tr,
td,
input {
margin: 30px;
padding: 10px;
margin-right: 20px;
margin-left: 45px;
line-height: 1.4em;
font-size: 17px;
}
.pushRight {
position: relative;
left: 10px;
bottom: 75px;
}
<table style="width:100%">
<tr>
<td><label><input type="checkbox" name="example" value="Value"><span><b>Voice over artist</b> €475</span>
<table>
<tr>
<td class="pushRight">If you require a voice artist for your video project<br>please select this option.</td>
</tr>
</table>
</td>
<td><label><input type="checkbox" name="example" value="Text"><span><b>Creative Concept</b> €1200</span>
<table>
<tr>
<td class="pushRight">We are bursting with ideas, so if you don't have one of<br>your own please select this option.</td>
</tr>
</table>
</td>
</div></tr>
<tr><div class="secondRow">
<td><label><input type="checkbox" name="example" value="Value"><span><b>Script</b> €850</span></label>
<table>
<tr>
<td class="pushRight">If you would like us to allocate our scriptwriter to your project<br>please select this option.</td>
</tr>
</table>
</td>
<td><label><input type="checkbox" name="example" value="Text"><span><b>Storyboarding</b> €875</span>
<table>
<tr>
<td class="pushRight">It is not essential to storyboard every video project, <br>however if you would like to include this process,<br>please select this option.</td>
</tr>
</table>
</td>
</div></tr>
First of all, you have some divs that don't do much in your html(div with class second row), when you use tables, the tr tags define the rows automatically, so you don't have to put a div to say that's my first row etc...
Using a lot of margin, and padding everywhere will make your table look ugly depending on which browser you're using, i tried to reorganize your code and just added this in your css :
td{
padding : 20px
}
table{
margin: 0 auto;
}
All you have to do now is to play with the padding to change the space as you want. you can also change the width of the table if you want a bigger table.
Here's a jsfiddle :
https://jsfiddle.net/rfroq680/2/
I had this recently, you need to use border-spacing in css.
Try this:
table{
border-collapse:separate;
border-spacing:0 6px;
}
You'll get 6px between rows with the above code.
This should help too: https://www.w3schools.com/cssref/pr_border-spacing.asp
I am trying to add a space between the image logo and the link .
Not sure what to do .
I tried adding space in the text but didn't work (> FAA/ATC NEXT DAY PLAN)
I am backend guy but sometimes need to mess with front end :(
<tr> <td> <img src="images/page_white_acrobat_small.png" align="absbottom" /> <a style="font-size: 12px" href = ""onclick="Popup.open({url:'PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN</a></td></tr>
Unfortunately/fortunately, as you've now realized, multiple white space does not persist in the HTML layout.
CSS is your friend when it comes to formatting. You can add this rule to your stylesheet,
tr td img {
margin-right: 1rem;
}
Otherwise, if you don't have a stylesheet, try adding an in-line style to your image tag as follows,
<tr>
<td>
<img src="images/page_white_acrobat_small.png" style="margin-right: 1rem;" align="absbottom" />
<a style="font-size: 12px" href = ""onclick="Popup.open({url:PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN</a>
</td>
</tr>
Notice here that I have added style="margin-right: 1rem" to your tag. This will apply this CSS rule directly to that tag, adding a margin on the right side with a size of 1 rem.
White space in your source code is truncated. Instead use a margin on the image or link.
E.g.
img {
margin-right: 2em
}
you need to give some margin here to give space between the image and link, you can give margin-left to a
td a{
margin-left: 1px;
}
or margin-right to img
td img{
margin-right: 1px;
}
you have sevral way to do this :
the better solution is by css you can do :
td img{
margin-right: 10px;
}
but if you do this you will affect all the td img of your page.
in that case i advise you to put a class on your td to affect only this element and it's better if you have a list of this kind of file.
<tr class="fileMoreIcon">
<td>
<img src="images/page_white_acrobat_small.png" align="absbottom" />
<a ...........
and in css
.fileMoreIcon img{
margin-right: 10px;
}
one other way is just to add a html space character
<tr>
<td>
<img src="images/page_white_acrobat_small.png" align="absbottom" />
<a style="font-size: 12px" href = ""onclick="Popup.open({url:PERTI_Plan.pdf',width:800,height:500,resizable:'yes', separateWindow:true});">FAA/ATC NEXT DAY PLAN</a>
</td>
</tr>
Here is the code:
<table border="1" cellpadding="2" cellspacing="2" height="250">
<tbody>
<tr>
<td>
<div style="background: url('image path goes here';); width: 300px; height: 250px; position: relative;">
<p style="width: 180px; font-size: 12px; margin-top: 35px; position: absolute;">My TEXT goes here....</p>
</td>
</tr>
</tbody>
</table>
Now, I am i need to increase the width of the image OR need to left-indent the image.
How can I do that ?
I have tried giving the width directly.. But it's not working...
Any advice or suggestion will be thankful and grateful..
You are using image as background of the parent div. If you want to just change the size of image you should use img tag. Something like the example below
<table border="1" cellpadding="2" cellspacing="2" height="250" width="300">
<tbody>
<tr>
<td>
<div >
<img style="float:left;" src="http://www.gravatar.com/avatar/03bc7f86de865926a1cb5036198d00a0?s=32&d=identicon&r=PG" width="150px" height="125px" /></div>
<p style=" display: block; width: 280px; font-size: 12px; margin-top: 35px; position: relative;">We understand you want to choose benefits that suit you and your life. And we regularly review things so we're always offering benefits you say you want to see.</p>
</td>
</tr>
</tbody>
</table>
You could use the CSS3 background-size property.
.myelement {
background-size: 275px 125px; /* input your values here */
}
Alternatively you could make yourimage inline instead of being the background of a DIV and size it using regular width and height that way.
A couple of points about the code you have posted:
Tables should only be used to display tabular data and not for simple layour purposes.
You have no closing DIV tag.
I have search around regarding this whitespace area while coding with html. But I still cannot resolve mine. My problem is that there is always a whitespace after the image of abclogo no matter what i change in the table style. I would like to see the image unseparated from the next line which shows 31 July 2012
<table style="vertical-align: bottom; background-color: rgb(0, 136, 64); width: 100%;">
<tbody>
<tr>
<img style="border: 0; width:>800px;"alt="Logo of abc" src="abclogo.jpg">
</tr>
<tr>
<td style="text-align: right; padding-right: 15px;">31 July 2012</td>
</tr>
</tbody>
</table>
Add cellspacing=0 cellpadding=0 to the table tag. Or use border-collapse: collapse;.
Also add display: block; to the image.
Simply float the image to the left: jsFiddle example.
I can't get over what appears to be a simple CSS formatting problem in Chrome: I want to put a table towards the right, and a label and some buttons toward the left, inside the same paragraph. This works easy enough in other browsers (Firefox, IE7 & 8), but in Chrome the table stretches over the entire page, under the label.
HTML:
<div class="formrow">
<label> </label>
<div style="display: inline; width: 208px; ">
<table id="tbl_Index" class="grid" style="display: inline; width: 208px; table-layout: fixed;">
<thead>
<tr class="">
<th style="width: 50px;"></th>
<th style="width: 150px;" class=""></th>
</tr>
</thead>
<tbody>
<tr id="1" class="">
<td style="width: 50px;"></td>
<td style="width: 150px;"></td>
</tr>
<!-- etc... -->
</tbody>
</table>
</div>
</div>
Thing is, I've tried just about any trick I found to get the table limited at 200px:
I tried assigning table-layout: fixed, which, in conjunction with width, should have limited my table to 208px;
I tried wrapping the table in a div and setting the div inline, to limit the table this way
I tried styling the grid with display: inline; and then setting max-width: 208px; (you might know that max-width only applies to inline or block, and table is neither of those.)
What's really annoying for me is that if I go in the console and try to get width for the table, it does tell me 208; but when I look in the compiled properties for the table, it displays 0px;
Add to the table's style: float:right; and you want to use inline-block and not inline this should do the trick
You can try to use this css above:
div.formrow { clear:left; }
div.formrow label { float:left; }
div.formrow tabel { width:208px; border-collapse:collapse; display:inline-block; }