Table of contents

HTML <table> Tag

What is HTML <table> Tag?

The HTML table tag is used to create tables on a webpage. It helps organize data into rows and columns, making information easy to read and compare. Tables are widely used to display data such as product details, schedules, pricing lists, and structured content.

The HTML table tag is placed inside the body section of an HTML document. Each table is made up of table rows (tr), table headers (th), and table data cells (td). Using the HTML table tag correctly improves readability, accessibility, and SEO performance.

Syntax of the HTML <table> Tag

plaintext
<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

The table tag begins with <table> and ends with </table>.
Each table row starts with <tr> and ends with </tr>.
Table headers use <th> and regular data cells use <td>.

Examples of HTML <table> Tag

Example 1: Basic HTML Table

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<h2>Basic Table Example - Scholar247</h2>

<table border="1">
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>John</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Sarah</td>
    <td>22</td>
  </tr>
</table>

</body>
</html>

In this example, a simple table is created with two columns: Name and Age. Each row shows different data values. The border attribute adds visible borders around each cell.

Example 2: SEO Optimized Table with Headings

plaintext
<!DOCTYPE html>
<html lang="en">
<body>

<h2>SEO Optimized Pricing Table - Scholar247</h2>

<table border="1">
  <tr>
    <th>Service</th>
    <th>Price</th>
    <th>Duration</th>
  </tr>
  <tr>
    <td>Web Development</td>
    <td>$500</td>
    <td>2 Weeks</td>
  </tr>
  <tr>
    <td>SEO Optimization</td>
    <td>$300</td>
    <td>1 Week</td>
  </tr>
  <tr>
    <td>Content Writing</td>
    <td>$150</td>
    <td>5 Days</td>
  </tr>
</table>

</body>
</html>

This example includes descriptive headings and relevant keywords such as SEO Optimization and Web Development. It helps search engines understand the context of each service and improves the webpage’s SEO ranking.

Attributes of the HTML <table> Tag

Here are the commonly used attributes for the table tag:

• border: Defines the border width around the table.
• cellpadding: Sets the space between the cell content and its borders.
• cellspacing: Defines the space between table cells.
• width: Specifies the table width.
• align: Aligns the table to the left, right, or center.
• bgcolor: Adds a background color to the table.

Modern web design prefers using CSS for styling instead of these attributes, but they still help beginners understand basic formatting.

Best Practices for HTML <table> Tag

• Always use table headers (<th>) for column headings to improve accessibility.
• Add a caption tag (<caption>) to describe the table’s purpose for SEO.
• Use CSS for table styling instead of HTML attributes like border or bgcolor.
• Keep your table layout simple and responsive for mobile devices.
• Avoid using tables for page layout; use them only for displaying tabular data.
• Always include alt text or descriptive content if your table contains images.

FAQs About HTML <table> Tag

Q1: What is the main purpose of the HTML table tag?

The HTML table tag is used to display data in a structured format using rows and columns, helping organize information clearly for users.

Q2: Can I use a table inside another table?

Yes, you can nest one table inside another table by placing a new <table> tag inside a <td> cell. However, it should be used carefully to maintain readability.

Q3: Does the table tag support attributes?

Yes, attributes like border, cellpadding, cellspacing, and width can be used to style the table. However, modern web developers prefer CSS for cleaner code.

Q4: How can I make my table responsive for mobile devices?

You can make tables responsive using CSS properties like overflow-x: auto; or by using media queries to adjust layout for smaller screens.

Q5: Is the table tag important for SEO?

Yes, when used with proper headings, captions, and semantic structure, tables help search engines understand and categorize data better, improving SEO value.

HTML

Related Articles