How to set position inside a table? I have table inside which I have span and certain links. I made <td> as center alignment and span texts starting from center, but when I do the same for all links <td> everything is displayed in center if it own. But I need to start all text at the same position. How to do this?
What i understand is that you want to align the text.
Try this way, also try to be more exact and send us a copy of your code.
But from what i understood try out this.
div style="text-align: center;">
<table style="margin: 0px auto;" border="0">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
Related
.one {
background-color:green;
}
<tr>
<div class="one">
<td>td 1</td>
<td>td 2</td>
</div>
<td>td 3</td>
</tr>
this css command is not working, i want to turn two of the "td" cells into green but it is not happening tell me where i am going wrong. when I write "td" or "tr" instead of one(class name) then it is working properly but not with this class.
You should add class "one" to td directly, for your question div is not necessary element.
<tr>
<td class="one">td 1</td>
<td class="one">td 2</td>
<td>td 3</td>
</tr>
I am trying my hand at making a website for my small start up. Now the thing is that I want to make a central area where the background color is white and one where the background color is light grey. I made a table with the background color white and aligned it in the center, but it just appears at the bottom of the page. What is happening?
<html>
<head>
<title>Memocups</title>
</head>
<body bgcolor="#d9d9d9">
<table align="center" width="50%" bgcolor="#ffffff">
<tr>
<p><h1>Memocups</h1><p>
<p><h3>What is a memocup?<h3><p>
<img src="images/img_1_cuponstump.jpg" width="540px" height="360px">
<p>
A memocups is a coffe mug wich has a customizable picture!<br> What makes memocups unique from all other mugs with pictures is <br>that you upload the picture you want to our website and we<br> will put it on the mug! So what are you waiting for the<br>perfect gift is only a few clicks away!</p>
</tr>
</table>
</body>
</html>
Simple table with three columns and two rows.
<table border=1>
<tr>
<td>cell 1<td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 4<td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</table>
Here is how the table should be formatted:
<table width="50%" style="background-color:#fff;margin:0 auto;">
<tr>
<td>
<h1>Memocups</h1>
<h3>What is a memocup?</h3>
<img src="images/img_1_cuponstump.jpg" width="540px" height="360px">
<p>A memocups is a coffe mug wich has a customizable picture!<br> What makes memocups unique from all other mugs with pictures is <br>that you upload the picture you want to our website and we<br> will put it on the mug! So what are you waiting for the<br>perfect gift is only a few clicks away!</p>
</td>
</tr>
</table>
I removed the p tags that you had around your headings as they are not necessary. Also note that bgcolor and align are deprecated and you should be using background-color and margin/float CSS instead. Also corrected an unclosed h3 tag and added the td(table cell).
That said, a table is not the correct element to use for this data. You should be using divs.
In html I'm using a to display a numbers of rows, then between each row is another row containing a single , that in turn contains a with style:none. This row contains additional information for the row above and in the ful code and can be toggled to display or not by clicking on a button on the album row.
The trouble is that even when the div is hidden the row takes up vertical height, I assume this is the height of the , but how can I fix this. Or another thought can I make the hidden or can I only do that for divs.
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td colspan="2">
<div id="1" style="display:none">
</div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
Ive done a:
http://jsfiddle.net/ijabz/zz5zo2jh/
if you remove the hidden rows there is less of a vertical gap between the other rows
apply the style to your table row, not your div:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr style="display:none">
<td colspan="2">
<div id="1">
</div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
You had to apply style to the tr. Modified your code as follows, now if display is block there is gap and when it is none, no gap:
<table>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr style="display:block;">
<td>
</td>
<td></td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
I'm not sure if i understood you question correctly, so please let me know if not.
If you use Jquery then this would add the display=none to the row with an
$(document).ready(function () {
$('table tr').each(function (i, row) {
console.log(i)//$(row).append("test");
Row = $(row);
if (Row.find("div:hidden").length == 1) {
$(Row).attr("display","none");
}
});
});
Updated your jsfiddle: http://jsfiddle.net/zz5zo2jh/25/
I hope it helps
See this JSFiddle.
Use border-collapse: collapse; on the <table> and padding: 0; on the <tr>.
<tr> elements normally have display: table-row; as default so I wouldn’t change that, because it might lead to some other rendering issues.
<table style="border-collapse:collapse;">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td style="padding:0;" colspan="2">
<div id="d1" style="display:none;margin:1px;"></div>
</td>
</tr>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
the margin on the <div> is optional and is only there because the padding has been removed. This way it will look the same if the div is set to display: block;.
I have a table which has spanned rows. When I create an h ref the link is only clickable on the one line I would like to have the link clickable anywhere on that cell.
I've tried the following:
<table>
<tr><td rowspan=2><a style='display:block; width:100%; height:100%;' href='#'</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td></tr>
</table>
<table>
<tr><td rowspan=2><a style='display:inline-block; width:100%; height:100%;' href='#'</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td></tr>
</table>
Is there a way of getting the link to span both rows?
your html syntax seems incorrect as your tag isn't properly ended. You could try this:
<table>
<tr>
<td rowspan="2">
<a style="display:block; width:100%; height:100%;" href="#">Text in your big cell 1</a>
</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
</tr>
</table>
As you can see, you will better see such problems with nicer indentation ;-)
In the following code I need to match the width when shrinking the window :
<div style="background-color:blue;">The title</div>
<table>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>
This is just a little example of the page, it would involve more divs and tables.
When I shrink the window the table and the div shrink as need it so the div will shrink more than the table, and that make the page look ugly.
Is there any way to stop the div shrinking when table can't shrink any more?
I tried min-with and it does not work, and I asked already for anything similar but apparently there isn't anything apart of JavaScript.
Could any of you give me a solution other than JavaScript?
Thanks in advance.
Cesar.
I do not have IE7+ to test this, but in Opera it works when you put all the HTML in an outer div block. Than the outer div block is the same with as the table. So at a certain point it does not fit the browser window any more, but now the outer block has its width and in title div keeps the same width as the outer block.
<div style="background-color:red;">
<div style="background-color:blue;">The title</div>
<table>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>
</div>
You can use thead and colspan to display the title inside the table:
<table>
<thead><tr style="background-color:blue;"><th colspan="4">The title</th></tr></thead>
<tbody>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</tbody>
</table>
Bonus point : your table structure now makes more sense from an accessibility point of view.
You can also use the caption element, but its formatting may be inadequate :
<table>
<caption style="background-color:blue;">The title</caption>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>