Table cell with vertical-align: baseline : td align « Tags « HTML / CSS






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

Table cell with vertical-align: baseline

     

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>Vertical alignment across a table row using vertical-align: baseline</title>
  <style type="text/css" media="all">
    table {
      font: 1em/1.5em Georgia, serif;
      border: 1px solid black;
      margin: 1em 1em 0 1em;
    }
    td {
      width: 10em;
      line-height: 1.5em;
      padding: 0.25em;
      border: 1px dashed black;
    }
    table.type1 td {
      vertical-align: top;
    }
    table.type2 td {
      vertical-align: baseline;
    }
    td.two {
      line-height: 2.5em;
    }
    td.three {
      line-height: 2em;
    }
  </style>
</head>
<body>
  <table class="type1">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </td>
    </tr>
  </table>
  <table class="type2">
    <tr>
      <td>this is a test. </td>
      <td class="two">this is a test. </td>
      <td class="three">this is a test. </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 cells with vertical alignment
9.td vertical-align: baseline;
10.td vertical-align: top;
11.td vertical-align: middle;
12.td vertical-align: bottom;