table cells with vertical alignment : td align « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. td align

table cells with vertical alignment

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   <html>
        <head>
            <title></title>
            <style type='text/css'>
               table {
                   font: 16px sans-serif;
                   border: 1px solid black;
               }
               td {
                   border: 1px solid black;
                   width: 125px;
               }
               td.baseline {
                   vertical-align: baseline;
               }
               td#largefont {
                   font-size: 60px;
                   vertical-align: baseline;
               }
               td#top {
                   vertical-align: top;   
               }
               td#middle {
                   vertical-align: middle;
               }
               td#bottom {
                   vertical-align: bottom;
               }
            </style>
        </head>
        <body>
            <table>
                <tr>
                    <td class='baseline'>
                        The contents of this cell 
                        are aligned to the baseline.
                    </td>
                    <td class='baseline' id='largefont'>
                        L
                    </td>
                    <td id='top'>
                        The contents of this cell 
                        are top aligned.
                    </td>
                    <td id='middle'>
                        The contents of this 
                        cell are middle aligned.
                    </td>
                    <td id='bottom'>
                        The contents of this 
                        cell are bottom aligned.
                    </td>
                </tr>            
            </table>
        </body>
    </html>








Related examples in the same category

1.Table cell background and align, indent
2.Vertically aligned to the top of the cell
3.vertically aligned to the middle of the cell
4.vertically aligned to the bottom of the cell
5.Table cell vertical-align: baseline
6.table cell alignment
7.Table cell with vertical-align: top
8.Table cell with vertical-align: baseline
9.td vertical-align: baseline;
10.td vertical-align: top;
11.td vertical-align: middle;
12.td vertical-align: bottom;