Атрибут valign тега <th> — вирівнювання в комірці заголовка

Атрибут valign визначає вертикальне вирівнювання вмісту в комірці. За замовчуванням контент осередку розташовується по її вертикалі в центрі.

правити

Загальний опис

правити

+ додати пораду чи нотатку

Синтаксис

<th valign="top|middle|bottom|baseline">

Атрибут valign може отримувати 4 значень:

top

Вирівнювання по верхній межі.

автор: с3с

правити

middle

Вирівнювання по середині.

автор: с3с

правити

bottom

Вирівнювання по нижній межі.

автор: с3с

правити

baseline

Базова лянія є "уявна лінія", на якій більшість літер "сидять". Це значення розташовує текст так, що це схоже із значенням bottom, але для шрифтів різного розміру baseline підходить краще.

автор: с3с

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	3	15	12	≤11

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	2

Приклади

+ запропонувати свій приклад у пісочниці

<p>Приклад з використанням атрибута "valign"</p>
  <table border="1" width="300">
   <tr>
    <th></th>
    <th valign="top" height="100">Місяць</th>
    <th valign="bottom">Прибуток (грн)</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>
<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>

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

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

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

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

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

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


#text{
  color:#ff0000;
  font-size:20px;
}

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