Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How do we add a table row in HTML?
In this article, we will learn to add a table row in HTML. Tables are a fundamental part of web development, used to display structured data in rows and columns. In HTML, you can add table rows using the <tr> (table row) element inside a <table> structure.
Syntax
Following is the syntax for adding a table row in HTML −
<table>
<tr>
<td>Cell content</td>
<td>Cell content</td>
</tr>
</table>
Basic Table Structure
Before adding rows, let's understand the basic HTML table structure −
-
<table>− Defines the entire table container -
<tr>− Defines a table row -
<th>− Defines a header cell (usually bold and centered) -
<td>− Defines a standard data cell
Example − Basic Table with Rows
Following example demonstrates how to create a simple table with multiple rows −
<!DOCTYPE html>
<html>
<head>
<title>Basic HTML Table</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Student Information</h2>
<table border="1" style="border-collapse: collapse; width: 100%;">
<tr>
<th style="padding: 8px; background-color: #f2f2f2;">Name</th>
<th style="padding: 8px; background-color: #f2f2f2;">Age</th>
<th style="padding: 8px; background-color: #f2f2f2;">Grade</th>
</tr>
<tr>
<td style="padding: 8px;">John Smith</td>
<td style="padding: 8px;">20</td>
<td style="padding: 8px;">A</td>
</tr>
<tr>
<td style="padding: 8px;">Emma Davis</td>
<td style="padding: 8px;">19</td>
<td style="padding: 8px;">B+</td>
</tr>
</table>
</body>
</html>
The output displays a formatted table with header row and data rows −
Student Information Name Age Grade John Smith 20 A Emma Davis 19 B+
Adding Multiple Rows
You can add as many rows as needed by repeating the <tr> element. Each row should contain the same number of cells to maintain table structure.
Example − Table with Multiple Data Rows
<!DOCTYPE html>
<html>
<head>
<title>Multiple Table Rows</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Cricket Players Ranking</h2>
<table border="1" style="border-collapse: collapse; width: 60%;">
<tr>
<th style="padding: 10px; background-color: #4CAF50; color: white;">Player</th>
<th style="padding: 10px; background-color: #4CAF50; color: white;">Ranking</th>
<th style="padding: 10px; background-color: #4CAF50; color: white;">Country</th>
</tr>
<tr>
<td style="padding: 10px;">Virat Kohli</td>
<td style="padding: 10px; text-align: center;">1</td>
<td style="padding: 10px;">India</td>
</tr>
<tr>
<td style="padding: 10px;">AB de Villiers</td>
<td style="padding: 10px; text-align: center;">2</td>
<td style="padding: 10px;">South Africa</td>
</tr>
<tr>
<td style="padding: 10px;">Babar Azam</td>
<td style="padding: 10px; text-align: center;">3</td>
<td style="padding: 10px;">Pakistan</td>
</tr>
</table>
</body>
</html>
This creates a well-formatted table with header styling and multiple data rows −
Cricket Players Ranking Player Ranking Country Virat Kohli 1 India AB de Villiers 2 South Africa Babar Azam 3 Pakistan
Adding Rows with Different Content Types
Table rows can contain various types of content including text, numbers, links, and even images. Each cell can be styled independently.
Example − Table with Mixed Content
<!DOCTYPE html>
<html>
<head>
<title>Table with Mixed Content</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Course Information</h2>
<table border="1" style="border-collapse: collapse; width: 80%;">
<tr>
<th style="padding: 8px; background-color: #e7f3ff;">Course</th>
<th style="padding: 8px; background-color: #e7f3ff;">Duration</th>
<th style="padding: 8px; background-color: #e7f3ff;">Status</th>
<th style="padding: 8px; background-color: #e7f3ff;">Action</th>
</tr>
<tr>
<td style="padding: 8px;"><b>HTML Basics</b></td>
<td style="padding: 8px; text-align: center;">4 weeks</td>
<td style="padding: 8px; color: green;">? Completed</td>
<td style="padding: 8px;"><a href="#">View Certificate</a></td>
</tr>
<tr>
<td style="padding: 8px;"><b>CSS Styling</b></td>
<td style="padding: 8px; text-align: center;">3 weeks</td>
<td style="padding: 8px; color: orange;">? In Progress</td>
<td style="padding: 8px;"><a href="#">Continue</a></td>
</tr>
<tr>
<td style="padding: 8px;"><b>JavaScript</b></td>
<td style="padding: 8px; text-align: center;">6 weeks</td>
<td style="padding: 8px; color: gray;">? Not Started</td>
<td style="padding: 8px;"><a href="#">Start Course</a></td>
</tr>
</table>
</body>
</html>
This example shows how rows can contain formatted text, links, and status indicators −
Course Information Course Duration Status Action HTML Basics 4 weeks ? Completed View Certificate CSS Styling 3 weeks ? In Progress Continue JavaScript 6 weeks ? Not Started Start Course
Adding Rows Dynamically with JavaScript
For interactive applications, you can add table rows dynamically using JavaScript. This is useful when data changes based on user input or server responses.
Example − Adding Rows with JavaScript
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Table Rows</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Dynamic Table Example</h2>
<button onclick="addRow()" style="margin-bottom: 10px; padding: 8px 15px;">Add New Row</button>
<table id="myTable" border="1" style="border-collapse: collapse; width: 60%;">
<tr>
<th style="padding: 8px; background-color: #f0f0f0;">Item</th>
<th style="padding: 8px; background-color: #f0f0f0;">Price</th>
<th style="padding: 8px; background-color: #f0f0f0;">Quantity</th>
</tr>
<tr>
<td style="padding: 8px;">Laptop</td>
<td style="padding: 8px;">$999</td>
<td style="padding: 8px;">5</td>
</tr>
</table>
<script>
let itemCount = 1;
function addRow() {
const table = document.getElementById("myTable");
const newRow = table.insertRow();
const items = ["Mouse", "Keyboard", "Monitor", "Phone", "Tablet"];
const prices = ["$25", "$75", "$300", "$699", "$399"];
const quantities = ["10", "8", "3", "12", "6"];
const randomItem = items[Math.floor(Math.random() * items.length)];
const randomPrice = prices[Math.floor(Math.random() * prices.length)];
const randomQty = quantities[Math.floor(Math.random() * quantities.length)];
newRow.innerHTML = `
<td style="padding: 8px;">${randomItem}</td>
<td style="padding: 8px;">${randomPrice}</td>
<td style="padding: 8px;">${randomQty}</td>
`;
}
</script>
</body>
</html>
Clicking the "Add New Row" button dynamically inserts new rows with random data into the table.
Table Row Attributes (Deprecated)
The HTML <tr> tag previously supported several attributes for styling, but these are now deprecated in favor of CSS −
| Attribute | Values | Description |
|---|---|---|
| align | left, center, right, justify | Deprecated − Text alignment within cells |
| bgcolor | color name, hex code, rgb() | Deprecated − Background color of the row |
| valign | top, middle, bottom, baseline | Deprecated − Vertical alignment of cell content |
Note − Instead of these deprecated attributes, use CSS properties like text-align, background-color, and vertical-align for styling table rows.
Best Practices for Table Rows
971 Views
