Vertically aligning tables in CSS is very simple and a single line of CSS can align your entire table. You can vertically align an entire table or specific table rows and data.
The argument used is “vertical-align” and you can assign many different values to it. I’ve included some of the most common ones and their description below.
baseline: baseline is the default value and aligns the baseline of the element to the baseline of its parent.
sub: Lower the baseline of the box to the proper position for subscripts of the parent’s box.
super: Raise the baseline of the box to the proper position for superscripts of the parent’s box.
top: aligns the element to the top of the tallest element in the line.
text-top: Align the top of the box with the top of the parent’s content area.
text-bottom: Align the bottom of the box with the bottom of the parent’s content area.
middle: aligns the element to the middle of the parent element.
bottom: aligns the element with the lowest element in the line.
length: A specific value (ex: 50px;). Raise (positive value) or lower (negative value) the box by this distance. The value ‘0cm’ means the same as ‘baseline’.
percentage: A specific value (ex: 25%;). Raise (positive value) or lower (negative value) the box by this distance (a percentage of the ‘line-height’ value). The value ‘0%’ means the same as ‘baseline’.
inherit: Takes the same specified value as the property for the element’s parent.
To align an entire table use the following CSS
td { vertical-align: bottom; }
If you only want to align specific elements vertically, assign a class to them and use the following CSS
.class_name { vertical-align: bottom; }
For the official list of values visit the W3 Wiki.