I want to split screen to two area left and right,in right segment show a image and in right segment show textbox,for that purpose write this html code:
<table style="width:100%">
<tr>
<td style="width:50%;height:100%;" align="center">
<img src="../Content/45.png" style="display:block;height:100%;width:100%;" />
</td>
<td style="width:50%;">
behzad
</td>
</tr>
</table>
but when i run the html page ,image not fit to the table column height,and i must scroll the browser to see all of the page,i want just fit to the screen height,my out put i this :
Use viewport units vh/vw, and to keep aspect ratio on the image, set the style on the image to display:block;max-width:50vw;max-height:100vh
html, body {
margin: 0;
}
table {
border-collapse: collapse;
}
td {
padding: 0;
vertical-align: top;
}
<table style="width:100vw">
<tr>
<td style="width:50vw;height:100vh;" align="center">
<img src="http://lorempixel.com/600/600/animals" style="display:block;max-width:50vw;max-height:100vh" />
</td>
<td style="width:50vh;">
behzad
</td>
</tr>
</table>
in this case you'd better use background-image instead of <img> to avoid stretching
check the following demo
html,body{
height:100%;
}
table{
height:100%;
}
<table style="width:100%">
<tr>
<td style="width:50%;height:100%;background-image:url(http://placehold.it/600x600)" align="center">
</td>
<td style="width:50%;">
behzad
</td>
</tr>
</table>
emphasized text
instead of this section
<img src="../Content/45.png" style="display:block;height:100%;width:100%;" />
try this section
<img src="../Content/45.png" height="50%" />
I hope it works
Related
I am trying to make a HTML email layout using table row, where text and image is being showed in one row. But I am not able to fit in
This is what I want it to look like
My code:
<table>
<tr>
<td class="padding">
<table class="content3">
<tr>
<td>
<p style="padding: 20px; background-color: #f7f7f7;">
Learn how to sync your smartwatch or a fitness band with the Vantage Fit app here.
</p>
</td>
<td>
<img src="images/smart-devices.png" width="150px" style="background-color: #f7f7f7; display: inline;" />
</td>
</tr>
</table>
</td>
</tr>
</table>
By setting a fixed height for each <td> element. The design could be achieved.
I have rearranged the code at codepen: https://codepen.io/samuvpd/pen/gOWbXRx
Looks like the <td> on the right adapts it's size to the width property you set to 150px. You could try setting both <td> at 100% height and then set the <tr> to the size you want.
Technically if you give the parent a size and tell the children to fill 100% of it it should behave as you wanted.
This seems to be caused by the <p> default margin, those 2 <td> are actually the same height but the background color doesn't apply to the margin so it looks smaller.
I would recommend removing that margin and making the <td> have the background color.
td {
background-color: #f7f7f7;
}
<table>
<tr>
<td class="padding">
<table class="content3">
<tr>
<td>
<p style="padding: 20px; ">
Learn how to sync your smartwatch or a fitness band with the
Vantage Fit app here.
</p>
</td>
<td>
<img
src="mages/smart-devices.png"
width="150px"
style="display: inline"
/>
</td>
</tr>
</table>
</td>
</tr>
</table>
I've made a table to act as a frame to lay my website out on but when I set the width of it to 100% and put a background on it I have an edge on the right hand side that won't fill.
Checkout my website linked to my profile and click on the altwebsite 2 link for what im getting.
Here is the code:
<table id="maintable">
<tr id="firstrow">
<th id="header" colspan="3">
</th>
</tr>
<tr id="menu" colspan="3">
<td>
<?php
include 'pagecontent/link.php';
?>
</td>
</tr>
<tr id="secondrow">
<td id="leftcol">
</td>
<td id="maincol">
<?php
include 'pagecontent/main.php';
?>
</td>
<td id="rightcol">
</td>
<td id="footer" colspan="3">
</td>
</tr>
</table>
and the css:
html, body {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
table {
text-align: center;
border-width: 0;
border-style: none;
border-spacing: 0;
border-collapse: collapse;
padding: 0;
width: 100%;
}
I'am trying to keep it all in a separate stylesheet.
Any help would be brilliant thanks
your id="header" and id="menu" [colspan] is set to 3, but your id="secondrow" has four <td>
Maybe you want this:
<table id="maintable">
<tr id="firstrow">
<th id="header" colspan="3"></th>
</tr>
<tr id="menu">
<td colspan="3">
<?php
include 'pagecontent/link.php';
?>
</td>
</tr>
<tr id="secondrow">
<td id="leftcol"></td>
<td id="maincol">
<?php
include 'pagecontent/main.php';
?>
</td>
<td id="rightcol"></td>
</tr>
<tr id="footer" >
<td colspan="3"></td>
</tr>
</table>
Try
table-layout:fixed;
for your table. I think this should work.
Try to put the attribute width="100%" in the table tag. This sometimes helps even when the css is set to 100% width.
ALSO:
I recreated the same basic code you used, and it was working fine on my machine so my guess is that you have some sort of surrounding div or tag that the table is taking up 100% of.
First things first i want to say thank you for all the replies, really appreciated.
And yeh i had 4 columns with a colspan of 3 thought i set it to another row. For all those table haters out there it helps me visualise the layout.
And thanks again for the help
Add this for your class. It worked for me
tbody, tr {
display: block;
width: 100%;
}
My code is this :
<div style="width: 300px;">
<table width="100%" border="2px solid blue">
<tr>
<td style="width:30%">Player</td>
<td style="width:30%">Club</td>
<td style="width:30%">Country</td>
</tr>
<tr>
<td style="width:30%">HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard</td>
<td style="width:30%">Chelsea</td>
<td style="width:30%">Belgium</td>
</tr>
<tr>
<td>Ronaldo</td>
<td>Real Madrid</td>
<td>Portugal</td>
</tr>
<tr>
<td>Messi</td>
<td>Barcelona</td>
<td>Argentina</td>
</tr>
</table>
</div>
The result is this :
I tried to add width=30% in the column player, but it's still not working.
it's beacause your text is too large
use this may help you
<style>
table tr td
{
word-break: break-all;
}
</style>
Moob was before me, use word-wrap:break-word; but also use table-layout:fixed
css code
table{
table-layout: fixed;
}
td {
word-wrap:break-word;
}
That's because "HazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazardHazard" is stretching it.
Table cells will stretch to fit their content, and if they can't break, they will keep stretching.
If it was "Hazard hazard..." etc with spaces, it would break as expected. The same would happen if you put a large image in the table cell.
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; }
Im trying to create a dynamic site that will display a specified profile image throughout the page in various areas.
As such, I'd like to have only one file, and resize it to fit in each area, much like Facebook does with its usergroups and profile pics.
I had no problem doing this until i tried to put the image inside a table:
HTML
<table width='600px'>
<tr>
<td rowspan="3" width="75px" height="75px">
<div id="cp_image" class="hidden rborder">
<img class="cp_img_resize" src="<?php echo $profile[0]['cp_img_loc'] ?>"/>
</div>
</td>
<td>
<strong><?php echo $profile[0]['name'] ?></strong>
</td>
</tr>
<tr>
<td>
<em><?php echo $profile[0]['description']?></em>
</td>
</tr>
<tr>
<td><?php echo $popular ?></td>
</tr>
</table>
My CSS
#cp_image {
width: 100px;
height: 100px;
}
#cp_name {
height: 35px;
min-width: 200px;
}
.cp_img_resize {
width:100px;
height: auto;
}
Is there something I'm missing? Any reason the image is not resizing?
Thanks
You are setting the width of the image TD inline to a smaller px:
<td rowspan="3" width="75px" height="75px">
The width of the TD is overriding the width you are declaring for the IMG.
See http://jsfiddle.net/DmnV7/2/
CSS:
.table{
width:600px;
}
.cp_img{
height:75px;
width:75px;
}
.cp_img>img {
max-height:75px;
max-width:75px;
display:block;
margin:0 auto;
}
HTML:
<table class="table">
<tr>
<td rowspan="3" class="cp_img">
<img src="[image]" />
</td>
<td>
<strong>Name</strong>
</td>
</tr>
<tr>
<td>
<em>Description</em>
</td>
</tr>
<tr>
<td>Popular</td>
</tr>
</table>