How do I align a table to the right or left?

Discussion in 'Web Design' started by Jessus, Jun 7, 2017.

  1. Jessus

    Jessus New Member

    Joined:
    Jun 3, 2017
    Messages:
    4
    Likes Received:
    0
    How do I align a table to the right or left?
     
  2. Carlos E.

    Carlos E. Moderator
    Staff Member

    Joined:
    Jan 28, 2015
    Messages:
    22
    Likes Received:
    3
    Hello Jessus,

    You can align it to the right by adding this class to your CSS file and assign it to the table:

    Code:
    table.aliright {
       width: 200px; 
       margin-right: 0px;
       margin-left: auto;
    }
    If you want to align that table to the left, add this class instead:

    Code:
    table.alileft {
       width: 200px;
       margin-right: auto;
       margin-left: 0;
    }
    Replace 200px with the real width of your table.
    Then, you'll need to assign the class to that table into the HTML code:

    <TABLE class="alileft"> or <TABLE class="aliright">

    Regards,
     
  3. David_82

    David_82 New Member

    Joined:
    Jun 3, 2017
    Messages:
    3
    Likes Received:
    0
    You can use <TABLE ALIGN="right"> to float a table to the right. (Use ALIGN="left" to float it to the left.) Any content that follows the closing </TABLE> tag will flow around the table. Use <BR CLEAR="right"> or <BR CLEAR="all"> to mark the end of the text that is to flow around the table, as shown in this example:

    The table in this example will float to the right.

    <table align="right">...</table>
    This text will wrap to fill the available space to the left of (and if the text is long enough, below) the table.

    <br clear="right">
    This text will appear below the table, even if there is additional room to its left.
     
  4. Carlos E.

    Carlos E. Moderator
    Staff Member

    Joined:
    Jan 28, 2015
    Messages:
    22
    Likes Received:
    3
    We just need to take into account that the align attribute for <TABLE> is not available on HTML5. You'll need to use CSS instead.
     

Share This Page