<table style="display:none">
unhidden text
<tr>
<td>
hidden text
</td>
</tr>
</table>
Only the text within the td is hidden, despite display: none being applied to the whole table. Can I get the unhidden text to be hidden also?
<table> nodes are only to contain specific elements, which does not include text nodes.
Likewise the same for <tr> nodes.
The html table specification shows this.
The table style must only work for those tags that are recognizable table tags...
Here are a couple options.. Using a span tag or a div tag which works for all elements inside it.
<table style="display:none">
<span style="display:none">unhidden text</span>
<tr>
<td>
hidden text
</td>
</tr>
</table>
or in my opinion a better solution.
<div style="display:none">
<table>
unhidden text
<tr>
<td>
hidden text
</td>
</tr>
</table>
</div>
Your HTML is invalid. You are not allowed to have text nodes as a direct child of a table element.
Browsers typically correct your HTML, so they interpret it like this:
unhidden text
<table>
<tbody>
<tr>
<td>
hidden text
</td>
</tr>
</tbody>
</table>
As you can see, unhidden text was moved out of the table.
So you should place "unhidden text" outside of the table, and, if you need a styling hook etc., use a div (or a more appropriate element) for it:
<div>unhidden text</div>
<table>
<tr>
<td>
hidden text
</td>
</tr>
</table>
Related
<table>
<colgroup>
<col>
<col style='text-align:right'>
</colgroup>
<tbody>
<tr>
<td>Sample text</td>
<td>This text should be right-aligned</td>
</tr>
<tr>
<td></td>
<td>
<div id='spacer' style='width:100px'>
I'm a spacer
</div>
</td>
</tr>
</tbody>
</table>
Results in text that isn't right aligned. If the same style is applied to the td element it works fine. How do I right-align text in a column without having to apply a style to every td element?
Add the following CSS:
table.tableClass tr td:nth-child(2) {
text-align: right;
}
the number after nth-child( is the column, so for this case it would be 2 because it's the second column. Fiddle: http://jsfiddle.net/p97vdo2p/1/
HTML isn't rendered by column, it's rendered by rows. That's why there <tr></tr> (table rows) exist, but <tc></tc> (table columns) do not. That being said, the easiest way to style a column in HTML, is by applying the same CSS class to every <td></td> in the given column. You can type in the same class to every one manually, or you could write it programmatically, via javascript or a server-side script.
<table>
<tr> <td> Name </td>
<td> <input type="text" name="name"> </td>
</tr>
<tr> <td> Comments </td>
<td> <textarea style="width: 300px; height:300px;" name="comment">Something</textarea></td>
</tr>
Above code will form a simple form in Web page. However the text "comments" doesn't inline in appropriate section of the table. I want this text to be in top of the box however it shows in the middle of the box. Is there any method to make it in the correct place that I want to so that the form looks standard. Is it CSS that I have to use?
Add vertical-align:top style to <td> element, i.e.:
<td style="vertical-align:top"> Comments </td>
JSFiddle demo
See this link for documentation for vertical-algin property, including list of values other than top you could use.
You need to use CSS for this, try following code,
<table>
<tr> <td> Name </td>
<td> <input type="text" name="name"> </td>
</tr>
<tr> <td style = "vertical-align:top;"> Comments </td>
<td> <textarea style="width: 300px; height:300px;" name="comment">Something</textarea></td>
</tr>
Why not apply a class, e.g:
tr td:first-child {
vertical-align:top;
}
Per this example
If you also want to right align your items, see this demo
Just add valign attribute to the td.
<td valign="top"> Comments </td>
See this link for vertical align documentation
In the below code, the table which is supposed to be below the div ends up colliding with it and showing up in the middle of it.
Any help is welcome.
Fiddle here
<div id="header" width="100%">
<center>
blabla
</center>
<table align="left" class="header">
<tbody>
<tr>
<th>Links</th>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
<tr>
<td>blabla</td>
</tr>
</tbody>
</table>
<table align="right" class="header">
<tbody>
<tr>
<th>contacts</th>
</tr>
<tr>
<td>this guy</td>
</tr>
<tr>
<td>that other guy</td>
</tr>
</tbody>
</table>
</div>
<table>
<tbody>
<tr>
<th>the table that shouldn't be here</th>
<th></th>
</tr>
</tbody>
</table>
You just need to "clear: both" when you don't want an element to be affected by other elements' float value (or align in this case).
Here is what is happening, your first table is attached to the left, your second to the right, and the third is trying to fit between the two.
You can tell the third table to find an empty line to start on by using style="clear: both"
Working fiddle here.
notice the:
style = "clear: both"
on the bottom table
A couple of things:
You're using <center>, which is deprecated, according to
W3C:
The element was introduced in HTML 3.2 - Block elements. It
has been deprecated since HTML 4 - 15.1.2 Alignment.
HTML5 classifies it as a non-conforming feature.
In the jsfiddle you linked, the table seems to be below the div, so
I'm not sure what the problem is. Can you clarify?
I have a table element on a page here with the first row configured with a colspan=2 and a div inside the row like this below. For some reason the search element is forcing itself to the top of the page and completely outside of the table. I can't seem to track down why this is occuring instead of displaying within the table like it should.
Sample URL: http://tinyurl.com/9rjd2ta
<table width="100%" border="0">
<tbody>
<tr>
<td colspan="2">
<div>my content</div>
</td>
</tr>
<tr><td>other content
i think your code might be like this
<tr colspan="2">
<td >
<div>my content</div>
</td>
<td>other content</td>
<table>
<tr>
<td>
random text here
<textarea value=""></textarea>
</td>
</tr>
</table>
In the browser the text is at the bottom. How do I make it center or to top? vertical align on TD doesn't seem to work.
Text is rendered along a line. Inline elements (such as the textarea) are also rendered on that line.
The text is at the bottom of the table cell because it sits on the same line that the textarea sits on and that textarea takes up the entire height of the cell.
You want to change the position of the textarea on that line, but you can do so:
textarea {
vertical-align: middle; /* other values are available */
}
gathcea:
You can put your text in a row above:
<table>
<tr>
<td>
<p>random text here</p>
</td>
</tr>
<tr>
<td>
<textarea value=""></textarea>
</td>
</tr>
</table>
Or use a line break to put the text area underneath it:
<table>
<tr>
<td>
<p>random text here</p>
<br />
<textarea value=""></textarea>
</td>
</tr>
</table>