HTML/CSS/Table Style/table cell

Материал из Web эксперт
Перейти к: навигация, поиск

Boxed Table and Cells

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
table {
  border-collapse: separate;
}
* .boxed-table {
  border: 1px solid black;
}
* .boxed-cells td {
  border: 1px solid black;
}

* .boxed-cells td.x {
  border: none;
}
</style>
</head>
<body>

<h2></h2> 
<table class="boxed-table boxed-cells" cellspacing="5"> 
    <tr><td rowspan="2">1</td><td colspan="2">2-3</td></tr> 
    <tr><td>7</td><td>8</td><td> </td><td>&nbsp;</td><td class="x">11</td></tr>
</table> 

</body>
</html>



Cell padding

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> My favorite records  </title>
        <style rel="stylesheet" type="text/css">
table {
    width: 100%;
    border: thin solid black;
    border-collapse: collapse;
}
td {
    border: thin solid black;
}
th, tfoot td {
    border: thin solid black;
    text-align: center;
    font-weight: bold;
}
tbody td {
    font-size: 120%;
}
caption {
    font-size: 90%;
    text-align: right;
}
td, th, caption {
    padding: 5px;
}        
        </style>
    </head>
    <body>
        <table>
            <caption>
                My favorite records.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> a</th>
                    <th> a</th>
                    <th> r</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td> R</td>
                    <td> T</td>
                    <td> 1</td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td> a</td>
                    <td> a</td>
                    <td> r</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>



Cell with no Border

 
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Table Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
  font-family: arial, verdana, sans-serif;
}
td {
  border: solid 1px black;
  width: 100px;
  empty-cells: hide;
}
</style>
</head>
<body>
<table>
  <tr>
    <td></td>
    <th>Race 1</th>
    <th>Race 2</th>
    <th>Race 3</th>
  </tr>
  <tr>
    <th>Driver A</th>
    <td>33s</td>
    <td>50s</td>
    <td>45s</td>
  </tr>
  <tr>
    <th>Driver B</th>
    <td>56s</td>
    <td>23s</td>
    <td>11s</td>
  </tr>
</table>
</body>
</html>



Empty table header cell

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Scope 1</title>
</head>
<body>
<table border="1">
  <tr>
    <td rowspan="2"></td>
    <th colspan="2">Staff</th>
    <th rowspan="2">Managers</th>
  </tr>
  <tr>
    <th>Short</th>
    <th>Tall</th>
  </tr>
  <tr>
    <th>Bitbyte</th>
    <td>11</td>
    <td>9</td>
    <td>1</td>
  </tr>
  <tr>
    <th>UltraHyperMegaCorp</th>
    <td>2100</td>
    <td>900</td>
    <td>1000</td>
  </tr>
</table>
</body>
</html>



Hidden, Removed Cells and Collapsed Borders

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
table,td,th {
  border: 1px solid black;
}
* .collapsed {
  border-collapse: collapse;
}
* .x {
  display: none;
}
* .h {
  visibility: hidden;
}
</style>
</head>
<body>

<table class="collapsed" cellspacing="0"> 
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> 
    <tr><td class="h">1</td><td>2</td><td class="x">3</td><td>4</td></tr>
</table> 

</body>
</html>



Hidden, Removed Cells and Separated Borders

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
table,td,th {
  border: 1px solid black;
}
* .separated {
  border-collapse: separate;
}
* .x {
  display: none;
}
* .h {
  visibility: hidden;
}
</style>
</head>
<body>

<table class="separated" cellspacing="5"> 
    
    <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> 
    <tr><td class="h">1</td><td>2</td><td class="x">3</td><td>4</td></tr>
</table> 

</body>
</html>



Hide empty cell

 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Empty cells 1</title>
