Атрибут valign тега <td> — вирівнювання по вертикалі

HTML

<p>Приклад з використанням атрибута "valign"</p>
  <table border="1" width="300">
   <tr>
    <th></th>
    <th >Місяць</th>
    <th >Прибуток (грн)</th>
   </tr>
   <tr>
    <td >1</td>
    <td valign="top" height="100">Вересень</td>
    <td valign="bottom">270</td>
   </tr>
   <tr>
    <td >2</td>
    <td>Жовтень</td>
    <td>420</td>
   </tr>
   <tr>
    <td>3</td>
    <td>Листопад</td>
    <td>1200</td>
   </tr>
  </table>
<br>
<p>Приклад без використання атрибута "valign"</p>
  <table border="1" width="300">
   <tr>
    <th></th>
    <th >Місяць</th>
    <th >Прибуток (грн)</th>
   </tr>
   <tr>
    <td >1</td>
    <td >Вересень</td>
    <td >270</td>
   </tr>
   <tr>
    <td >2</td>
    <td>Жовтень</td>
    <td>420</td>
   </tr>
   <tr>
    <td>3</td>
    <td>Листопад</td>
    <td>1200</td>
   </tr>
  </table>

CSS

table,th,td{
  border: 1px solid grey;
  text-align:center;
} 

td{
   padding:10px;
 
}
th,td{
   padding:10px;
}
caption{
  font-size:20px;
}

HTML

<table class="attr">
    <caption>Атрибут valign — значення char браузери не реалізували, комірка лишається посередині</caption>
    <tr>
        <td valign="top">top</td>
        <td valign="middle">middle</td>
        <td valign="bottom">bottom</td>
        <td valign="baseline">baseline</td>
        <td valign="char">char</td>
        <td class="tall">Ця комірка задає висоту рядка,<br>тому вирівнювання й видно.</td>
    </tr>
</table>

<table class="css">
    <caption>Те саме через vertical-align — остання комірка без правила лишається посередині</caption>
    <tr>
        <td class="t">top</td>
        <td class="m">middle</td>
        <td class="b">bottom</td>
        <td class="bl">baseline</td>
        <td>без правила</td>
        <td class="tall">Ця комірка задає висоту рядка,<br>тому вирівнювання й видно.</td>
    </tr>
</table>

<div class="box">
    <div class="inner">vertical-align: top на звичайному блоці не робить нічого —
        це властивість для комірок таблиці й рядкових елементів.</div>
</div>

CSS

table {
    width: 100%;
    max-width: 640px;
    margin-bottom: 22px;
    border-collapse: collapse;
}

caption {
    margin-bottom: 6px;
    font-weight: 600;
    text-align: left;
}

td {
    padding: 6px 8px;
    border: 1px solid #b9c6d8;
    font-size: .95em;
}

.tall {
    width: 40%;
    background: #f6f9ff;
    line-height: 2.6;
}

.css .t {
    vertical-align: top;
}

.css .m {
    vertical-align: middle;
}

.css .b {
    vertical-align: bottom;
}

.css .bl {
    vertical-align: baseline;
}

.box {
    max-width: 640px;
    height: 120px;
    padding: 8px;
    border: 2px dashed #b9c6d8;
    background: #f4f5f7;
}

.inner {
    vertical-align: top;
    max-width: 420px;
    color: #5a6472;
}