Categories
Learn HTML

HTML: table tag

HTML: <table> tag

In this series of learning HTML, we will teach you how to use HTML table tag with proper syntax and lots of examples. Let’s start on the HTML table tag.

Description of HTML table tag

The HTML <table> tag is used to create a table in an HTML document. Tables are used to display tabular data, such as financial information or product listings, in a structured and organized format.

Here is an example of how the <table> tag can be used:

<table>
<tr>
<th>Product</th>
<th>Price</th>
<th>Quantity</th>
</tr>
<tr>
<td>Apples</td>
<td>$0.50</td>
<td>10</td>
</tr>
<tr>
<td>Oranges</td>
<td>$0.75</td>
<td>6</td>
</tr>
<tr>
<td>Bananas</td>
<td>$0.25</td>
<td>12</td>
</tr>
</table>

In this example, the <table> tag is used to create a table with three columns: Product, Price, and Quantity. The <tr> tag is used to define each row in the table, and the <th> tag is used to define the header row. The <td> tag is used to define the content of each cell in the table.

When the code is rendered in a web browser, it will appear like this:

| Product | Price | Quantity |
|---------|-------|----------|
| Apples | $0.50 | 10 |
| Oranges | $0.75 | 6 |
| Bananas | $0.25 | 12 |

 

Overall, the <table> tag is a useful tool for creating structured and organized data in an HTML document, and can be used in a variety of ways to display tabular data.

 

Syntax of HTML table tag

The HTML table tag is used to create a table in a web page. The syntax of the table tag is as follows:

<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
...
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
...
</tr>
...
</tbody>
</table>

Here, the table tag is used to create a table, which contains one or more rows. The thead tag is used to create the table header, which contains one or more cells represented by the th tag. The tbody tag is used to create the table body, which contains the table data, represented by the td tag.

The table tag can have several attributes that can be used to define its properties. For example:

  • border: This attribute specifies the width of the border around the table.
  • cellpadding: This attribute specifies the amount of space between the cell content and the cell border.
  • cellspacing: This attribute specifies the amount of space between cells.

Example:

<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 5</td>
<td>Data 6</td>
</tr>
...
</tbody>
</table>

This will create a table with a border of 1 pixel, a padding of 10 pixels, and no spacing between cells. The table will have a header row with three columns, and a body with multiple rows and columns.

Global Attributes

HTML table tag is a part of Global Attributes.

The <table> tag in HTML allows you to create a table on a web page. Some of the global attributes that can be used with the <table> tag include:

  1. class: This attribute allows you to assign a CSS class to the table for styling purposes.
  2. id: This attribute allows you to assign a unique identifier to the table for scripting purposes.
  3. style: This attribute allows you to apply inline CSS styling to the table.
  4. title: This attribute allows you to provide a tooltip or additional information about the table.
  5. align: This attribute allows you to align the table to the left, right, or center of the page.
  6. border: This attribute specifies the width of the border around the table.
  7. cellpadding: This attribute specifies the amount of padding to be added between the cells and the cell walls.
  8. cellspacing: This attribute specifies the amount of space to be added between cells in the table.
  9. width: This attribute specifies the width of the table.
  10. height: This attribute specifies the height of the table.

It’s important to note that some of these attributes, like align and border, have been deprecated in HTML5 and are no longer recommended for use. Instead, it’s recommended to use CSS for styling and layout purposes.

Event Attributes

HTML table tag is a part of Event Attributes.

Event attributes can be used with the <table> tag in HTML to attach event handlers to the table. Here are some of the common event attributes that can be used with the <table> tag:

  1. onblur: This attribute fires when the table loses focus.
  2. onclick: This attribute fires when the table is clicked.
  3. ondblclick: This attribute fires when the table is double-clicked.
  4. onfocus: This attribute fires when the table receives focus.
  5. onkeydown: This attribute fires when a key is pressed down while the table has focus.
  6. onkeypress: This attribute fires when a key is pressed while the table has focus.
  7. onkeyup: This attribute fires when a key is released while the table has focus.
  8. onmousedown: This attribute fires when the mouse button is pressed down while the cursor is over the table.
  9. onmousemove: This attribute fires when the mouse is moved while the cursor is over the table.
  10. onmouseout: This attribute fires when the mouse pointer leaves the table.
  11. onmouseover: This attribute fires when the mouse pointer enters the table.
  12. onmouseup: This attribute fires when the mouse button is released while the cursor is over the table.

It’s important to note that event attributes have been deprecated in HTML5 and it’s recommended to use event listeners with JavaScript instead of using these attributes directly in HTML.

 

 

Other Attributes

In addition to the global and event attributes, there are other attributes that can be used with the <table> tag in HTML:

  1. summary: This attribute provides a summary of the table’s purpose and structure for screen readers and other assistive technologies.
  2. caption: This attribute allows you to add a caption to the table to describe its contents.
  3. colgroup: This attribute allows you to group columns in the table and apply formatting or other attributes to the group.
  4. thead, tbody, tfoot: These attributes allow you to group rows in the table by their location in the table (header, body, or footer) and apply formatting or other attributes to the group.
  5. rowspan: This attribute allows you to span a cell across multiple rows.
  6. colspan: This attribute allows you to span a cell across multiple columns.
  7. headers: This attribute allows you to associate a data cell with a header cell(s).
  8. scope: This attribute specifies the scope of a header cell.