<style>
table {
  empty-cells: hide;
}
td, th {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <tr>
    <td rowspan="2"></td>
    <th colspan="2" id="">S</th>
    <th rowspan="2" id="">M</th>
  </tr>
  <tr>
    <th id="">S</th>
    <th id="">T</th>
  </tr>
  <tr>
    <th id="">B</th>
    <td headers="">11</td>
    <td headers="">9</td>
    <td headers="">1</td>
  </tr>
  <tr>
    <th id="">U</th>
    <td headers="">2100</td>
    <td headers="">900</td>
    <td headers="">1000</td>
  </tr>
</table>
</body>
</html>



Line break in a table cell

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <HTML>
        <HEAD>
            <TITLE></TITLE>
        </HEAD>
        <BODY>
      <TABLE BORDER=1 WIDTH=500>
                <TR>
                    <TD>
                        this is a test. <BR>
                        this is a test. <BR>
                        this is a test. <BR>
                        this is a test. <BR>
                    </TD>
                </TR>
            </TABLE>
      </BODY>
   </HTML>



Right-offset Shrinkwrapped Table

 
<!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">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" title="text/css">
.parent {
  width: 600px;
  height: 600px;
  background: black;
}
* .r-wrap {
  width: auto;
  margin-left: auto;
  margin-right: 20px;
  background: pink;
}
</style>
</head>
<body>
<div class="parent"> 
  <table class="r-wrap"><tr><td>Right-offset Shrinkwrapped Table</td></tr></table> 
</div> 

</body>
</html>



Selecting cells in body

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
#t1 tbody td {
  font-variant: small-caps;
}
</style>
</head>
<body>
<table id="t1"> 
    <thead> 
        <tr class="r1"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </thead> 
    <tfoot> 
        <tr class="r3"> 
            <td class="c1">c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tfoot> 
    <tbody class="b1"> 
        <tr class="r2"> 
            <td class="c1">r2 c1</td> 
            <td class="c2">c2</td> 
            <td class="c3">c3</td> 
            <td class="c4">c4</td> 
            <td class="c5">c5</td> 
            <td class="c6">c6</td> 
        </tr>
    </tbody> 
</table> 
</body>
</html>



Shading border for table cell

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
div {
  padding: 10px;
  margin-bottom: 15px;
  border: 2px solid black;
}
td {
  margin-top: 0px;
  margin-bottom: 10px;
  padding-right: 5px;
  background-color: gold;
  padding-top: 5px;
  padding-bottom: 5px;
  border-left: 1px solid gray;
  border-right: 2px solid black;
  border-top: 1px solid gray;
  border-bottom: 2px solid black;
}
</style>
</head>
<body>
<div> 
    <table>
    <tr><td>Normal Table</td><td>r1c2</td><td>r1c3</td></tr> 
    <tr><td>row2</td><td>r2c2</td><td>r2c3</td></tr>
</table> 
</body>
</html>



Table cell background and align, indent

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
table {
  width: auto;
  height: 1px;
  table-layout: auto;
  border-collapse: collapse;
  margin-left: 20px;
  border: 1px solid black;
}
td,th {
  width: 50px;
  height: 1px;
  overflow: hidden;
  visibility: visible;
  border: 1px solid black;
  padding: 5px;
  background: pink;
  text-align: center;
  vertical-align: middle;
  text-indent: 5px;
}
</style>
</head>
<body>
<h2>Simple Table</h2> 
<table> 
    <tr> <th>1</th> <th>2</th> <th>3</th> <th>4 </th> <th>5 </th> <th>6 </th> </tr> 
    <tr> <th>7</th> <td>8</td> <td>9</td> <td>10</td> <td>11</td> <td>12</td> </tr> 
</table> 

</body>
</html>



Table cell border

 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title></title>
  <style type="text/css">
table {
  border-collapse: collapse;
  border: 5px solid #444;
}
td {
  padding: 4px;
}
th {
  color: white;
  background-color: black;
}
td, th+th {
  border: 5px solid #666;
}

td+td {
  border: 5px solid #ccc;
  text-align: center;
}
td#winner {
  border: 7px dotted #999;
}
  </style>
</head>
<body>

 <table cellspacing="0">
    <tbody>
     <tr>
      <th colspan="4">
          General
      </th>
     </tr>
     <tr>
      <th>&nbsp;</th>
      <th>E</th>
      <th>L</th>
      <th>U</th>
     </tr>
     <tr>
      <td>
          Total 
      </td>
      <td>
          272,091
      </td>
      <td>
          *****
      </td>
      <td>
          *****
      </td>
     </tr>
     <tr>
      <td colspan="4">
          Sex
      </td>
     </tr>
     <tr>
      <td width="329">Male</td>
      <td>2</td>
      <td>3</td>
      <td>6</td>
     </tr>
     <tr>
      <td width="329">Female</td>
      <td id="winner">6</td>
      <td>4</td>
      <td>1</td>
     </tr>
</table>
</body>
</html>



