How to set HTML Table Align Attribute

The HTML table align attribute is used to control the horizontal alignment of a table on a web page. It specifies where the table should be positioned relative to the surrounding text or other content on the page.

The align attribute can be set to one of three values: left, center, or right. When set to left or right, the table will be aligned to the respective edge of the page, with any remaining space on the opposite side. When set to center, the table will be horizontally centered on the page.

The purpose of using the HTML table align attribute is to improve the visual appearance of a web page by aligning the table with the surrounding content in a way that is aesthetically pleasing and easy to read. This is especially important for pages that contain a lot of text and data, as it can be difficult for readers to navigate the content without clear visual cues.

For example, a table that is aligned to the left of a web page may be more visually appealing and easier to read when surrounded by text that is also aligned to the left. Conversely, a table that is centered on a page may be more effective in drawing attention to its content and separating it from surrounding text.

Let's take a look at some examples:

Center align a table

<table align="center" border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>
run this source code Browser View
Header 1 Header 2
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

In the above example, set the align attribute of the table element to "center". This will center the entire table horizontally on the page.

Left align a table

<table align="left" border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>
run this source code Browser View
Header 1 Header 2
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

In the above example, set the align attribute of the table element to "left". This will align the entire table to the left edge of the page.

Right align a table

<table align="right" border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>
run this source code Browser View
Header 1 Header 2
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

In the above example, set the align attribute of the table element to "right". This will align the entire table to the right edge of the page.

Different ways to align the content of an HTML table

There are several ways to align the content of an HTML table. The most common ways are:

Using the align attribute

The align attribute can be used to align the entire table either to the left, center or right of the web page.

<table align="center" border="1"> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table>
run this source code Browser View
Header 1 Header 2
Row 1, Column 1 Row 1, Column 2
Row 2, Column 1 Row 2, Column 2

This will center the table horizontally on the web page.

Using the style attribute

The style attribute can be used to apply CSS styles to the table and its contents. For example, to align the text within a table cell to the center, you can use the following CSS style:

<table border="1"> <tr> <td style="text-align:center;">Cell content</td> </tr> </table>
run this source code Browser View
Cell content

This will center the text within the cell.

Using the class attribute

The class attribute can be used to apply a CSS class to the table and its contents. For example, to align the table to the left and the text within the cell to the center, you can define a CSS class as follows:

<style> .left-align { text-align: left; } .center-align { text-align: center; } </style> <table class="left-align" border="1"> <tr> <td class="center-align">Cell content</td> </tr> </table>
run this source code Browser View
Cell content

This will align the table to the left and center the text within the cell.

Using the colgroup and col elements

The colgroup and col elements can be used to apply styles to specific columns within the table. For example, to align the content of the second column to the right, you can use the following code:

<table border="1"> <colgroup> <col> <col style="text-align:right;"> </colgroup> <tr> <td>Column 1 content</td> <td>Column 2 content</td> </tr> </table>
run this source code Browser View
Column 1 content Column 2 content

This will align the content of the second column to the right.

Vertically align the content of an HTML table

In HTML, there are several ways to vertically align content in a table. Here are some methods:

Using the "valign" attribute

The "valign" attribute specifies the vertical alignment of the content within a cell. It can be used on either the "th" or "td" tags.

<table border="1"> <tr> <th valign="top">Header 1</th> <th valign="middle">Header 2</th> <th valign="bottom">Header 3</th> </tr> <tr> <td valign="top">Row 1, Column 1</td> <td valign="middle">Row 1, Column 2</td> <td valign="bottom">Row 1, Column 3</td> </tr> <tr> <td valign="top">Row 2, Column 1</td> <td valign="middle">Row 2, Column 2</td> <td valign="bottom">Row 2, Column 3</td> </tr> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

In the above example, the "valign" attribute is used to vertically align the content within the cells. The values for the "valign" attribute are "top", "middle", and "bottom".

Using CSS

CSS can also be used to vertically align content within a table cell. One way to do this is to set the "vertical-align" property to "middle".

<style> td { vertical-align: middle; } </style> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

In the above example, the "vertical-align" property is set to "middle" for all table cells using CSS. This will vertically align the content in the middle of each cell.

Center an HTML table on a web page

To center an HTML table on a web page, you can use CSS to set the left and right margins of the table to "auto".

<!DOCTYPE html> <html> <head> <style> table { margin-left:auto; margin-right:auto; } </style> </head> <body> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </table> </body> </html>
run this source code Browser View
Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

In the above example, the "margin-left" and "margin-right" properties of the table are set to "auto". This centers the table within its parent container (which in this case is the body of the web page).

You can also center the table using the "text-align" property of the parent container.

<!DOCTYPE html> <html> <head> <style> body { text-align:center; } table { display:inline-block; } </style> </head> <body> <table border="1"> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> </tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </table> </body> </html>
run this source code Browser View
Header 1 Header 2 Header 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

In the above example, the "text-align" property of the body is set to "center", which centers all of its child elements horizontally. The "display" property of the table is set to "inline-block", which makes it act like an inline element so that it can be centered horizontally using the "text-align" property of its parent container.

Align specific columns of an HTML table

