HTML Table Tags-HTML Tutorial-php.cn

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.

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>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
</tr>
<tr>
<td>Data Cell 1</td>
<td>Data Cell 2</td>
</tr>
<tr>
<td>Data Cell 3</td>
<td>Data Cell 4</td>
</tr>
</table>

Copy after login

Examples of HTML Table Tags

Here are the Examples of HTML Table Tags given below

1. Basic Table Usage

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copy after login

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

HTML Table Tags

2. Table Caption

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

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<caption>This is Table Caption</caption>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copy after login

The above code will display the below output:

HTML Table Tags

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellspacing = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copy after login

The above code will display the following output:

HTML Table Tags

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellpadding = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copy after login

The above code will display the below output:

HTML Table Tags

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td rowspan = "2">Row One</td>
<td>Row Two</td>
<td>Row Three</td>
</tr>
<tr>
<td>Row Four</td>
<td>Row Five</td>
</tr>
<tr>
<td colspan = "3">Row Six</td>
</tr>
</table>
</body>

Copy after login

The code will display the following output:

HTML Table Tags

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" bordercolor = "red" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copy after login

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

HTML Table Tags

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copy after login

The above code will display the following output:

HTML Table Tags

8. Styling Table Cells

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<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>
<body>
<table id="mytable" border = "1" width = "450" height = "350">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copy after login

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

HTML Table Tags

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

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250">
<tr>
<td>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

Copy after login

The above code will display the following output:

HTML Table Tags

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!