These attributes can be useful for providing additional information to assistive technologies, organizing and structuring the table, and making it easier for users to understand and navigate the content.

 

Note on HTML: table tag

Here are some important notes to keep in mind when using the <table> tag in HTML:

  1. Tables should be used for displaying tabular data, such as financial data or lists of information that have a clear row and column structure. They should not be used for layout purposes, as this can create accessibility and usability issues.
  2. Tables should be structured using <thead>, <tbody>, and <tfoot> tags to group rows by their location in the table and to apply appropriate formatting and other attributes to each group.
  3. Tables should include a <caption> element to provide a brief summary or description of the table’s contents.
  4. Tables should use appropriate table headers (<th> elements) to make the table more accessible to screen readers and other assistive technologies. The headers and scope attributes can be used to associate header cells with data cells.
  5. Tables should be styled using CSS instead of inline styles or deprecated attributes like align and border. This allows for greater flexibility and consistency in the presentation of the table across different devices and screen sizes.
  6. Tables can be complex and difficult to navigate for users with disabilities or on small screens, so it’s important to keep them simple and well-organized.
  7. HTML5 has deprecated some attributes previously used with the <table> tag, such as border and bgcolor, in favor of using CSS for styling and layout purposes.

 

Browser Compatibility

The HTML table tag has essential support with the following browsers:

  1. Chrome
  2. Internet Explorer (IE)
  3. Opera
  4. Safari (WebKit)
  5. Firefox (Gecko)
  6. Android
  7. Firefox Mobile (Gecko)
  8. Edge Mobile
  9. Opera Mobile
  10. Safari Mobile

Examples of HTML table tag

We will discuss the <table> tag below, exploring examples of how to use the <table> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

  • HTML5
  • HTML4
  • XHTML

HTML5 Document

Here’s an example of an HTML5 document that uses the table tag to display data in a tabular format:

<!DOCTYPE html>
<html>
<head>
<title>Example Table</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #555;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Example Table</h1>
<table>
<thead>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Population</th>
</tr>
</thead>
<tbody>
<tr>
<td>United States</td>
<td>Washington, D.C.</td>
<td>328,200,000</td>
</tr>
<tr>
<td>Canada</td>
<td>Ottawa</td>
<td>37,740,000</td>
</tr>
<tr>
<td>Mexico</td>
<td>Mexico City</td>
<td>126,200,000</td>
</tr>
</tbody>
</table>
</body>
</html>

In this example, we have a simple table that displays the country, capital, and population of three North American countries. The table tag is used to define the table, and the thead and tbody tags are used to organize the table into a header row and body rows, respectively.

The th tag is used to define table headers, which are bold and centered by default. The td tag is used to define table cells, which contain the data to be displayed in each row and column. The tr tag is used to define table rows, and the colspan and rowspan attributes can be used to merge cells horizontally or vertically, respectively.

The CSS code is used to style the table, making it easier to read and visually appealing. The border-collapse property is set to collapse the borders of adjacent cells into a single border, and the width property is set to 100% to make the table fill the width of the container element. The border and padding properties are used to define the appearance of the table cells and the background-color property is used to define the background color of the table header and even rows.

 

HTML 4.01 Transitional Document

Here’s an example of an HTML 4.01 Transitional document that uses the table tag to display data in a tabular format:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example Table</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #555;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Example Table</h1>
<table>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Population</th>
</tr>
<tr>
<td>United States</td>
<td>Washington, D.C.</td>
<td>328,200,000</td>
</tr>
<tr>
<td>Canada</td>
<td>Ottawa</td>
<td>37,740,000</td>
</tr>
<tr>
<td>Mexico</td>
<td>Mexico City</td>
<td>126,200,000</td>
</tr>
</table>
</body>
</html>

 

In this example, we have a simple table that displays the country, capital, and population of three North American countries. The table tag is used to define the table, and the tr tag is used to define table rows. The th tag is used to define table headers, which are bold and centered by default. The td tag is used to define table cells, which contain the data to be displayed in each row and column.

The CSS code is used to style the table, making it easier to read and visually appealing. The border-collapse property is set to collapse the borders of adjacent cells into a single border, and the width property is set to 100% to make the table fill the width of the container element. The border and padding properties are used to define the appearance of the table cells and the background-color property is used to define the background color of the table header and even rows.

Note that in HTML 4.01, the thead and tbody tags are not required, and the colspan and rowspan attributes are the only way to merge cells horizontally or vertically. Additionally, the style attribute is used to define inline styles, rather than a separate CSS file.

 

XHTML 1.0 Transitional Document