Table cell hover

 


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>tr 2</title>
<style>
tr { background: white; } 
tr.alt { background: yellow; }
tr:hover {background: pink;}
td:hover {background:red;}
</style>
</head>
<body>
<table border="1">
  <tr>
    <th>Name</th>
    <th>Place of residence</th>
  </tr>
  <tr>
    <td>P</td>
    <td>P</td>
  </tr>
  <tr class="alt">
    <td>B</td>
    <td>B</td>
  </tr>
  <tr>
    <td>L</td>
    <td>L</td>
  </tr>
  <tr class="alt">
    <td>P</td>
    <td>P</td>
  </tr>
</table>
</body>
</html>



table cell hover with class

 
<!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 rel="stylesheet" type="text/css">
body {
    padding: 10px;
    margin: 10px auto;
    min-width: 500px;
    max-width: 900px;
}
table.myStyle {
    width: 100%;
    margin-bottom: 5px;
}
caption {
    text-align: left;
    margin-bottom: 5px;
    text-transform: lowercase;
    font-size: 160%;
    padding: 5px;
    letter-spacing: 10px;
    font-weight: bold;
}
table.myStyle thead th {
    font-weight: bold;
    font-size: 150%;
    color: black;
}
table.myStyle thead th, table.myStyle tbody td {
    padding: 5px;
    text-transform: lowercase;
}
table.myStyle tbody td, table.myStyle tfoot td {
    font-size: 130%;
}
table.myStyle tfoot td {
    padding: 5px;
}
table.myStyle tbody td:hover,
table.myStyle thead th:hover,
table.myStyle tfoot td ul:hover,
table.myStyle caption:hover,
table.myStyle tfoot td p:hover {
    background: black;
    color: white;
    font-weight: bold;
}
table.myStyle tfoot td p {
    padding: 5px;   
}
li {
    margin-left: 30px;
    padding-left: 30px;
}        
        </style>
    </head>
    <body>
        <table class="myStyle">
            <caption>
                S
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> quantity     </th>
                    <th> measurement  </th>
                    <th> product      </th>
                    <th> instructions </th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>  .5              </td>
                    <td>  C</td>
                    <td>  B</td>
                    <td>  </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4">
                        <ul>
                            <li>
                                P
                            </li>
                        </ul>
                        <p>
                            S 
                        </p>
                    </td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>



table cell overflow hidden

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title> My favorite records  </title>
        <style rel="stylesheet" type="text/css">
table {
    width: 200px;
    border: thin solid black;
    table-layout: fixed;
}
th, td {
    overflow: hidden;
}
th, tfoot td {
    border: thin solid black;
    text-align: center;
    font-weight: bold;
}
tbody td {
    font-size: 120%;
}
caption {
    font-size: 90%;
    text-align: right;
}
td, th, caption {
    padding: 5px;
}        
        </style>
    </head>
    <body>
        <div style="width: 200px;
                     height: 30px;
                     background: gray;
                     color: white;
                     text-align: center;">
        &lt; -- 200 pixels -- &gt;
      </div>
        <table>
            <caption>
                My favorite records.
            </caption>
            <colgroup>
                <col/>
                <col/>
                <col/>
            </colgroup>
            <thead>
                <tr>
                    <th> a</th>
                    <th> a</th>
                    <th> r</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td> a</td>
                    <td> a</td>
                    <td> r</td>
                </tr>
            </tfoot>
        </table>
    </body>
</html>



Table cell vertical-align: baseline

 
<!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#largefont {
                   font-size: 60px;
                   vertical-align: baseline;
               }
               td.baseline {
                   vertical-align: baseline;
               }               
            </style>
        </head>
        <body>
            <table>
                <tr>
                    <td class="baseline" id="largefont">
                        L
                    </td>
                    <td class="baseline">
                        The contents of this cell 
                        are aligned to the baseline.
                    </td>
                </tr>            
            </table>
        </body>
    </html>



Table with Spanned Rows and Cells

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
table {
  width: auto;
  height: 1px;
  table-layout: auto;
  border-collapse: collapse;
  margin-left: 20px;
  border: 1px solid black;
}
td,th {
  width: 50px;
  height: 1px;
  overflow: hidden;
  visibility: visible;
  border: 1px solid black;
  padding: 5px;
  background: pink;
  text-align: center;
  vertical-align: middle;
  text-indent: 5px;
}
</style>
</head>
<body>
<h2>Table with Spanned Rows and Cells</h2> 
<table> 
    <tr> <td rowspan="2">1</td> <td colspan="2">2-3</td> </tr> 
    <tr> <td>8</td> <td>9</td> <td> </td> <td>&nbsp;</td> <td>12</td> </tr> 
</table> 

</body>
</html>



