Html - css // Table (<td><tr>)

Question

if I've :
<table>
<td>
<tr>Some text</tr>
</td>
</table>

with in css :
table, td, tr {
width: 100%;
}

tr {
height: 100px;
}

why table and td take 100% of the page and tr not ?

it's like this :
[[[ ] ]]

Answer 1

It should've been:

<table>
<tr><td>Row 1 Col 1</td> <td>Row 1 Col 2</td> </tr>
<tr><td>Row 2 Col 1</td> <td>Row 2 Col 2</td></tr>
</table>

Answer 2

@Ipang, not align horizontally, but vertically

Answer 3

oh ok thanks :¥

Answer 4

You're welcome, glad to help.

Answer 5

And how can I align text in middle of the td ? when I use 'vertical-align: middle;' it does nothing...
https://code.sololearn.com/WepwVm1hLjdO/?ref=app

Answer 6

@Shinbi, add this to CSS for td to center align text.

text-align:center;

(Edit)
@visph suggestion correct, comment on display:block;

sorry, bit sleepy..

Answer 7

thanks ;)

Answer 8

It could be render differently according to browsers rules to correct your code, because you make mistake: <td> (table data == cell) element need to be child of <tr> (table row), and <tr> need to be child of <table> ^^

Answer 9

@Shinbi, oh, sorry, I was half asleep typing :D. Then wrap the text in span like:

<td><span>Text content</span></td>

And add to CSS like:

td span
{
position:relative;
top:45%;
}

And in CSS for the td, remove display:block;
Add vertical-align:middle;

Please be advised that this will center vertically a single line of text, if text content is longer it will expand downwards. Meaning if the text is long you'll need to recalculate the top.

There's also <td valign="middle"></td>, it's a lot easier to use, but I guess it's deprecated by HTML 5.

Good luck mate..

Answer 10

Don't set:
display: block;
... to your <td>
It will broke the table behaviour ^^
And add 'vertical-align:middle;' instead...