Here is the code for aligning contact details:
<html>
<body>
<table width="900" class="contact-details">
<tr>
<td><img src="./images/Mobile.png"></td>
<td>
<p>832.674.6834</p>
</td>
<td><img src="./images/fax.png"></td>
<td>
<p>271.217.4981</p>
</td>
<td><img src="./images/email.png"></td>
<td>
<p>test#testpineced.com</p>
</td>
<td><img src="./images/address.png"></td>
<td>
<p>1055 Loremips Tr. Kity, TX</p>
</td>
</tr>
</table>
<style>
img {
/* width: 100%; */
display: block;
}
</style>
</body>
</html>
You can see there is gap difference in between images and text content. Can you please help me to make equal gap difference and fit full content inside the table class.
Please see the screenshot attached: https://imgur.com/a/tjd9UOo
use css class for td and for each td can specify the inline width & height
.img {
background-repeat:no-repeat;
background-size: cover;
}
<table width="900" class="contact-details">
<tr>
<td style="background-image:url(./images/Mobile.png); width: 50px; height: 80px;"> </td>
<td><p>832.674.6834</p></td>
<td class="img" style="background-image:url(./images/fax.png); width: 50px; height: 80px;"> </td>
<td><p>271.217.4981</p></td>
<td class="img" style="background-image:url(./images/email.png); width: 50px; height: 80px;"> </td>
<td><p>test#testpineced.com</p></td>
<td class="img" style="background-image:url(./images/address.png); width: 50px; height: 80px;"> </td>
<td><p>1055 Loremips Tr. Kity, TX</p></td>
</tr>
</table>
<table width="900" class="contact-details" >
<tr>
<td style='width: 30px'><img style='width: 30px' src="./images/Mobile.png"></td>
<td>832.674.6834</td>
<td style='width: 30px'><img style='width: 30px' src="./images/fax.png"></td>
<td>271.217.4981</td>
<td style='width: 30px'><img style='width: 30px' src="./images/email.png"></td>
<td>test#testpineced.com</td>
<td style='width: 30px'><img style='width: 30px' src="./images/address.png"></td>
<td>1055 Loremips Tr. Kity, TX</td>
</tr>
just change the width px according to the image width
**You have to remove width="900" and add padding to <td> element**
<html>
<head>
<style>
img {
/* width: 100%; */
display: block;
}
table{
margin:0 auto;
}
td{
padding-top:5%;
padding-left: 1%;
}
</style>
</head>
<body>
<table class="contact-details">
<tr>
<td><img src="./images/Mobile.png"></td>
<td>
<p>832.674.6834</p>
</td>
<td><img src="./images/fax.png"></td>
<td>
<p>271.217.4981</p>
</td>
<td><img src="./images/email.png"></td>
<td>
<p>test#testpineced.com</p>
</td>
<td><img src="./images/address.png"></td>
<td>
<p>1055 Loremips Tr. Kity, TX</p>
</td>
</tr>
</table>
</body>
</html>
Related
This question already has an answer here:
How to avoid White line between img and td bottom?
(1 answer)
Closed 6 years ago.
Here is the code:
Fiddle
I believe I have removed all spacing, but the td is still 305px and the img is 300px height.
Even if I try:
<td height="300">
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
or
<tr height="300">
On the containing <tr>.
This is completely ignored and the td stays at 305px?
because img is an inline element and has vertical-align:baseline therefore creates a gap.
So you either can:
display:block in img
or set
vertical-align:bottom
Also you don't need 2 styles tag, neither don't you need to duplicate the body rule with new properties, just put all in one body rule.
Note: careful if you are creating this for html-email, the CSS which is not inline (above body) some email clients such as gmail will strip it, make sure you put it all inline or you use some toll that will do that for you.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Battersea Studios</title>
<style type="text/css">
#outlook a {
padding: 0;
}
body {
width: 100% !important;
margin: 0;
padding: 0;
font-family: Arial;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
-ms-text-size-adjust: none;
text-size-adjust: none;
}
.ReadMsgBody {
width: 100%;
}
.ExternalClass {
width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
img {
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
border: 0;
display: block
}
a {
border: 0;
}
hr {
width: 20px;
text-align: left
}
a {
text-decoration: none;
color: white;
}
a:hover {
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body>
<table cellspacing="0" cellpadding="0" align="center" style="width:600px;font-size:20px">
<tr>
<td>
<table cellspacing="0" cellpadding="0" style="color:white;">
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#E66977;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>urtyryhry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-pink.jpg" alt="">
</td>
</tr>
<tr>
<td>
ryhryhjtyhjty
<br>tyjtyjtyjty
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color:#1EA553;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>F</strong>
</td>
<tr>
<td>
<img src="imgs/spacer-green.jpg" alt="">
</td>
</tr>
<tr>
<td>
rthrthrth
<br>ryhryhryht
<br>hryhryhryt
</td>
</tr>
</table>
</td>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
</tr>
<tr>
<td>
<img src="https://placeholdit.imgix.net/~text?txtsize=56&txt=600%C3%97600&w=600&h=600" alt="" width="300">
</td>
<td style="background-color:#EA752E;vertical-align:top;">
<table cellspacing="0" cellpadding="0" align="center" width="240">
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
<strong>rtyryry</strong>
</td>
</tr>
<tr>
<td>
<img src="imgs/spacer-orange.jpg" alt="">
</td>
</tr>
<tr>
<td>
rryu56u
<br>ryuryuy
<br>uryuryuyrt
<br>ytyutyuty
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
img is inline element and it takes few extra pixels on bottom by default. Use display: block for img to remove this space:
table img {
display: block;
}
I need my table to align at the bottom of my div, I've tried adding to the table's style the attributes : position:absolute;bottom:0px but it changed according to the page and not the div. I posted the full code (with img tag) cus i'm not sure about the influence of other tags.
//HTML
<div>
<img src="Img/flower" style="width: 960px; height: 474px; z-index: -1; position: absolute" />
<table style="width:100%;height:120px;">
<tr>
<td style="background-color:gray">
</td>
<td style="background-color:green">
</td>
<td style="background-color:yellow">
</td>
<td style="background-color:red">
</td>
<td style="background-color:lime">
</td>
<td style="background-color:maroon">
</td>
</tr>
</table></div>
Your parent "div" and "img" should be declared as "position:relative" in this
case.
here is your solution:
<div style="position: relative;">
<img src="Img/flower" style="width: 960px; height: 474px; z-index: -1; position: relative;">
<table style="width: 100%; height: 120px;">
<tbody><tr>
<td style="background-color:gray">
</td>
<td style="background-color:green">
</td>
<td style="background-color:yellow">
</td>
<td style="background-color:red">
</td>
<td style="background-color:lime">
</td>
<td style="background-color:maroon">
</td>
</tr>
</tbody></table>
</div>
You can also use CSS Flexbox (check browser support) to vertical align:
https://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
<div class="Aligner">
<div class="Aligner-item Aligner-item--bottom">…</div>
</div>
<style>
.Aligner {
display: flex;
align-items: center;
justify-content: center;
}
.Aligner-item--bottom {
align-self: flex-end;
}
<style>
I have three tables on my page, each with one row, and three data cells inside.
My issue is, when adding text to a cell, it is increasing the height of the table though I have already defined a height. My second issue is positioning the pictures in the final (3rd) data cells to be in the middle.
#snake {
background-color: #c4df9b;
}
#bat {
background-color: #e2e2e2;
margin-top: 18px;
margin-bottom: 18px;
}
#monkey {
background-color: #c69c6d;
}
#monkeygraphic {
padding-top: 5px;
}
.animalcontainer {
width: 682px;
height: 200px;
}
.animalcontainer td {
border: 1px solid black;
width: 227px;
text-align: center;
}
<div id="main-left">
<table id="snake" class="animalcontainer">
<tr>
<td>
<img src="images/snakegraphic.png" alt="Snake Graphic" title="Snake Graphic" width="155" height="196">
</td>
<td>sad</td>
<td id="snakepic">
<img src="images/snake.jpg" alt="Snake" title="Snake" width="152" height="152">
</td>
</tr>
</table>
<table id="bat" class="animalcontainer">
<tr>
<td id="batgraphic">
<img src="images/batgraphic.png" alt="Bat Graphic" title="Bat Graphic" width="198" height="98">
</td>
<td>
<h1>sad</h1>
</td>
<td id="batpic">
<img src="images/bat.jpg" alt="Bat" title="Bat" width="152" height="150">
</td>
</tr>
</table>
<table id="monkey" class="animalcontainer">
<tr>
<td id="monkeygraphic">
<img src="images/monkeygraphic.png" alt="Monkey Graphic" title="Monkey Graphic" width="207" height="185">
</td>
<td>
<h1>sad</h1>
</td>
<td id="monkeypic">
<img src="images/monkey.jpg" alt="Monkey" title="Monkey" width="152" height="150">
</td>
</tr>
</table>
</div>
Silly me, i've just learnt the vertical-align css "thing" which seems to have sorted my issue.
Thanks to anybody who read the question though.
(Fix: giving my middle td cells a class, and adding vertical-align: top; to the css)
On my site, I have banner, menubar + buttons(in table), one table, with 2 columns. and I want to place footer below that table. I have my table in separate div. I am puttingmy footer to another div, right after the table div ends. Howerver, it isnt positioning below my table. My footer stays at the top of my table and I cant even see the whole footer image. What did I do wrong please?
HTML:
<body>
<div class = "page " align ="center">
<div class="header">
<img id="bannerimg">
<img id="menubar">
</div>
<div class="menu">
<table id="menubtns" border="0">
<tr>
<td><img id="projekt"></td>
<td><img id="eshop"></td>
<td><img id="foto"></td>
<td><img id="video"></td>
</tr>
</table>
</div>
<div class= "content">
<table id= "obsah" border="0">
<tr>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
</tr>
<tr>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
</tr>
</div>
<div class= "footer">
<img id="footerimg">
</div>
</div>
</body>
</html>
my CSS file:
body {
background-image:url('img/bg_image.png');
background-repeat:no-repeat;
background-attachement:fixed;
}
.page
{
position= "relative";
}
.header #bannerimg
{
background-image:url('img/banner.png');
width: 1040px;
height: 594px;
background-repeat:no-repeat;
}
.content
{
margin-top: 80px;
margin-right: 50px;
font-family: "Verdana";
font-size: 20px;
position: relative;
}
.content #buybtn
{
background-image:url('img/kupit.png');
height: 36px;
width: 140px;
}
.content #obsah
{
border-spacing: 60px 30px;
}
.footer
{
position:absolute;
bottom:0;
}
.footer #footerimg
{
background-image:url('img/footer.png');
height: 200x;
width: 992px;
}
.page -> position="relative"; change to position:relative;
footerimg -> height:200x; change it to height:200px;
You want have footer always at bottom of page?
...
<tr>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
<td><img id="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
</tr>
**</table>**
</div>
Second.
Change that:
<div class= "footer">
<img id="footerimg">
</div>
To:
<div id="footer"></div>
And css:
#footer {
position:absolute;
left:0;
bottom:0;
width:992px;
height:200px;
background-image:url('img/footer.png');
}
Your markup shouldn't validate for many reasons. There is not a closing tag on the second table. Use .buybtn instead of #buybtn (an ID does not repeat on the same document). That table with the id #obsah should read like this:
<table id= "obsah" border="0">
<tr>
<td><img class="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
<td><img class="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
</tr>
<tr>
<td><img class="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
<td><img class="buybtn"></td>
<td> dátum: XX.XX.XXXX </td>
</tr>
<!-- and this is when we cue to... -->
</table>
Using a background image for an img tag is redundant and non-semantic. The element with the id of #footerimg should be a div tag, or the img tag with the actual image.
<img src="img/footer.png" alt="footer image">
One, or the other. Not both.
The vertical scroll works, but the horizontal doesn't. My code:
<html >
<body >
<table style=" height:100%; width:100%">
<tr>
<td >
<div style=" overflow:scroll; height:100%; width:100%">
<table style=" width:2000px; height:2000px; ">
<tr><td></td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
Table is not an ideal element to use unless u want to display a table/table of contents.
Always prefer divs than tables.
This should do inside ur <body>
<div style="height: 100%; width: 100%">
<div style="overflow: scroll; height: 100%; width: 100%">
<table style="width: 2000px; height: 2000px;">
<tr>
<td>
</td>
</tr>
</table>
</div>
With Table u will have to set table-layout:fixed ,
<table style="height: 100%; width: 100%; table-layout:fixed">
<tr>
<td>
<div style="overflow: scroll; height: 100%; width: 100%">
<table style="width: 2000px; height: 2000px;">
<tr>
<td style="width:50%; display:none">
</td>
<td style="width:50%; display:none">
</td>
</tr>
<tr>
<td>control here will auto-align to 50%</td>
<td>control here will auto-align to 50%</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
I have modified the td template. Please note that as well.
i changed your code like this
<html >
<body >
<table style=" height:100%; width:100%">
<tr>
<td >
<div style=" overflow:scroll; height:2000px; width:100%">
<table style=" width:2000px; height:2000px; overflow:scroll;">
<tr><td></td></tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
try this.it will work..