Editing Help:Table (section)

=== Vertical alignment in cells ===
{{See also|Help:Table/Advanced#Horizontal alignment in cells}}
'''''Note:''' The <code>valign=...</code> attribute is [[WP:HTML5|deprecated]] and MediaWiki may stop using it. See: [[Help:HTML in wikitext#Tables]].''<br> 
'''''Note:'''  Use {{t|Vertical align rows}} to align all rows at once.''

By default, text is aligned to the vertical middle of the cell (2nd column in table below). [[CSS]] can be used to vertically align individual cells, or single rows.

<div class="box-aligned">
{| class=wikitable
|+ Demo of vertical alignment of individual cells
|-
|Three<br>lines<br>of{{nbsp}}text
|No alignment
|style=vertical-align:top |Top-aligned
|style="vertical-align:middle |Middle-aligned
|style="vertical-align:bottom |Bottom-aligned
|}
</div>

<div class="box">
'''Relevant wikitext:'''
<syntaxhighlight lang=wikitext highlight=1-3>
|style=vertical-align:top |Top-aligned
|style=vertical-align:middle |Middle-aligned
|style=vertical-align:bottom |Bottom-aligned
</syntaxhighlight></div>

The example below illustrates the need for top alignment of a row. 

{| class=wikitable style=width:400px
|-
! scope=row style=width:10% | Row header
| style=width:70% |A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><span style="color: #13a;">Imagine someone scrolling down the page, seeing the tops of "empty" columns, and wondering why they're empty.</span>
| style=width:20% |Short text
|}

To align the text to the top of each cell in the row, apply the <code>style="vertical-align: top;"</code> CSS to the row.

<div class="box">
'''Wikitext'''
<syntaxhighlight lang=wikitext highlight=2>
{| class=wikitable style=width:400px
|- style=vertical-align:top
! scope=row style=width:10% | Row header
| style=width:70% |A longer piece ...
| style=width:20% |Short text
|}
</syntaxhighlight>
</div>
<div class="box">
'''Produces'''
{| class=wikitable style=width:400px;
|- style=vertical-align:top
! scope=row style=width:10% | Row header
| style=width:70% |A longer piece of text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br><span style="color: #13a;">Imagine someone scrolling down the page, seeing the tops of "empty" columns, and wondering why they're empty.</span>
| style=width:20% |Short text
|}
</div>

Documentation and more options for the CSS <code>vertical-align</code> property is [https://www.w3.org/TR/CSS21/visudet.html#propdef-vertical-align here].