- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- 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>
Advertisements