topical media & game development

talk show tell print

basic-css-11-Examples-vertical-align-table-cells.htm / htm



  <!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>


(C) Æliens 20/2/2008

You may not copy or print any of this material without explicit permission of the author or the publisher. In case of other copyright issues, contact the author.