Html Table Tag - Example, Attributes, Border - October 3rd, 2024

You must have seen plenty of web pages containing data in a tabular format. But the main question is how these tables are made and how data is inserted into them.

This is where HTML Table tag comes into action, this HTML tag is used to create tables in HTML web pages, making the web page attractive and more understandable. Confused about how to use this tag and what are table tag attributes in HTML? In this article today, we will be discussing the usage of HTML table tags, their attributes, syntax, border properties, and much more. So without wasting much of our time, let us read the article and understand it clearly.

Table of Contents

What Are HTML Tables

An HTML table is a way to organize data into rows and columns, making it easy to read and understand. Tables are helpful for showing both text and numbers in a clear format. They help you to quickly spot patterns or analyze connections between different pieces of data. Tables are also useful for creating databases, where information is stored in an organized way.

Syntax Of Creating Table In HTML

To create a table in an HTML web page, you generally use the <table> tag. This tag in HTML is important for defining the start and initial structure of your table. It is an element that comes with both an opening and a closing tag. When you write <table>, it signals the beginning of the table in your HTML code. Everything inside this tag, such as rows and columns, will be part of the table. The closing tag `</table>` marks the end of the table, ensuring that the browser understands where the table’s structure finishes. By using this tag, you can create a container that will hold the data arranged in a neat, organized format of rows and columns.

<Table> Tag In HTML With Example

Now, to understand the syntax of table tags in a more better way, let us look at the example below and see how it works.

<Table> Tag In HTML With Example

<!– index.html –>

<!DOCTYPE html>

<html>

<body>

<table>

<tr>

<th>First name</th>

</tr>

<tr>

<td>Sahil</td>

<td>Singh</td>

</tr>

<tr>

<td>Karan</td>

<td>Singh</td>

</tr>

<tr>

<td>Ishika</td>

<td>Sharma</td>

</tr>

</table>

</body>

</html>

In the HTML code written above, the tags `<th>`, `<tr>`, and `<td>` are used to define different parts of a table, let us understand each one of them with the help of paragraphs written below:

1. `<th>` (Table Header)

The `<th>` tag is used to create a header cell in a table. It defines the headings for each column in the table. In the example shown above, `<th>First name</th>`, `<th>Last name</th>`, and `<th>Age</th>` are header cells. These cells are usually displayed in bold text and are centered by default to make them stand out from the regular data cells.

2.`<tr>` (Table Row)

The `<tr>` tag is used to create a row in the table. It groups together a set of cells that should be displayed in the same row. In the code written above, each `<tr>` contains either header cells (`<th>`) or data cells (`<td>`).

3.`<td>` (Table Data)

The `<td>` tag is used to create a standard data cell within a table. These cells contain the actual data that you want to display. In an example shown above, `<td>Sahil</td>`, `<td>Singh</td>`, and `<td>21</td>` represent the first person’s – first name, last name, and age, respectively.

By using these tags together, it helps in structuring and displaying the information in a clear and organized way within an HTML table. The `<tr>` tag creates the rows, the `<th>` tag defines the headers, and the `<td>` tag contains the data for each cell under those headers.

Attributes Of An HTML Table Tag

Apart from the basic syntax, HTML table tag also contains multiple attributes that are used for making the page more attractive and visually appealing to the users. Let us understand the different types of attributes and their uses with the help of the table written below.

Attributes Of An HTML Table Tag
Attribute	Description	Syntax
border	Used for setting the width of the border around the table.	<table border=”1″> creates a table with borders.
cellpadding	Sets the desired amount of space between the cell content and its border.	<table cellpadding=”5″> adds space inside cells.
cellspacing	Sets the amount of space between individual table cells.	<table cellspacing=”5″> adds space between cells.
width	Used for setting the width of the table.	<table width=”100%”> makes the table 100% wide.
height	Specifies the height of the table.	<table height=”200px”> sets the table height.
align	Aligns the table to the left, center, or right of the page.	<table align=”center”> centers the table on the page.
bgcolor	Sets the background color of the table.	<table bgcolor=”#f0f0f0″> adds a light gray background to the table.
summary	Provides a brief description of the table’s content for accessibility.	<table summary=”This table lists employee details”> helps screen readers describe the table content.

Attributes Of HTML Table Tag Example

Now, after understanding the usage and syntax of all the attribute of an HTML table tag. Let us move further and understand it in a better way with the help of an example written below. Going through the example will provide you a greater insight about how to implement all of these attributes for creating a visually appealing table.

<!DOCTYPE html>

<html>

<head>

<title>HTML Table Example with Attributes</title>

</head>

<body>

<tr>

<th>Student Name</th>

<th>Grade</th>

</tr>

<tr>

<td>Sahil</td>

</tr>

<tr>

<td>Karan</td>

</tr>

<tr>

<td>Ishika</td>

</tr>

</table>

</body>

</html>

Output-

HTML Table Tag Example

Learn HTML With PW Skills

Enroll in our Classes for Full stack developer to learn everything related to the full stack development. This beginner-friendly job assistance program starts by covering the foundational topics first and then gradually moves toward the advanced ones.

The key features of this comprehensive course that make it a standout choice in the market include- live expert-led sessions, regular assignments, daily doubt sessions, 10+ practical projects, recognized certification after course completion, 100% Job assistance guarantee, and much more.

So what are you waiting for? Visit PWSkills.com today and book your seat now!

HTML Table Tag FAQs

What is the difference between , , and in an HTML table?

defines a header cell, usually bold and centered.

creates a row in the table.

defines a standard data cell within a row.

Can you merge cells in an HTML table?

Yes, you can merge cells in an HTML table using the colspan and rowspan attributes in the

tags to span multiple columns or rows

What is the summary attribute in an HTML table used for?

The summary attribute provides a brief description of the table’s content, which helps improve accessibility for users with screen readers. Although it's less common now, it can still be useful.