Here’s an example of an XHTML 1.0 Transitional document that uses the table tag to display data in a tabular format:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Table</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #555;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Example Table</h1>
<table>
<thead>
<tr>
<th>Country</th>
<th>Capital</th>
<th>Population</th>
</tr>
</thead>
<tbody>
<tr>
<td>United States</td>
<td>Washington, D.C.</td>
<td>328,200,000</td>
</tr>
<tr>
<td>Canada</td>
<td>Ottawa</td>
<td>37,740,000</td>
</tr>
<tr>
<td>Mexico</td>
<td>Mexico City</td>
<td>126,200,000</td>
</tr>
</tbody>
</table>
</body>
</html>

 

In this example, we have a simple table that displays the country, capital, and population of three North American countries. The table tag is used to define the table, and the thead and tbody tags are used to group the table headers and body respectively. The tr tag is used to define table rows. The th tag is used to define table headers, which are bold and centered by default. The td tag is used to define table cells, which contain the data to be displayed in each row and column.

The CSS code is used to style the table, making it easier to read and visually appealing. The border-collapse property is set to collapse the borders of adjacent cells into a single border, and the width property is set to 100% to make the table fill the width of the container element. The border and padding properties are used to define the appearance of the table cells and the background-color property is used to define the background color of the table header and even rows.

Note that in XHTML 1.0, the syntax is stricter than in HTML, requiring all tags to be properly nested and closed. The xml declaration at the beginning of the document specifies the version of XML being used, and the DOCTYPE declaration specifies the document type and the location of the DTD (Document Type Definition).

 

XHTML 1.0 Strict Document

Here’s an example of an XHTML 1.0 Strict document that uses the table tag to display data in a tabular format:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Table</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #555;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Example Table</h1>
<table summary="Example table showing country, capital, and population">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
</tr>
</thead>
<tbody>
<tr>
<td>United States</td>
<td>Washington, D.C.</td>
<td>328,200,000</td>
</tr>
<tr>
<td>Canada</td>
<td>Ottawa</td>
<td>37,740,000</td>
</tr>
<tr>
<td>Mexico</td>
<td>Mexico City</td>
<td>126,200,000</td>
</tr>
</tbody>
</table>
</body>
</html>

 

In this example, we have a simple table that displays the country, capital, and population of three North American countries. The table tag is used to define the table, and the thead and tbody tags are used to group the table headers and body respectively. The tr tag is used to define table rows. The th tag is used to define table headers, which are bold and centered by default, and the scope attribute is used to indicate whether the header applies to a column (col) or row (row). The td tag is used to define table cells, which contain the data to be displayed in each row and column.

The summary attribute is used to provide a brief description of the table for accessibility purposes.

The CSS code is used to style the table, making it easier to read and visually appealing. The border-collapse property is set to collapse the borders of adjacent cells into a single border, and the width property is set to 100% to make the table fill the width of the container element. The border and padding properties are used to define the appearance of the table cells and the background-color property is used to define the background color of the table header and even rows.

Note that in XHTML 1.0 Strict, the syntax is stricter than in HTML, requiring all tags to be properly nested and closed. The xml declaration at the beginning of the document specifies the version of XML being used, and the DOCTYPE declaration specifies the document type and the location of the DTD (Document Type Definition).

 

XHTML 1.1 Document

Here’s an example of an XHTML 1.1 document that uses the table tag to display data in a tabular format:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example Table</title>
<style type="text/css">
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #555;
color: white;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<h1>Example Table</h1>
<table summary="Example table showing country, capital, and population">
<thead>
<tr>
<th scope="col">Country</th>
<th scope="col">Capital</th>
<th scope="col">Population</th>
</tr>
</thead>
<tbody>
<tr>
<td>United States</td>
<td>Washington, D.C.</td>
<td>328,200,000</td>
</tr>
<tr>
<td>Canada</td>
<td>Ottawa</td>
<td>37,740,000</td>
</tr>
<tr>
<td>Mexico</td>
<td>Mexico City</td>
<td>126,200,000</td>
</tr>
</tbody>
</table>
</body>
</html>

 

In this example, we have a simple table that displays the country, capital, and population of three North American countries. The table tag is used to define the table, and the thead and tbody tags are used to group the table headers and body respectively. The tr tag is used to define table rows. The th tag is used to define table headers, which are bold and centered by default, and the scope attribute is used to indicate whether the header applies to a column (col) or row (row). The td tag is used to define table cells, which contain the data to be displayed in each row and column.

The summary attribute is used to provide a brief description of the table for accessibility purposes.

The CSS code is used to style the table, making it easier to read and visually appealing. The border-collapse property is set to collapse the borders of adjacent cells into a single border, and the width property is set to 100% to make the table fill the width of the container element. The border and padding properties are used to define the appearance of the table cells and the background-color property is used to define the background color of the table header and even rows.

Note that in XHTML 1.1, the syntax is stricter than in previous versions of XHTML, requiring all tags to be properly nested and closed. The xml declaration at the beginning of the document specifies the version of XML being used, and the DOCTYPE declaration specifies the document type and the location of the DTD (Document Type Definition).