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>
Related
I have a very simple HTML table which has one row and two cells. The first cell has a hyperlink which should cover both cells. How could I get my hyperlink to cover the second td of my table?
Here is my HTML code:
<table>
<tr>
<td style="width:100px;padding:0">
Yes
</td>
<td style="width:30px;padding:5px">Oh yeah</td>
</tr>
</table>
Now my hyperlink only covers the first td, but not the second one. What could be done?
I do not want to use JavaScript. I do not want to copy the link to both table cells.
as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach:
HTML:
<div class="table">
<a class="table-row" href="/mylink">
<div class="table-cell">...</div>
<div class="table-cell">...</div>
<div class="table-cell">...</div>
</a>
CSS:
.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }
Here is a working JSFiddle
Personally, I would prefer to put a seperate link in each td that points to the same URL, to keep things simple:
<table>
<tr>
<td>
<a href="http://url/stuff">
First column
</a>
</td>
<td>
<a href="http://url/stuff">
Second column
</a>
</td>
</tr>
</table>
<table style="position: relative">
<tr>
<td style="width:100px;padding:0">
Yes
</td>
<td style="width:30px;padding:5px">Oh yeah</td>
</tr>
</table>
By making the link absolute you pull it out of it's layer and by giving it a width of 100, the link extends to the next TD element.
To prevent the anchor tag from overflowing, give the table a relative position to confine the absolute element to the table width.
Here is a JSFiddle
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>
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 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 }
I want to display 4 or 5 boxes(vary) which occupy's 100% of the page width, so it will span start to end of page. and want height just to fit contents.
I am trying to use table for that so it will assign width for each box and fill up whole row.
Problem with code below is all divs in td are centered and does not have same height. tried all i can think of but it doesn't work. tried vertical alignment, height to 100% .....
How can i have all div in td with same height?
Also if there is another way to doing same please let me know. I am html dummy so may not using the right thing.
<table style="width: 100%; text-align:justify;">
<tr>
<td>
<div style="margin-right:15px; background-color:Gray">
Some text here
</div>
</td>
<td>
<div style="margin-right: 15px; background-color:Gray">
column 2 text here
</div>
</td>
<td>
<div style="margin-right: 15px; background-color:Gray">
Column 3 text here
</div>
</td>
<td>
<div style="background-color:Gray">
Last column text here
</div>
</td>
</tr>
</table>
Like I've told plenty of other people, you shouldn't be using divisions inside table cells.
This will achieve the exact same effect, without the divisions:
<table style="width: 100%; text-align: justify;">
<tr>
<td style="margin-right: 15px; background-color: gray;">
Some text here
</td>
<td style="margin-right: 15px; background-color: gray;">
column 2 text here
</td>
<td style="margin-right: 15px; background-color: gray;">
Column 3 text here
</td>
<td style="background-color: gray;">
Last column text here
</td>
</tr>
</table>
If you get rid of the divs and apply your styles and content directly to the table cells you will get the effect you want.
In case there is no special purpose of using div tag inside td. I would just do it without div. add style to td tag.
Mamu, I would suggest that you do not use inline style elements. Instead of styling your table tags it would be far more efficient, and better to add the the following between your <head> tags:
<style type="text/css">
table {width:100%; text-align:justify;}
table td {margin-right:15px; background-color:gray;}
</style>
Using only those two lines of code you can apply the same elements consistently across your entire website. If you only wanted to apply them to some elements, you could create classes by adding a "." to a name of your choice:
<style type="text/css">
.MyTable {width:100%; text-align:justify;}
.MyTable td {margin-right:15px; background-color:gray;}
</style>
And add the following to your HTML:
<table class="MyTable">
Note that class names are case sensitive. But this reusable code is far more efficient.
Furthermore, I would urge to consider the use of tables only if you are presenting tabular data. Tables load slower and are not SEO friendly. It would not be semantically correct to use them for layout. You should separate content from presentation whenever possible, and if it is layout you are after I would suggest using divs and other elements instead.