How to align text at the top of a cell

HTML & CSS
1

On my final table, I have encountered two problems which I cannot seem to solve

Web page: www.c5d.co.uk/kimmeridge1911.php
Css www.c5d.co.uk/census1911.css

  1. How to move text to the top of a cell; the equivalent of valign-top

I have tried vertical-align: top and text -top but it just won’t move.

Second point is that I have a HTML validation error which says that column 22: Table columns in range 9…11 established by element td have no cells beginning in them.

I have checked and this supposed to mean that the table is not of equal numbers, running it through the validator at http://wet-boew.github.io/wet-boew/demos/tableparser/validator-htmltable.html

It tells me everything is fine.

Any thoughts please

2

All the cells in the last table look one line tall to me, so where would you need this? Anyhow, vertical-align: top is the right thing to use.

3

It’s the first two cells

Schedule Number & Address

This is the extract from the HTML

<table class=“table1911”>
<tr class=“ifonly”>
<td rowspan=“4”><p class=“aligntop”>Schedule<br>No.</p></td><!-- Col 1 –>
<td rowspan=“4”><p class=“aligntop”>ADDRESS</p></td>

And this is the CSS

.table1911 .aligntop {vertical-align:top;}
.aligntop {vertical-align:top;}

Removing the <tr class=“ifonly”> has no effect

Antony

4

vertical-align: top has to be placed on the td itself.

5

vertical-align: top has to be placed on the td itself.

Clarification, vertical-align: top; must be in a rule which targets the desired cell ( TD).

for example

This will top align all cells:


.top-align-all td {vertical-align: top; }  
<table class="top-align-all">...</table>

This will top align all cells in a specific row:

.top-aligned-row td {vertical-align: top; }
<table >
<tr class="top-align-all">...</tr>
<tr>...</tr>
<tr class="top-align-all">...</tr>
<tr>...</tr>
<tr>...</tr>
</table>

and this would do it only for specific cells


.top-aling-cell {vertical-align: top; }
<table class="top-align-all">

<tr>
<td>text</td>
<td>text</td>
<td  class="top-align-all" >text</td>
<td>text</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
<td >text</td>
<td>text</td>
<td>text</td>
</tr>

<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td  class="top-align-all" >text</td>
</tr>


</table>

Do note, there used to be a table-cell attribute: valign but that has been deprecated in HTML5
hope that helps

6

Thanks for the expanded explanation.

I have managed to do what I wanted, but I think it was more by good luck than anything.

My table is <table class=“table1911”>

The CSS I used was: .table1911 .aligntop {vertical-align: top; text-align:center; padding-top:30px;}

And I targeted the cell like this <td class=“aligntop” rowspan=“4”>Schedule<br>No.</td>

I guess; it’s what you were trying to tell me ! but it took me an hour to work it out !

Thanks

The CSS .table1911 td {vertical-align: top; text-align:center;} as you say aligns and centres every cell.