How to Rotate Text in an HTML Table

Written by matthew burley
  • Share
  • Tweet
  • Share
  • Pin
  • Email
How to Rotate Text in an HTML Table
(Comstock/Comstock/Getty Images)

HTML is a language that is used to create and manipulate objects on a web page. When combined with CSS and other web languages, it is possible to create almost any sort of display in a web browser. HTML structure can be established in a variety of ways and one of those ways is with a table. By using a table to set the position of web page elements, it is possible to rotate text within a table cell.

Skill level:


  1. 1

    Open the web page where you would like to display rotated text.

  2. 2

    Create a table with one cell by adding the text "<table><tr><td>xxxxxx</td></tr></table>" somewhere between the "<body></body>" tags. Replace the "xxxxxx" text with the text you want to rotate.

  3. 3

    Add a class and an Internet Explorer filter to your "<td>" element. For example: "<td class="rotation" style="filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);">xxxxxx</td>".

  4. 4

    Create a CSS class between the "<head></head>" tags of your page: "<style type="text/css">.rotation {display: block;-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg); }</style>".

  5. 5

    Save your web page, then open it in a web browser to verify that your text is rotated correctly. If you wish to change the rotation angle, do so by adjusting the "(-90deg)" elements in the CSS class accordingly. You will also need to change the rotation property of your Internet Explorer filter to 0, 1, 2 or 3 to rotate the text 0, 90, 180 or 270 degrees respectively.

Tips and warnings

  • You can also rotate HTML elements that are contained within a "" tag by using this process.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the site, you consent to the use of cookies. For more information, please see our Cookie policy.