HTML <table> Tag

The HTML <table> tag is used to create tables in web pages, allowing developers to present data in a structured, tabular format. Tables are essential for displaying information such as lists, comparison charts, and financial data in an organized way, making it easier for users to understand the content. The <table> tag, along with its related elements like <tr>, <th>, and <td>, enables developers to define rows and columns that make up a table.

Tables are a fundamental part of HTML, used extensively in both modern and legacy web applications to structure data. Although CSS Grid and Flexbox have taken over for web layouts, tables remain the go-to method for displaying data in a tabular format.

Syntax of the <table> Tag

html
<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
    <th>Heading 3</th>
  </tr>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
    <td>Row 1, Cell 3</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
    <td>Row 2, Cell 3</td>
  </tr>
</table>

In this structure:

  • <table> defines the table.
  • <tr> defines a row in the table.
  • <th> defines a header cell (bold and centered by default).
  • <td> defines a regular data cell.

Attributes of the <table> Tag

The <table> tag and its related elements support several attributes that help customize the appearance and behavior of tables.

AttributeDescription
borderSpecifies the border width of the table. Example: <table border ="1">
cellpaddingSpecifies the space between the cell content and its border. Example: 5px
cellspacingDefines the space between table cells. Example: 2px
widthSets the width of the table (percentage or pixels). Example: width= “100%”
alignAligns the table on the page. Values: left,center,right.
summaryProvides a summary of the table's purpose for screen readers.

Attributes for Related Tags:

  • <tr>: Supports global attributes such as class,id , and style.
  • <th> and <td>: Support alignment attributes like colspan,rowspan, align, and valign.

Examples of HTML <table> Tag

Example 1: Simple Table with Headers

html
<!DOCTYPE html>
<html>
<head>
    <title>Simple Table Example</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
        <tr>
            <td>Apples</td>
            <td>$2</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Bananas</td>
            <td>$1</td>
            <td>100</td>
        </tr>
    </table>
</body>
</html>

In this example, a simple table is created with three columns—Product, Price, and Quantity. The <th> elements are used for headers, and each data row is defined with <td> tags.

Example 2: Table with Colspan and Rowspan

html
<!DOCTYPE html>
<html>
<head>
    <title>Table with Colspan and Rowspan</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Category</th>
            <th colspan="2">Details</th>
        </tr>
        <tr>
            <td rowspan="2">Fruits</td>
            <td>Apples</td>
            <td>$2</td>
        </tr>
        <tr>
            <td>Bananas</td>
            <td>$1</td>
        </tr>
    </table>
</body>
</html>

In this example, the colspan attribute is used to merge two header cells under the "Details" column, while rowspan is applied to merge two rows under the "Fruits" category.

FAQs About HTML <table> Tag

Q1: What is the purpose of the HTML <table> tag?
A: The <table> tag is used to create tables that display data in rows and columns. It helps organize and present information in a structured, readable format.

Q2: Can CSS be used to style HTML tables?
A: Yes, CSS can be used to style HTML tables extensively, including setting borders, padding, background colors, and more. CSS enhances the visual presentation of tables.

Q3: What is the difference between <th> and <td>?
A: The <th> tag is used to define header cells in a table, typically bold and centered, while the <td> tag is used to define standard data cells.

Q4: What are colspan and rowspan attributes in the <table> tag?
A: The colspan attribute allows a cell to span across multiple columns, while rowspan allows a cell to span across multiple rows.

Q5: Are HTML tables still used for page layouts?
A: No, using tables for layout is considered outdated and should be replaced with modern CSS layout techniques like Flexbox or CSS Grid. Tables are now mainly used for displaying tabular data.

tools

HTML

Related Articles