i am making a project using html and css where i m creating the windows 8 style using tables i m going to add different images as table cell backgrounds
Files
Trash
but it is not displaying any images
try this:
<table>
<tr>
<td background="http://wallpaper-download.net/wallpapers/random-wallpapers-green-lime-background-wallpaper-32549.jpg" height="600px" width="700px" align="center">rvrtv</td>
</tr>
</table>
display images in every cell in table
<html>
<style>
.first
{
background : imagepath ;
}
</style>
<body>
<table>
<tr>
<td class="first">some value</td>
</tr>
</table>
Related
I have this HTML code:
<body>
<table width="650">
<tr width="650">
<td width="650">
lots of text here
</td>
</tr>
</table>
</body>
How can I use a variable/constant to represent 650? Do I need to use javascript or something?
What I really want is a way to reuse some code so that I only need to change the width value in one place.
Nb. I'm not using a database or anything. Just a simple html page, so I'd like to do something like:
int x = 650
Using css:
table,tr,td{width:650px;}
CSS
table, tr, td {
width: 650px;
}
HTML
<body>
<table>
<tr>
<td>
lots of text here
</td>
</tr>
</table>
</body>
I have a table that is split into 3. My problem is I have content on the left side and pic on the right side. When I open the page the pic is starting in the middle of the page I need the pic to be displayed at the top of the page. How can I do that?
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td >
<table> Lots of Content </table>
</td>
<td width ="10%">
<table> Empty table (that gives space between left content and right image </table>
</td>
<td width = "20%">
<table width="100%">
<tr>
<td> <Asp:Image Runat="server" Id="Image" align="top"> </td>
</tr>
</table> </td>
</tr>
</table>
If you really want / need to keep the existing structure and look for a quick and dirty fix, then set the position of the Image to absolute and with top and left position it exactly where you want.
Use this page to figure out what kind of positioning you want (not sure from post) http://www.w3schools.com/css/css_positioning.asp
And then embed the code like this:
<head>
<style type="text/css">
img
{
[Style properties you pic]
}
</style>
</head>
Or consult css_howto and use a proper CSS file for you entire page layout (no more tables)
that's easy... here's the hack... add a class to the td
.positionhack {position:relative}
then on the image
.positionTop {
position:absolute;
top:0;
}
I want to put a background image in only 1 cell of the table. When I'm specifying in table tag or in 'style' background is being applied to whole screen. Is it possible to specify different local images to different cells in a table using only html?
Relevant HTML (from comment by the OP):
<table align="center" height=501 border=2>
<tr>
<td height=167 align="center" style="background: (C:\Users\user\Desktop\4R9EF00Z.jpg);">[here]
Apple pie s</td>
<td rowspan=3 width="80%"> <b>Ingredients</b> .........</td>
</tr>
</table>
<table style="width: 100%; height: 300px; ">
<tr>
<td style="background-image:url(http://www.housecatscentral.com/kittens.jpg)">CELL ONE</td>
<td>CELL TWO</td>
</tr>
</table>
Ways to apply the style:
Inline style (usually not the preferred method)
Class selector
CSS2/3 hierarchy selector or pseudo-class
ID selector
Simply use inline CSS on the <td> element of the cell.
For example:
<td style="background: url(/resources/images/background.png);">
Specify your background (using style attribute) for <td> tag (or <th> tag)
You have to specify it to the cell (td tag), not to whole of table.
do it like this:
<tr><td style="background-image:url('yourPath')"></td></tr>
HTML:
<table>
<tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
<tr>
<td class="cell">Cell 1</td>
<td id="cell">Cell 2</td>
<td style="background-color: yellow">Cell 3</td>
<tr>
</table>
CSS:
.cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
#cell {
background: url(http://forum.php.pl/uploads/profile/photo-50953_thumb.png);
}
Preview here: http://jsfiddle.net/384An/
With CSS there are two ways, assign an id to the cell:
#tableCellID {
background-image: url(path/to/image.png);
}
Or use nth-child:
tbody tr:nth-child(2) td:nth-child(3) {
background-image: url(path/to/image.png);
}
Combining both approaches in one JS Fiddle demo.
If you must use in-line styles (and I heartily recommend avoiding this if you can):
<td style="background-image: url(path/to/image.png);">...</td>
Or, possibly (but it's deprecated):
<td background="path/to/image.png">...</td>
But, please note that I do not recommend, or support, using either of these approaches. Certainly the final approach is horrible, but if it's the only approach you can take then...just don't tell me you used it. It's horrible, and it'll keep me awake for days feeling guilty.
Updated the previous JS Fiddle demo.
I have normal table, nothing special about it, here it is:
live example : http://jsfiddle.net/fFENK/1/
<table width="100%" border="1">
<tr>
<td rowspan="2">January</td>
<td colspan="2">$10s0</td>
</tr>
<tr>
<td>$100 <br/>$100 <br/>$100 <br/> </td>
<td>$540</td>
</tr>
</table>
The problem here is the text that got automatically centered along, as you can see in the live example I gave before, the text "January" is in the middle of the cell and not at the top of the cell like it suppose to be. How do i fix it?
Set the vertical-align property of the cell.
Add some css to your code:
td {
vertical-align:top;
}
Add valign attribute to <td> node:
<td rowspan="2" valign="top">January</td>
You should apply this css to make it get to the top
td { vertical-align: top }
HI i have created table in HTML from one cell of that table i want to change another cell image or text how its possible ?
in your head section you need to put little css code as
<style type="text/css">
.turnitred {
text-align:center;
background-color:white;
}
</style>
and your td, the one you want to change the colour should have an id and that style you gave on above style text... on click change the bg of the td with according id for example:
<table width="200" border="1">
<tr>
<td width="94"><div class="turnitred" onclick ="changebg.style.backgroundColor='#ff0000'">Turn it red</div></td>
<td width="90" id="changebg"> </td>
</tr>
</table>