td background-color: gold;

 
<html>
<head><title>Tables</title>
<style type="text/css">
table {
    border-width: medium;
    border-color: navy;
    border-style: groove;
}
td {
    text-align: center;
    background-color: gold;
}
</style>
</head>
<body>
<center>
<table>
    <tr>
        <td>CSS</td><td>IS</td>
    </tr>
    <tr>
        <td>VERY</td><td>COOL!</td>
    </tr>
</table>
</center>
</body>
</html>



td font-weight: bold;

 


<html>
<head><title>Tables</title>
<style type="text/css">
td {
  text-align: center;
  font-weight: bold;
}
table {
  background-color: blue;
  color: white;
}
caption {
  background-color: red;
  color: yellow;
  font-weight: bold;
}
th {
  background-color: gold;
  color: navy
}
td.center {
  background-color: white;
  color: black;
}
</style></head>
<body>
<table>
    <caption>How to Use Tables</caption>
  <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
  </tr>
  <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
  </tr>
  <tr>
      <td>X</td>
      <td class="center">X</td>
      <td>X</td>
  </tr>
  <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
  </tr>
</table>
</body>
</html>



td text-align: center;

 


<html>
<head><title>Tables</title>
<style type="text/css">
td {
  text-align: center;
  font-weight: bold;
}
table {
  background-color: blue;
  color: white;
}
caption {
  background-color: red;
  color: yellow;
  font-weight: bold;
}
th {
  background-color: gold;
  color: navy
}
td.center {
  background-color: white;
  color: black;
}
</style></head>
<body>
<table>
    <caption>How to Use Tables</caption>
  <tr>
      <th>Col 1</th>
      <th>Col 2</th>
      <th>Col 3</th>
  </tr>
  <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
  </tr>
  <tr>
      <td>X</td>
      <td class="center">X</td>
      <td>X</td>
  </tr>
  <tr>
      <td>X</td>
      <td>X</td>
      <td>X</td>
  </tr>
</table>
</body>
</html>



td text-align: center; and border

 
<html>
<head><title>Tables</title>
<style type="text/css">
table {
    border-width: medium;
    border-color: navy;
    border-style: groove;
}
td {
    text-align: center;
    background-color: gold;
}
</style>
</head>
<body>
<center>
<table>
    <tr>
        <td>CSS</td><td>IS</td>
    </tr>
    <tr>
        <td>VERY</td><td>COOL!</td>
    </tr>
</table>
</center>
</body>
</html>



Text Indent

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .myStyle {
  text-indent: 60px;
}
</style>
</head>
<body>
<table>
   <tr>
      <td class="myStyle"><code>text-indent</code> 
        indents the first line of a terminal block element
      </td>
   </tr>
</table> 

</body>
</html>



tr and td

 
<html>
<head><title>Tables</title></head>
<body>
<table>
   <tr> <td>X</td> <td>X</td> <td>X</td> </tr>
   <tr> <td>X</td> <td>X</td> <td>X</td> </tr>
   <tr> <td>X</td> <td>X</td> <td>X</td> </tr>
</table>
</body>
</html>



use table cell as block

 
<html>
    <head>
         <style type="text/css" media="all">
            table {
                margin: auto;
            }
            td {
                background: #ccc;
                margin: 10%;
                border: 5px solid black;
                padding: 10%;
                width: 100%;
                color: black;
                font-size: 200%;
                text-align: center;
            }

        </style>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    Some content.
                </td>
            </tr>
        </table>
    </body>
</html>



vertically aligned to the bottom of the cell

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .align-bottom {
  height: 200px;
  vertical-align: bottom;
}
</style>
</head>
<body>
<table> 
    <tr> 
        <td class="align-bottom">vertically aligned to the bottom of the cell.</td>
    </tr>
</table> 
</body>
</html>



vertically aligned to the middle of the cell

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .align-middle {
  height: 200px;
  vertical-align: middle;
}
</style>
</head>
<body>
<table> 
    <tr> 
        <td class="align-middle">vertically aligned to the middle of the cell.</td> 
    </tr>
</table> 
</body>
</html>



Vertically aligned to the top of the cell

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title></title>
<style type="text/css" media="Screen">
* .align-top {
  height: 200px;
  vertical-align: top;
}

</style>
</head>
<body>
<table> 
    <tr> 
        <td class="align-top" >vertically aligned to the top of the cell.</td> 
    </tr>
</table> 
</body>
</html>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Table_Style/table_cell&oldid=5101»