- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create table rows & columns in HTML?
HTML tables allow us to arrange data into rows and columns on the web page.
We use the <table> tag, to create table in HTML. A table consist of rows and columns. Table heading, row and column and table data can be set using one or more <th>, <tr>, and <td> elements.
A table row is defined by the <tr> tag. For table rows and columns, we use <tr>,<td> tags respectively inside the <table>…</table> tag.
Example
Following is the example program to create table rows and column.
<!DOCTYPE html> <html> <style> table { border:1px solid black; padding: 10px; } th, td{ border:1px solid black; padding: 20px; } </style> <body> <h2>Tables in HTML</h2> <table style="width: 100%"> <tr> <th></th> <th></th> <th></th> </tr> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </table> </body> </html>
Example
Following is another example program to create table rows and column.
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid green; } </style> </head> <body> <h2>Adding table rows and colomns in HTML</h2> <table> <tr> <th>S.no</th> <th>Name</th> <th>Age</th> <th>Country</th> </tr> <tr> <td>1</td> <td>Kohli</td> <td>34</td> <td>India</td> </tr> <tr> <td>2</td> <td>Rabada</td> <td>29</td> <td>South Africa</td> </tr> <tr> <td>3</td> <td>Starc</td> <td>33</td> <td>Australia</td> </tr> </table> </body> </html>
Example
Following is one more example program to create table rows and column.
<!DOCTYPE html> <html> <head> <style> table, th, td { border: 1px solid green; } </style> </head> <body> <h2>Adding table rows and colomns in HTML</h2> <table style="width:80%"> <caption>Cricketers...</caption> <tr style="background-color: Mediumseagreen"> <th>S.no</th> <th>Name</th> <th>Age</th> <th>Country</th> </tr> <tr> <td>1</td> <td>Kohli</td> <td>34</td> <td>India</td> </tr> <tr> <td>2</td> <td>Rabada</td> <td>29</td> <td>South Africa</td> </tr> <tr style="background-color: Mediumseagreen"> <td>3</td> <td>Starc</td> <td>33</td> <td>Australia</td> </tr> </table> </body> </html>
- Related Articles
- How to merge table columns in HTML?
- How to include groups of table columns in HTML?
- How to create table footer in HTML?
- How to create table heading in HTML?
- In HTML how to create table header?
- How to create table header in HTML?
- How to create table border in HTML?
- How to layout table cells, rows, and columns with JavaScript?
- How to create a GridLayout with rows and columns in Java?
- HTML DOM Table rows Collection
- How to create conditions in a MySQL table with multiple columns?
- How do we include attributes for table columns in HTML?
- How to create a subset of rows or columns of a matrix in R?
- Create a table in HTML
- How to create a table TAB2 having same attributes & columns as for table TAB1

Advertisements