Overview

Table attributes in HTML are used to create a table on our webpage, help us to visualize our data in tabluar format. Also, we use a bunch of tags and styles to customize them and make then more interactive.

Introduction

Sometimes in our webpage or web application we need to visualize our data in tabular format. For this, we have a Table tsg in HTML which is defined by <table> tag and includes several other tags like <tr>, <td>, <th>, <caption> which are required to fill data in the table on our webpage.

Tables are widely used to compare two or more data pieces, in data analysis, for presenting text information and corresponding numerical data.

Let's look at the following table to get a brief idea of tags about which we are going to know by the end of this article.

Example

Output

Here, we have created this table using the HTML <table> tag and other table attributes.

• Also there are many other attributes and tags like rowspan, colspan, <caption>, align, etc which are useful for customizing tables in the way we need.

Let's now customize this table using the attributes of table tag.

Attributes

Table attributes in HTML are used to customize table such as changing it's background color, alignment, width, border, etc.

let's have a look at list of table attributes and tags

HTML Border Attribute

In the first example, we found that there were no borders in the table and the content was hard to be differentiated visually among the cells of the table.

So, to solve that issue, we can add borders to the table, and this can be done by two way's.

• By using the inline border attribute.
• using CSS border property

Examples

• Using the Inline HTML Border Attribute

  Here is the HTML Code required to add borders to your table.

• Using CSS border property To add borders to your table using CSS, you just need to use this border property in your style tag or in a CSS file. Here is the required CSS code to add borders to your table.

Output

The output results for both the methods using inline border attribute or CSS border property are same as the following :

HTML table with Cell Padding

Up until this point, we have discovered that there should be some gap between borders and nested data in the table, this gap is known as cell padding.

You can achieve this gap by using padding property of CSS as follows.

• There is also another property to add space between the borders of the cells of a table.

Output

Using padding, we have added space between the data stored and borders of a cell, while border-spacing is to add space between the borders of the cells of a table.

HTML table with Colspan

Colspan is an attribute which assigns multiple columns to a cell of a table. The number of columns depends on the value entered by you in colspan="" attribute.

Let's go back to our previous example HTML

CSS

Output

Here, with colspan attribute we have assigned 2 columns to the _Job_ and _Senior Web developer_ column based on information.

HTML tables with Rowspan

Rowspan in table, works similar to the clospan for columns, but here, we assign multiple rows to a cell using an attribute rowspan="" .

Example

Now we need to assign same working experience for Ale, and John in our example, this can be done as following.

Output

Here, John and Ale had same working experience, so instead of writing "5 Years" twice, we have assigned 2 rows to it using rowspan="2" attribute.

HTML Tables with Caption

In a HTML table, caption is simply the title of the table. For this, HTML <caption></caption> tag can be used.

<Caption> tag can be used in <table> tag, but it is recommended to use <caption> tag just after the <table> tag to keep your code clean and easy to understand.

Additional CSS code to make caption look as a part of table (Optional).

Output

Look at here, caption is assigned to the table i.e "New Employees Record", using the <caption> tag.

HTML table with Background Color

We can add background color to a particular cell, row or to a complete table. This can be done by CSS background-color property or by HTML inline attribute.

• Using HTML Inline Attribute
  Add bgcolor="#$$$$$$" attribute to any element of the table in which you want to add background color.

• Using CSS background-color Property Simply just add this background-color property to your css code for the element which you want to color.

Output

Here, we got the eligible class background color. Similarly, we can add it to the other elements as per our needs.

Even and Odd Cell Styling of HTML Table

When we need to style even and odd cells of a table in a particular way, we takes the help of nth selector of CSS to style them, Here is how. HTML

The nth selector specifically selects the specified elements and styles them separately. The nth selector is specified as follows : CSS

Output

Here the even and odd cells of the table are differently styled :

HTML table with Left Align Headings

In a HTML table, we can align headings and data in cells left, right, center using the inline align attribute.

You Just need to add the inline attribute align="left" to align headings left and similar use cases for right and center.

Example
Lets now align the headings of our table of New Employees working Experience.

• Using HTML inline attribute align=""

• Using CSS text-align Property

Output

Here, using inline attribute or by CSS text-align property, we have aligned the headings towards left. Do the same for the right alignment also, just replace the left with right.

Nested Tables in HTML

Nested tables are referred as tables inside another table. This makes HTML tables visually more interesting and leads to complex table layout.

Let's look at an Example

Output

Here, we have nested tables inside another table using the <table> tag nested in a <td> tag of the parent table.

Supporting Browsers

The following table defines the support of <table> tags of HTML in different browsers.