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

HTML

<p>Вибери потрібне значення для <code>valign</code>:
 <select onchange="ChangeVAlign (this);" >
        <option >baseline</option>
        <option />bottom
        <option selected="selected" />middle
        <option />top
    </select>
  </p>
<hr>

<table>
<tr id="tdToChange">
  <th >З використанням атрибуту valign</th>
  </tr> 
  <tr>
</th>
  <th>Без використання атрибуту valign</th>
  </tr> 
</table>

CSS

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

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


#text{
  color:#ff0000;
  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

<p>З використанням атрибуту valign</p>
<table width="300"> 
		<caption>Таблиця товарів</caption> 
  <tr valign="bottom" height="100">
			<th>Фрукти</th>
			<th>Овочі</th> 
			<th>Ягоди</th>
		</tr> 
		<tr valign="top" height="100"> 
			<td>Апельсин</td>
			<td>Гарбуз</td>
			<td>Чорниця</td>
		</tr>
		<tr valign="middle" height="100"> 
			<td>Груша</td>
			<td>Капуста</td>
			<td>Диня</td>
		</tr>
	</table> 
<br>
<p>Без використання атрибуту valign</p>
<table width="300" height="300"> 
		<caption>Таблиця товарів</caption> 
  <tr>
			<th>Фрукти</th>
			<th>Овочі</th> 
			<th>Ягоди</th>
		</tr> 
		<tr> 
			<td>Апельсин</td>
			<td>Гарбуз</td>
			<td>Чорниця</td>
		</tr>
		<tr> 
			<td>Груша</td>
			<td>Капуста</td>
			<td>Диня</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>
    <caption>Висоту рядкам задає перша колонка з довгим текстом</caption>

    <tr valign="top">
        <td class="filler">Довгий текст, який робить рядок високим і дає
            вмісту сусідніх комірок місце для маневру.</td>
        <td>valign="top"</td>
    </tr>

    <tr valign="middle">
        <td class="filler">Довгий текст, який робить рядок високим і дає
            вмісту сусідніх комірок місце для маневру.</td>
        <td>valign="middle" — це ж і типова поведінка комірки</td>
    </tr>

    <tr valign="bottom">
        <td class="filler">Довгий текст, який робить рядок високим і дає
            вмісту сусідніх комірок місце для маневру.</td>
        <td>valign="bottom"</td>
    </tr>

    <tr valign="baseline">
        <td class="filler">Довгий текст, який робить рядок високим і дає
            вмісту сусідніх комірок місце для маневру.</td>
        <td class="big">baseline: перші рядки на одній лінії попри різний кегль</td>
    </tr>

    <tr valign="bottom">
        <td class="filler">Довгий текст, який робить рядок високим і дає
            вмісту сусідніх комірок місце для маневру.</td>
        <td valign="top">рядок каже bottom, комірка каже top — виграє комірка</td>
    </tr>

    <tr>
        <td class="filler">Довгий текст, який робить рядок високим і дає
            вмісту сусідніх комірок місце для маневру.</td>
        <td class="css-bottom">жодного valign — лише vertical-align: bottom
            у стилях</td>
    </tr>
</table>

CSS

table {
    width: 460px;
    border-collapse: collapse;
}

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

td {
    padding: 6px 10px;
    border: 1px solid #b9c6d8;
}

.filler {
    width: 190px;
    color: #5a6472;
    font-size: .9em;
    background: #f6f9ff;
}

.big {
    font-size: 1.5em;
}

.css-bottom {
    vertical-align: bottom;
    color: #1b4f9c;
}