Template talk:Table demo

From Meta, a Wikimedia project coordination wiki

align and valign are deprecated. See: w:Wikipedia:HTML 5#Table attributes for CSS alternatives.

valign="top"[edit]

Align whole table: (has no effect here; contrast with aligning left, right, and center)

{| border=1 valign="top"
|-
| | a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

Align contents in all cells: (works in HTML, but not allowed in wikitext; see HTML#Permitted HTML)

{| border=1 <tbody> valign="top"
|-
| | a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

Align contents in all cells of a row:

{| border=1
|- valign="top"
| | a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

Align contents in a cell:

{| border=1
|-
| valign="top"| a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb


valign="bottom"[edit]

Align whole table: (no effect here)

{| border=1 valign="bottom"
|-
| | a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

Align contents in all cells of a row:

{| border=1
|- valign="bottom"
| | a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

Align contents in a cell:

{| border=1
|-
| valign="bottom"| a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb


valign="center"[edit]

Align whole table: (no effect here)

{| border=1 valign="center"
|-
| | a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

Align contents in a cell:

(Default alignment, but useful to override 'outer' alignments, such as a top-aligned row.)

{| border=1
|- valign="top"
| valign="center"| a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

align="left"[edit]

Align whole table:

(Requires special attention to the vertical spacing and text flow of surrounding lines. Here, enclosed in (( )) to illustrate its effect, the {{-}} template prevents flow.)

{| border=1 align="left"
|-
| | a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

((

))


Align contents in a cell:

(Default alignment, but useful to override 'outer' alignments, such as a right-aligned row.)

{| border=1
|- align="right"
| align="left"| a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb


align="right"[edit]

Align whole table:

(Requires special attention to the vertical spacing and text flow of surrounding lines. Here, enclosed in (( )) to illustrate its effect, the {{-}} template prevents flow.)

{| border=1 align="right"
|-
| | a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

((

))


Align contents in all cells of a row:

{| border=1
|- align="right"
| | a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

Align contents in a cell:

{| border=1
|-
| align="right"| a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb


align="center"[edit]

Align whole table: (no special attention required; contrast with aligning left and right)

{| border=1 align="center"
|-
| | a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

Align contents in all cells of a row:

{| border=1
|- align="center"
| | a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb

Align contents in a cell:

{| border=1
|-
| align="center"| a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb


Combining aligns[edit]

valign and align can both be applied to the same row or cell, such as one bottom-left cell in a top-right aligned row:

{| border=1
|- valign="top" align="right"
| valign="bottom" align="left"| a || lots and<br>lots and<br>lots and<br>lots of text || aa
|-
| bbbbbbbb || bb || bbb
|}

gives:

a lots and
lots and
lots and
lots of text
aa
bbbbbbbb bb bbb


See also[edit]