It is possible to align specific columns of an HTML table by adding CSS styles to the corresponding <th> and <td> elements.

Align the content of the second column to the right

<table border="1"> <tr> <th>Column 1</th> <th style="text-align:right;">Column 2</th> <th>Column 3</th> </tr> <tr> <td>Row 1, Column 1</td> <td style="text-align:right;">Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td style="text-align:right;">Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> </table>
run this source code Browser View
Column 1 Column 2 Column 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

Align the content of the third column to the center:

<table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th style="text-align:center;">Column 3</th> </tr> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td style="text-align:center;">Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td style="text-align:center;">Row 2, Column 3</td> </tr> </table>
run this source code Browser View
Column 1 Column 2 Column 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

Align the content of the first and third columns to the left and right, respectively:

<table border="1"> <tr> <th style="text-align:left;">Column 1</th> <th>Column 2</th> <th style="text-align:right;">Column 3</th> </tr> <tr> <td style="text-align:left;">Row 1, Column 1</td> <td>Row 1, Column 2</td> <td style="text-align:right;">Row 1, Column 3</td> </tr> <tr> <td style="text-align:left;">Row 2, Column 1</td> <td>Row 2, Column 2</td> <td style="text-align:right;">Row 2, Column 3</td> </tr> </table>
run this source code Browser View
Column 1 Column 2 Column 3
Row 1, Column 1 Row 1, Column 2 Row 1, Column 3
Row 2, Column 1 Row 2, Column 2 Row 2, Column 3

In each of these examples, the desired alignment is achieved by adding a "text-align" style to the <th> and <td> elements of the corresponding column. The "text-align" property can be set to "left", "center", or "right" to align the content of the element.

Align the text in the header of an HTML table differently from the rest of the table

You can align the text in the header of an HTML table differently from the rest of the table. To do this, you can add different CSS styles to the <th> elements in the header row of the table.

For example, if you want to align the text in the header row to the center while aligning the text in the rest of the table to the left, you can use the following CSS code:

<style> th { text-align: center; } td { text-align: left; } </style>

This code sets the "text-align" property of all <th> elements to "center" and the "text-align" property of all <td> elements to "left". This will align the text in the header row to the center while aligning the text in the rest of the table to the left.

Alternatively, you can add a class or an ID to the <th> elements in the header row and apply different CSS styles to these elements.

<style> .header { text-align: center; } td { text-align: left; } </style> <table border="1"> <tr> <th class="header">Header 1</th> <th class="header">Header 2</th> <th class="header">Header 3</th> </tr> <tr> <td>Data 1</td> <td>Data 2</td> <td>Data 3</td> </tr> <tr> <td>Data 4</td> <td>Data 5</td> <td>Data 6</td> </tr> </table>
run this source code Browser View
Header 1 Header 2 Header 3
Data 1 Data 2 Data 3
Data 4 Data 5 Data 6

In the above example, the "header" class is applied to the <th> elements in the header row, and the "text-align" property of this class is set to "center". The "text-align" property of the <td> elements is set to "left", which will align the text in the rest of the table to the left. This will result in the text in the header row being aligned to the center, while the text in the rest of the table is aligned to the left.

Align images within an HTML table

To align images within an HTML table, you can use the "align" attribute on the <img> tag. The "align" attribute can be set to "left", "right", or "center" to specify the horizontal alignment of the image within the cell.

<table border="1"> <tr> <td align="left"><img src="image1.jpg" alt="Image 1"></td> <td align="center"><img src="image2.jpg" alt="Image 2"></td> <td align="right"><img src="image3.jpg" alt="Image 3"></td> </tr> </table>
run this source code Browser View
Image 1 Image 2 Image 3

In the above example, three images are placed in separate cells of a table. The first image is aligned to the left, the second image is aligned to the center, and the third image is aligned to the right. This will result in the images being horizontally aligned according to the "align" attribute value.

Note that the "align" attribute is not recommended for use in modern HTML versions, and you should instead use CSS to align images. You can use the "text-align" property to align images horizontally within cells, and the "vertical-align" property to align images vertically within cells.

<style> td { text-align: center; vertical-align: middle; } img { display: block; margin: auto; } </style> <table border="1"> <tr> <td><img src="image1.jpg" alt="Image 1"></td> <td><img src="image2.jpg" alt="Image 2"></td> <td><img src="image3.jpg" alt="Image 3"></td> </tr> </table>
run this source code Browser View
Image 1 Image 2 Image 3

In the above example, the "text-align" property of the <td> elements is set to "center", which will align the images horizontally in the center of each cell. The "vertical-align" property is set to "middle", which will align the images vertically in the middle of each cell. Finally, the "display" property of the &img;th> elements is set to "block", and the "margin" property is set to "auto", which will center the images within their cells.

Conclusion:

The purpose of the HTML table align attribute is to control the horizontal alignment of a table on a web page in order to improve its visual appearance and make it easier to read and navigate.






Related Topics
  1. HTML Table Headers
  2. HTML Table Borders
  3. HTML Table Cellpadding
  4. HTML Table Cellspacing
  1. HTML Table Colspan and Rowspan
  2. HTML Table Background Color
  3. HTML Nested Table
  4. HTML Table Layouts