Атрибут valign тега <tbody> — вирівняти по висоті

HTML

<p>Вибери потрібне значення для <code>valign</code>:
 <select onchange="ChangeVAlign (this);" >
        <option >baseline</option>
        <option />bottom
        <option selected="selected" />middle
        <option />top
    </select>
  </p>
<hr>
<table width="400" border="1" > 
        <caption>Таблиця товарів</caption> 
            <th>Фрукти</th>
            <th>Овочі</th> 
            <th>Ягоди</th>
        </tr>
<tbody id="tdToChange">
        <tr> 
            <td>Апельсин</td>
            <td>Гарбуз</td>
            <td>Чорниця</td>
        </tr>
</tbody>
    </table>

CSS

table,th,td{
  border: 1px solid grey;
  height:100px;
} 

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

JS

function ChangeVAlign(elem) {
  var tdata = document.getElementById("tdToChange");
  var whichSelected = elem.selectedIndex;
  var vPosition = elem.options[whichSelected].text;
  tdata.vAlign = vPosition;
}
//# sourceURL=pen.js

HTML

<h3>Приклад з використанням атрибуту valign</h3>
<table width="400" border="1" > 
        <caption>Таблиця товарів</caption> 
            <th>Фрукти</th>
            <th>Овочі</th> 
            <th>Ягоди</th>
        </tr>
 <tbody  valign="top">
        <tr> 
            <td>Апельсин</td>
            <td>Гарбуз</td>
            <td>Чорниця</td>
        </tr>

        <tr> 
            <td>Яблуко</td>
            <td>Морква</td>
            <td>Гарбуз</td>
        </tr>
  </tbody>
    </table> 

<h3>Приклад без використання атрибуту valign</h3>
<table width="400" border="1"> 
        <caption>Таблиця товарів</caption> 
            <th>Фрукти</th>
            <th>Овочі</th> 
            <th>Ягоди</th>
        </tr>
 <tbody>
        <tr> 
            <td>Апельсин</td>
            <td>Гарбуз</td>
            <td>Чорниця</td>
        </tr>

        <tr> 
            <td>Яблуко</td>
            <td>Морква</td>
            <td>Гарбуз</td>
        </tr>
  </tbody>
    </table>

CSS

table,th,td{
  border: 1px solid grey;
   height:60px;
} 

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

HTML

<div class="poruch">
  <table>
    <thead>
      <tr><th>Без атрибута</th><th>Опис</th></tr>
    </thead>
    <tbody>
      <tr>
        <td>Тариф</td>
        <td>Довгий текст, який робить рядок високим: саме через нього видно, де стоїть вміст сусідньої комірки. Типово браузер тримає його посередині.</td>
      </tr>
    </tbody>
  </table>

  <table>
    <thead>
      <tr><th><code>valign="top"</code></th><th>Опис</th></tr>
    </thead>
    <tbody valign="top">
      <tr>
        <td>Тариф</td>
        <td>Той самий текст, але група рядків має <code>valign="top"</code> — і коротка комірка притиснулась угору. Те саме дає <code>tbody td { vertical-align: top }</code>.</td>
      </tr>
    </tbody>
  </table>
</div>

CSS

.poruch {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
table {
  border-collapse: collapse;
  flex: 1 1 260px;
}
th,
td {
  border: 1px solid #d0d0d0;
  padding: 6px 10px;
}
th {
  background: #f2f6f8;
}
td:first-child {
  background: #fdf6e3;
  white-space: nowrap;
}