HTML Table Tags

The HTML table provides a way to derive or define the data, such as text, images, links, etc., in terms of rows and columns of cells. The HTML tables can be created by using the

tag. By default, the table data is left aligned. In this topic, we are going to learn about HTML Table Tags.

The table can be created by using

tags.

• The

tag specifies the table rows used to create a row.

The table data can be structured within

,	, and
tag defines a heading for the table. The	tag specifies the table data cells used to make the column. The

content of the table with numerous table elements.

Syntax

Table Heading 1	Table Heading 2
Data Cell 1	Data Cell 2
Data Cell 3	Data Cell 4

Examples of HTML Table Tags

Here are the Examples of HTML Table Tags given below

1. Basic Table Usage

Example:

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

Save the code with a .html extension and open it in the browser. It will display the following output:

2. Table Caption

The table caption can be specified using the caption> tag.

Example

<title>HTML Table Tag Usage</title>

This is Table Caption

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

The above code will display the below output:

3. Table Cell Spacing

The table cells’ space can be defined using the cellspacing attribute. The cellspacing attribute specifies the space between table cells.

Example

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

The above code will display the following output:

4. Table Cell Padding

The table cells’ padding can be defined using the cellpadding attribute. The cellpadding attribute distance between the table cell border and data.

Example

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

The above code will display the below output:

5. Column and Row Span Attributes

You can merge two or more table rows into a single row by using the rowspan attribute, and you can merge table columns into a single column by using the colspan attribute.

Example

<title>HTML Table Tag Usage</title>

Column One	Column Two	Column Three
Row One	Row Two	Row Three
	Row Four	Row Five
Row Six

The code will display the following output:

6. Background for Table

You can create the background of the table by using the bgcolor attribute. The table cell border can be specified by using the border-color attribute.

Example

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

Execute the above code, and it will display the below output:

7. Height and Width of the Table

You can set the height and width of the table by using the width and height attributes.

Example

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

The above code will display the following output:

8. Styling Table Cells

Example

<title>HTML Table Tag Usage</title>

<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
table#mytable tr:nth-child(even) {
background-color: #FAD7A0;
}
table#mytable tr:nth-child(odd) {
background-color: #E67E22;
}
table#mytable th {
color: white;
background-color: teal;
}
</style>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

Execute the above code; you will have the below output:

8. Nested Tables

You can use one table inside another table is called a nested table.

Let us consider the below example for the nested table:

Example

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

The above code will display the following output:

Attributes of Table

Below are the attributes as follows:

• align: This attribute provides content alignment inside an element.
• bgcolor: This attribute specifies the background color for the table.
• border: This attribute specifies the border for the table cells.
• cellpadding: This attribute displays the padding between table cells and table content.
• cellspacing: This attribute indicates the space between table cells.
• frame: It specifies which parts of the outside borders are visible.
• rules: This specifies which parts of the inside borders are visible.
• sortable: This attribute informs that the table is sortable.
• summary: It provides what type of table content is present.
• width: This attribute tells the width of the table.
• height: This attribute specifies the height of the table.

Conclusion

So far, we have studied the different types of table tags in HTML. The examples have shown the usage of styling the table, nesting one table within another table, setting the height and width of the table, adding spacing and padding for the table cells, applying background color for the table, and many more.

The above is the detailed content of HTML Table Tags. For more information, please follow other related articles on the PHP Chinese website!