Home / Articles / Programming languages / Markup languages / HTML & CSS / Table alignment in HTML

Table alignment in HTML

Table alignment in HTML
 
Table alignment in HTML
  • Currently 0 out of 5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Rating: 0/5 (0 votes cast)

Thank you for rating!

You have already rated this page, you can only rate it once!

Your rating has been changed, thanks for rating!

Log in or create a user account to rate this page.


To set centered alignment of the web page table or one of its edges use the parameter align of the tag table. The result will not be visible only if the width of the table takes up all the available space, in other words, less than 100%.

Parameter align can have the following values: left, right, center.

  • left - alignment of the table to the left. This option goes by default, so it's usually not used.
  • right - alignment of the table to the right of the web page.
  • center – centered alignment of the table.

Example 1 shows how to set centered alignment of the table.

Example 1. Centered alignment of the table.

<table width="200" bgcolor="#c0c0c0" cellspacing="0" cellpadding="5" border="1" bordercolor="black" align="center">
  <tr>
    <td>
      Contents of the table
    </td>
  </tr> 
</table> 

In fact, parameter align not only sets the alignment, but it makes the text wrap around the table, similar to the tag img. But since table doesn't have the parameter hspace, that would set the margins horizontally, the role must be given to the styles, in particular, the attribute margin. Example 2 shows the alignment of the table to the right and text wrapping.

Example 2. Alignment of the table to the right.

<table width="200" bgcolor="#c0c0c0" cellspacing="0" cellpadding="5" border="1" bordercolor="black" align="right" style="margin: 10px">
  <tr>
    <td>
      Contents of the table
    </td>
  </tr>
</table>
Text wraps around the table...

In this example a table with gray background and right alignment is created. To create margins, distance from the table to the text, use the parameter margin with a value of 10 pixels.

To disable table wrapping when it is aligned to one of the edges, the simplest way is to add after the table the tag br with specified style clear: both. This command disables wrapping to the left and to the right edge (example 3).

Example 3. Disabling table wrapping.

<table width="200" bgcolor="#c0c0c0" align="right">
  <tr>
    <td>
      Contents of the table
    </td>
  </tr>
</table>

<br style="clear: both" />
<p>Text...</p>

Centered alignment of the table is achieved in a similar way, by using the parameter align="center" of the tag table, but in this case there is no wrapping, and the text after the table always begins in a new line.


 

Read also

Text alignment in HTML

Text alignment in HTML

Aligning images in HTML

Aligning images in HTML

Table parameters in HTML

Table parameters in HTML

Creating tables in HTML

Creating tables in HTML

Post comment

basicuse.net
html5_css
106160485398655174790

Quick navigation

General navigation