HTML: Tag - TechOnTheNet
 Tag - TechOnTheNet

Có thể bạn quan tâm

TechOnTheNet Logo
  1. Home
  2. HTML
totn HTML HTML: <table> tag

This HTML tutorial explains how to use the HTML element called the <table> tag with syntax and examples.

Description

The HTML <table> tag defines a table in the HTML document. This tag is also commonly referred to as the <table> element.

Syntax

In HTML, the syntax for the <table> tag is: (example of a table with 2 columns and 3 rows)

<body> <table> <tr> <th>Item</th> <th>Amount</th> </tr> <tr> <td>Bananas</td> <td>$5</td> </tr> <tr> <td>Oranges</td> <td>$17</td> </tr> </table> </body>

Sample Output

Attributes

In addition to the Global Attributes, the following is a list of attributes that are specific to the <table> tag:

Attribute Description HTML Compatibility
align Alignment of the table. It can be one of the following values: left, center, right Deprecated, use CSS
bgcolor Background color of the table Deprecated, use CSS
border Size of the frame surrounding table (in pixels) Deprecated, use CSS
cellpadding Space between the content of a cell and the border (in pixels) Deprecated, use CSS
cellspacing Size of the space between cells (in pixels) Deprecated, use CSS
frame Side of the table frame is displayed. It can be one of the following values: above, hsides, lhs, border, void, below, vsides, rhs, box Deprecated, use CSS
rules Lines that should be displayed. It can be one of the following values: none, groups, rows, columns, all Deprecated, use CSS
summary Alternative text displayed when table can not be displayed Deprecated, use CSS
width Width of the table Deprecated, use CSS

Note

Browser Compatibility

The <table> tag is compatible with the following browsers:

Example

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 Document

If you created a new web page in HTML5, your <table> tag might look like this:

<!doctype html> <html> <head> <meta charset="UTF-8"> <title>HTML5 Example by www.techonthenet.com</title> </head> <body> <table> <tr> <th>Column 1 Heading</th> <th>Column 2 Heading</th> <th>Column 3 Heading</th> </tr> <tr> <td>Data in Column 1, Row 2</td> <td>Data in Column 2, Row 2</td> <td>Data in Column 3, Row 2</td> </tr> <tr> <td>Data in Column 1, Row 3</td> <td>Data in Column 2, Row 3</td> <td>Data in Column 3, Row 3</td> </tr> <tr> <td>Data in Column 1, Row 4</td> <td>Data in Column 2, Row 4</td> <td>Data in Column 3, Row 4</td> </tr> </table> </body> </html>

In this HTML5 Document example, we have created a table using the <table> tag that has 3 columns and 4 rows. Row 1 of the table is defined using the first <tr> tag. It has 3 table heading cells defined using the <th> tag. Rows 2 - 4 of the table use the <td> tag to define standard table cells.

HTML 4.01 Transitional Document

If you created a new web page in HTML 4.01 Transitional, your <table> tag might look like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>HTML 4.01 Transitional Example by www.techonthenet.com</title> </head> <body> <table> <tr> <th>Column 1 Heading</th> <th>Column 2 Heading</th> <th>Column 3 Heading</th> </tr> <tr> <td>Data in Column 1, Row 2</td> <td>Data in Column 2, Row 2</td> <td>Data in Column 3, Row 2</td> </tr> <tr> <td>Data in Column 1, Row 3</td> <td>Data in Column 2, Row 3</td> <td>Data in Column 3, Row 3</td> </tr> <tr> <td>Data in Column 1, Row 4</td> <td>Data in Column 2, Row 4</td> <td>Data in Column 3, Row 4</td> </tr> </table> </body> </html>

In this HTML 4.01 Transitional Document example, we have created a table using the <table> tag that has 3 columns and 4 rows. Row 1 of the table is defined using the first <tr> tag. It has 3 table heading cells defined using the <th> tag. Rows 2 - 4 of the table use the <td> tag to define standard table cells.

XHTML 1.0 Transitional Document

If you created a new web page in XHTML 1.0 Transitional, your <table> tag might look like this:

<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>XHMTL 1.0 Transitional Example by www.techonthenet.com</title> </head> <body> <table> <tr> <th>Column 1 Heading</th> <th>Column 2 Heading</th> <th>Column 3 Heading</th> </tr> <tr> <td>Data in Column 1, Row 2</td> <td>Data in Column 2, Row 2</td> <td>Data in Column 3, Row 2</td> </tr> <tr> <td>Data in Column 1, Row 3</td> <td>Data in Column 2, Row 3</td> <td>Data in Column 3, Row 3</td> </tr> <tr> <td>Data in Column 1, Row 4</td> <td>Data in Column 2, Row 4</td> <td>Data in Column 3, Row 4</td> </tr> </table> </body> </html>

In this XHTML 1.0 Transitional Document example, we have created a table using the <table> tag that has 3 columns and 4 rows. Row 1 of the table is defined using the first <tr> tag. It has 3 table heading cells defined using the <th> tag. Rows 2 - 4 of the table use the <td> tag to define standard table cells.

XHTML 1.0 Strict Document

If you created a new web page in XHTML 1.0 Strict, your <table> tag might look like this:

<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>XHTML 1.0 Strict Example by www.techonthenet.com</title> </head> <body> <table> <tr> <th>Column 1 Heading</th> <th>Column 2 Heading</th> <th>Column 3 Heading</th> </tr> <tr> <td>Data in Column 1, Row 2</td> <td>Data in Column 2, Row 2</td> <td>Data in Column 3, Row 2</td> </tr> <tr> <td>Data in Column 1, Row 3</td> <td>Data in Column 2, Row 3</td> <td>Data in Column 3, Row 3</td> </tr> <tr> <td>Data in Column 1, Row 4</td> <td>Data in Column 2, Row 4</td> <td>Data in Column 3, Row 4</td> </tr> </table> </body> </html>

In this XHTML 1.0 Strict Document example, we have created a table using the <table> tag that has 3 columns and 4 rows. Row 1 of the table is defined using the first <tr> tag. It has 3 table heading cells defined using the <th> tag. Rows 2 - 4 of the table use the <td> tag to define standard table cells.

XHTML 1.1 Document

If you created a new web page in XHTML 1.1, your <table> tag might look like this:

<!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>XHTML 1.1 Example by www.techonthenet.com</title> </head> <body> <table> <tr> <th>Column 1 Heading</th> <th>Column 2 Heading</th> <th>Column 3 Heading</th> </tr> <tr> <td>Data in Column 1, Row 2</td> <td>Data in Column 2, Row 2</td> <td>Data in Column 3, Row 2</td> </tr> <tr> <td>Data in Column 1, Row 3</td> <td>Data in Column 2, Row 3</td> <td>Data in Column 3, Row 3</td> </tr> <tr> <td>Data in Column 1, Row 4</td> <td>Data in Column 2, Row 4</td> <td>Data in Column 3, Row 4</td> </tr> </table> </body> </html>

In this XHTML 1.1 Document example, we have created a table using the <table> tag that has 3 columns and 4 rows. Row 1 of the table is defined using the first <tr> tag. It has 3 table heading cells defined using the <th> tag. Rows 2 - 4 of the table use the <td> tag to define standard table cells.

previousNEXT: <tr>next Share on:

Databases

MS Office

Web Development

Programming

More

clear filter down caret

HTML Elements

right caret

Deprecated HTML Elements

Home | About Us | Contact Us | Testimonials | Donate

While using this site, you agree to have read and accepted our Terms of Service and Privacy Policy.

Copyright © 2003-2026 TechOnTheNet.com. All rights reserved.