Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 (table row) element inside a structure.
Attributes
The HTML <tr> tag also supports the following additional attributes ?
| Attribute |
Value |
Description |
|---|---|---|
| Align |
right left center justify char |
Deprecated? Visual alignment. |
| bgcolor |
rgb(x,x,x) #hexcode colorname |
Deprecated? Specifies the background color of the table cell. |
| Char |
Character |
Deprecated? Specifies which character to align text on. Used when align = "char". |
| Charoff |
pixels or % |
Deprecated? Specifies an alignment offset (either in pixels or percentage value) against the first character as specified with the char attribute. Used when align = "char". |
|
Valign
|
top
middle
bottom
baseline
|
Deprecated? Vertical alignment |
Breakdown of the Structure
Use the <tr> tag to add a table row. The HTML <tr> tag is used for specifying a table row within a table.
Use the <table> tag to define a table. The HTML <table> tag is used to create a table for organizing data in rows and columns.
Use the <th> tag to define a table header cell. The HTML <th> tag is typically used to specify column or row headings, making the table more readable.
Use the <td> tag to define a standard table cell. The HTML <td> tag is used to add data within a table row.
Adding a New Table Row Manually
Example
You can try to run the following code to learn how to add a row in an HTML table ?
<!DOCTYPE html>
<html>
<head>
<title>HTML tr Tag</title>
</head>
<body>
<table border = "1">
<tr>
<th>Cricketers</th>
<th>Ranking</th>
</tr>
<tr>
<td>Virat Kohli</td>
<td>1</td>
</tr>
<tr>
<td>AB de Villiers</td>
<td>2</td>
</tr>
</table>
</body>
</html>
Output
Conclusion
Adding rows to an HTML table can be done manually using and or dynamically with JavaScript. The static approach is useful for fixed tables, while JavaScript is ideal for interactive applications where data needs to be updated dynamically.
796 Views
