SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to align text at the top of a cell

    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 911 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/d...htmltable.html

    It tells me everything is fine.

    Any thoughts please

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by certificates View Post
    1) How to move text to the top of a cell; the equivalent of valign-top
    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. #3
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,198
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    vertical-align: top has to be placed on the td itself.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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:
    Code:
    .top-align-all td {vertical-align: top; }  
    <table class="top-align-all">...</table>

    This will top align all cells in a specific row:
    Code:
    .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
    Code:
    .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. #6
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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&#46;</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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •