<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>
Related
The labels of checkboxes are not properly aligned? IMG 1 labels are properly aligned but not for IMG 2.How to align them?
Properly aligned text label of checkbox
misaligned label of checkbox
You can use table
<table>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td class="text">Some Long Texttttttttttt</td>
</tr>
</tbody>
</table>
SNIPPET
.text{
width:100px;
}
<table>
<tbody>
<tr><td><input type="checkbox"></td><td class="text">Some Long Texttttttttttt</td></tr>
</tbody>
</table>
Use the css
display:inline-block
for both checkbox and text,Make sure that you include them with in a common div for those checkbox and text.
I have six tables side by side. Each table contains a top cell with a header and the next cell with varying amount of text. Each table is set to 30% width and has padding of 10px. The tables are enclosed in an overall <div> and each table is set float: left. On a laptop screen these will normally align 3 tables in the top of the screen and then 3 tables underneath.
[1][2][3]
[4][5][6]
However on some browsers or other devices, the text will occupy more space in table 1 making the table longer. This results in table 4 sorting under table 2 rather than under table 1, e.g.
[1][2][3]
[4][5]
[6]
Is there some way whereby I can get them to line up sequentially always taking up the left most space first?
Code example:
table,
td {
border: 1px solid black;
}
table {
float: left;
width: 30%;
margin: 10px;
}
<div>
<table>
<tbody>
<tr>
<td>Title 1</td>
<td>Text text text text text text text text Text text text text text text text text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Title 2</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Title 3</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Title 4</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Title 5</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Title 6</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
</div>
Based on the link you've provided, this is not the place to be using tables, but rather div elements with css markup.
Some will say Flexbox is the way to go, and it may be.
An alternative is to use div elements that are set to display: table-cell, but those have their own issues, and wouldn't be my recommendation for this layout.
The solution I'm offering refactors your code to div elements, with some features that ensure it will always look good at various widths (allowing it to "flex" at responsive sizes).
See the Fiddle Here - stretch the widths, you'll see that the boxes widths are constrained, and they move up and down to adjust.
Here's the markup:
<div class="container">
<div>
<h2>Title</h2>
<img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
<div class="text">
Body text goes here
</div>
</div>
<div>
<h2>Title</h2>
<img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
<div class="text">
Body text goes here
</div>
</div>
<div>
<h2>Title</h2>
<img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
<div class="text">
Body text goes here
</div>
</div>
<div>
<h2>Title</h2>
<img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
<div class="text">
Body text goes here
</div>
</div>
<div>
<h2>Title</h2>
<img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
<div class="text">
Body text goes here
</div>
</div>
<div>
<h2>Title</h2>
<img src="http://weavingtheworld.co.uk/images/slide01_small_brilliant-2.jpg">
<div class="text">
Body text goes here
</div>
</div>
</div>
There's one fundamental weakness to this layout, and that is that the height of each element is not automatic / guaranteed to be the same (you have the same flaw currently in your table layout, FYI). (Flexbox fixes that flaw). To overcome it, you have to do two things:
Be sure your images are all exactly the same proportions (not size, proportion).
Apply a fixed height to the text container.
And here's the commented CSS, with notes about why each (interesting) declaration is used.
.container > div {
/* block properties become available, but only takes the designated width */
display: inline-block;
/* this tells it to include padding & borders when calculating width */
box-sizing: border-box;
width: 30%;
padding: 15px;
/* min / max width ensure it's always within a "reasonable" width window.
This means at responsive it can / will reduce to 2 side-by-side,
and at larger sizes would increase to 3 or 4 side-by-side */
max-width: 250px;
min-width: 200px;
}
.container > div img {
/* ensure the image takes the full width of the space */
width: 100%;
/* this ensures the image is always proportioned properly */
height: auto;
}
.container div.text {
/* this is the weakness of this layout. To get all the boxes to be the same height, you have to set this to a fixed height. */
height: 200px;
}
use inline-block instead of float. I don't recommend changing the tables display property either as it might have unwanted affects of the layout but you could wrap the tables in a div and add the style to them.
table,
td {
border: 1px solid black;
}
table {
width: 100%;
}
div.wrap {
width: 30%;
display: inline-block;
margin: 10px;
}
<div>
<div class="wrap">
<table>
<tbody>
<tr>
<td>Title 1</td>
<td>Text text text text text text text text Text text text text text text text text Text text text text text text text text</td>
</tr>
</tbody>
</table>
</div>
<div class="wrap">
<table>
<tbody>
<tr>
<td>Title 2</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
</div>
<div class="wrap">
<table>
<tbody>
<tr>
<td>Title 3</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
</div>
<div class="wrap">
<table>
<tbody>
<tr>
<td>Title 4</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
</div>
<div class="wrap">
<table>
<tbody>
<tr>
<td>Title 5</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
</div>
<div class="wrap">
<table>
<tbody>
<tr>
<td>Title 6</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
</div>
</div>
What you need is vertical-align: top along with display: inline-block.
Here is a fiddle with an example: https://jsfiddle.net/ocv2y1t7/
PS: Make sure you don't apply any floats to your tables (or set float: none if inherited)
One solution the other answers haven't mentioned is to clear the floats every third table. Since the tables are 1/3 of the window in width, this will create "rows" of three tables each.
table,
td {
border: 1px solid black;
}
table {
float: left;
width: 30%;
margin: 10px;
}
table:nth-child(3n+1) {
clear:left;
}
<div>
<table>
<tbody>
<tr>
<td>Title 1</td>
<td>Text text text text text text text text Text text text text text text text text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Title 2</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Title 3</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Title 4</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Title 5</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
<table>
<tbody>
<tr>
<td>Title 6</td>
<td>Text text text text text text text text</td>
</tr>
</tbody>
</table>
</div>
I have the folowing:
<tr>
<td class="neighbor">
text
</td>
<td id="aim">
text
</td>
<td class="neighbor">
text text
</td>
</tr>
<tr>
<td id="text" colspan="3">
some long text
</td>
</tr>
How do I let the content of #text be centered based on #aim? note that .neighbor tds are not equal spaced.
Simply fill in the blank tags on either side of text instead of using a colspan. This will place the columns beneath each other.
css:
#aim, #text
{
text-align: center;
}
html:
<tr>
<td class="neighbor">
text
</td>
<td id="aim">
text
</td>
<td class="neighbor">
text text
</td>
</tr>
<tr>
<td>
</td>
<td id="text">
some long text
</td>
<td>
</td>
</tr>
If your goal is not to center the text in this way please provide a quick image of how it should look.
I have the following for Google Chrome:
<table>
<tr>
<td width="80px">
Text
<td width="100%">
<form>
<input style="width:100%" type="text"/>
<button>Submit</button>
</form>
</td>
<td width="80px">
Text
</td>
</tr>
</table>
The problem is when you resize the screen to something small, the Submit button wraps around under the textbox. How do I keep the "button" from wrapping (as in the button shows up below the textbox by a few pixels), while keeping the text box as wide as possible?
http://jsfiddle.net/N36a7/
<form>
<table>
<tr>
<td width="80px">Text</td>
<td width="100%">
<input style="width:100%" type="text"/>
</td>
<td>
<button>Submit</button>
</td>
<td width="80px">Text</td>
</tr>
</table>
</form>
Just give the button it's own td.
First, add the following styles to the form to prevent it from wrapping:
form{
white-space: nowrap;
}
Then remove the style width=100% from the input, which causes it to occupy all of the horizontal space within the td.
JS Fiddle: http://jsfiddle.net/B4eWz/
<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>