Home → HTML Basics → HTML Tutorial → HTML Tables

HTML Tables

HTML Tables are used to organize web page content within rows and columns. They are also used for web page layout to display web page content areas.

Tables are created using HTML tags to create rows and columns. Table rows are horizontal and table columns are vertical.

HTML Basic Table Tags

In HTML, the basics for creating a table will include the <table> tag, followed by the <tr> and <td> tags. A table row is created with the <tr> tag and a table column (data) is created with the <td> tag.

HTML Code

HTML code viewed within an HTML document:

Browser View

HTML coding viewed through a web browser:

In the above example, the table border attribute was used to enable the table borders to display.

Borders

The HTML table border attribute specifies the table border. The value specifies the size of the border. To remove the border, change the value of the attribute to 0. To increase the size of the border, increase the value.

HTML Code

HTML code viewed within an HTML document:

Browser View

HTML coding viewed through a web browser:

When working with tables, it is best to include a border of at least 1, as it will enable you to see how your content is displaying. Once your table is complete, and your content is displaying properly, you can set your table border to 0, if you’d like.

Alignment

The HTML table align attribute aligns the table based on the text around it.

HTML Code

HTML code viewed within an HTML document:

<p>This is some example text to demonstrate how to align a table in HTML.</p>
<p>The table can be aligned left, right or center.

Browser View

HTML coding viewed through a web browser:

align

The align attribute is deprecated in HTML 4 and is not supported in HTML 5. Use CSS instead.

CSS: <table style=”float:left”>

Width

The HTML table width attribute specifies the width of a table. If not included, the table will automatically stretch and display according to the content within the table cells.

Table widths are specified with the CSS width property in pixels or percentages. Pixels are used to specify an exact width, while percentages are used to enable the table to automatically adjust according to the page content and browser.

Pixels

HTML Code

HTML code viewed within an HTML document:

Browser View

HTML coding viewed through a web browser:

Percentage

HTML Code

HTML code viewed within an HTML document:

Browser View

HTML coding viewed through a web browser:

The width attribute is deprecated in HTML 4 and is not supported in HTML 5. Use CSS instead.

CSS: width: <value>;

Table Header

The HTML <th> tag specifies a header cell within an HTML table.

When text is displayed within the header cells it is bold and center aligned, while text displayed within the standard cells is normal and left aligned.