What is HTML Table tag?

The HTML table is a way to present information in a tabular format in your HTML documents. The data is presented in the form of rows and columns in tables, generally.

You can apply styles to the table rows and columns by using style attribute with CSS properties. With CSS3 you can also apply shades, round edged tables as well.

You can place text, images, links, forms and even tables inside HTML tables.

In this tutorial, we will show you how to use <table> tag of HTML along with useful attributes to style tables with examples.

HTML table online examples

A few simple examples that you can see online with code are:

Example of using HTML <th> tag

Example of HTML table with no border

Example of HTML border with value = 2

Table border with color example

HTML table with style example

HTML table padding Example

HTML colspan Example

Table background color example with bgcolor attribute

HTML table tag

The tag used to define a table is:

<table> </table>

For example, a basic table structure could be:

The table <tr> tag

TR stands for the table row. As such table in HTML is the combination of rows and columns, you have to define table rows and columns after starting a table. The <tr> tag is used to define table row as follows:

<table>

<tr>

……

…..

</tr>

</table>

So after opening a table tag, you have to use the <tr> tag to define a row in a table. This will create a row in HTML table.  You can create as many rows as required by using <tr> tag inside the <table> tag.

Example of using <tr> tag

The table <td> tag

TD stands for table data. After creating rows in a table, you have to present data for what you have created a table. The <td> tag is used to create columns inside the table row <tr>. A <td> is also called as table cell.  You can create as many columns as required depending on the task requirement and space of table.

You can create as many columns as required depending on the task requirement and space of table.

This is how you can define table columns by using the <td> tag and placing table data.

<table>

<tr>

<td>

</td>

</tr>

</table>

So after the table tag, it tells HTML to create a table. The <tr> tag will create a table row. After <tr>, the <td> tag is used to create a column in the table.

The above structure creates one column inside a row of HTML table. You can place more <td> tags to place more columns to show data. After each opening <td>, you have to close it by using closing tag </td> for each column.

Example of using HTML <td> tag

The example below shows a table with employee names, age, and salaries.

First of all, a table is created with the <table> tag. Then a row is created that contains three column by using <td> tags. This constitutes the first row.

As we are using only three columns or <td>, </tr> will tell this is the end of row. The column in first row contains Employee name, the second column contains the Employee age, and the third column shows employee salary.

Then we started the second row by again using <tr> and created three columns again with an employee’s data.

Creating a Table with <th> tag

The table contains rows and columns. Each <td> also represents a cell in HTML table.  The other type of tag that represents a cell in a table is the <th>.

The <th> tag stands for Table header. As the name shows, this tag is used to define Headers in a table. The <th> tag is also placed inside the <tr> tag.

As such <th> defines the table header, the data inside <th> cells is by default bold and center aligned. Whereas <td> data is left aligned with the normal text.

An example of using HTML <th> tag

The example below shows a table with employee names, age, and salaries. The headers are placed in the <th> tags.

As you can see, the employee name, Employee age, and Employee Salary are placed inside <tr> tags. All these are showing centered and bold by itself.

HTML table border

Generally, tables are shown with borders to distinguish information. However, by default, no border is shown for HTML tables. i.e. if you do not specify or use border attribute it will be taken as “0”.

The table attribute border is used to define the border of a table.

The syntax of border attribute is:

<table border=”1”>

The more value is given the border line will be thicker.

An example of HTML border with 0 value

The example below uses “0” value for the border. See the code and output:

So no border line will be shown.

Example of HTML border with value = 2

The example below uses “2” value for the border attribute of the table.

Increase or decrease the value of border as it suits to your webpage.

HTML table border color

You can also define the color for HTML border. The default color is black. However, to blend it to the other parts of the webpage, you may need to set some other color of the border of a table.

The border color of a table can be set by using CSS. See example below to give color to a table.

The table style

You can use the Style attribute in table tag to define properties of the table or cell data. You can set properties like table border, height, and width of the table, the font size of cell text, color of text etc.

See example below for how to use style attribute in table tag:

Similarly you can place Style attribute inside <tr> or <td> tags to define the <td> width, color etc.

HTML table padding

By default, the cell data is aligned left and very close to the border of a cell. To increase the distance between content and border of a cell you can use the CSS padding property.

The example below shows how you may use the table padding.

The above example will apply to all <td>s of the table. In order to apply padding to single column <td>, you can use style at <td> level. See example below

The table padding at single column level example

The example below shows applying padding to a single <td> cell.

You can see only “Mike” <td> is distant 20px from the border line.

HTML colspan

The colspan in HTML table is used to merge two cells into a single column. For example, if you have three columns and want to merge second and third column into one column then in the second column you can place colspan=”2”. And if want to merge three cells into one then use colspan=”3” and so on.

See example below of using the table colspan:

As you can see, the second row’s three columns are merged into the single column.

HTML rowspan

Similarly, you can use rowspan to merge two or more rows into the single row. You can place rowspan inside <td> tag to merge two or more cells into one row.

See example below to see the usage of table rowspan.

The table background

You can set the background color of whole table or whole row or even a single cell. In order to set table background, you can use table attribute bgcolor. Alternatively, you can use background attribute if you want to set an image as background.

Table background color Example with bg color attribute

The example below shows how to set the background color of a table with bgcolor attribute.

The whole table background color is set to light gray color.

The table background color for single row example

Sometimes, you need to have different colors of different rows in order to stand out specific rows.

The example below shows how to set the background color of only single row by using bgcolor.

Table background image

You can set the background of the whole table, specific rows or a specific cell by using the background attribute.

See examples below how to set the background image of a table.

Setting whole table background image

The example below shows how to set table background of the whole table.

The table background image for cell

The example below sets the background image of a cell.

CSS based Tables

You can also draw table and set all properties of the table, table headings, table rows and cells by using CSS.

These days, the preferred way of styling the table is by CSS. Due to its importance, we have written a comprehensive guide in CSS table chapter that describes working with CSS and tables.

---