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:
html-line

<table border=”1″>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Browser View

HTML coding viewed through a web browser:
html-line

html_tables

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:
html-line

<table border="1">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Browser View

HTML coding viewed through a web browser:
html-line

html_tables

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:
html-line

<table border="1" align="right">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

<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:
html-line

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:
html-line

<table border="1" width="100">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Browser View

HTML coding viewed through a web browser:
html-line

pixels

Percentage

HTML Code

HTML code viewed within an HTML document:
html-line

<table border="1" width="30%">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Browser View

HTML coding viewed through a web browser:
html-line

percentage

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.

Colspan

The colspan attribute is used to enable a cell to span multiple columns.

HTML Code

HTML code viewed within an HTML document:
html-line

<table border="1" style="width:50%;">
<tr>
<th colspan="2">Table Header</th>
</tr>
<tr>
<td>Text</td><td>Text</td>
</tr>
</table>

Browser View

HTML coding viewed through a web browser:
html-line

colspan

 

Rowspan

The rowspan attribute is used to enable a cell to span multiple rows.

HTML Code

HTML code viewed within an HTML document:
html-line

<table border="1" style="width:50%;">
<tr>
<th rowspan="2">Table Header</th>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
</tr>
</table>

Browser View

HTML coding viewed through a web browser:
html-line

rowspan

Colors

The HTML bgcolor attribute specifies the background color of a table.

HTML Code

HTML code viewed within an HTML document:
html-line

<table border="1" bgcolor="#CCCCCC">
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>

Browser View

HTML coding viewed through a web browser:
html-line

table_colors

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

CSS: <table style=”background-color:blue”>

 
This concludes the HTML tables tutorial. In the next section, we will focus on HTML lists.