table vertical align example

This tutoral, I will explain how to use table vertical align in a html table. Here I will show you how you can use td vertical align top, td vertical align bottom, td vertical align middle etc.


You can use valign td property to make td vertical align top, bottom, middle etc.

valign=”top”
valign=”middle”
valign=”bottom”
valign=”baseline”

Example td vertical align top:

Below is an example of td vertical align top for a html table.

<table>
            <tr>
                <td valign="top">
                    
                </td>
                
                <td valign="top">
                   
                </td>
            </tr>
        </table>

Similarly, you can use the other properties like valign=”middle”, valign=”bottom”, valign=”baseline” etc.

But sometime you may face below issue, none does not work.

td vertical align not working
vertical align bottom not working
vertical align middle not working
td valign top not working

Solution td vertical align not working:


You can use vertical-align attribute with style property like below which will resolve td vertical align not working issue.

<table>
            <tr>
                <td style="vertical-align: top;">
                    
                </td>
                
                <td style="vertical-align: top;">
                   
                </td>
            </tr>
        </table>

Hope this html tutorial helps how to use table vertical align with an example.

Check out Best Alternative to InfoPath -> Try Now

You May Also like the Following SharePoint Online Tutorials:

About Bijay Kumar

I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site SharePointSky.com

View all posts by Bijay Kumar →