0Introduction to HTML Tables
To use any data in a structured form you'll use table. By including tables in your webpage you can make it more structured and creative. To create tables in HTML you use <table> tag. There is a sub tag of this <table> tag which is known as <tr> table row tag. <tr> tag also has its sub tag which is called <td> table data tag.
Creating Tables in HTML
Any table is made by row and columns. So after <table> tag for creating row you use <tr> tag. The more you want to create rows the more you have to define <tr> tag. After creating rows columns were created in rows. The more you want create columns the more have to define <td> tag.
The example has been given below:
| <html> <head><title>table web page</title> </head> <body> <table border="1"> <tr> <td>First row first column</td> <td>First row second column</td> </tr> <tr> <td>Second row First column</td> <td>Second row Second column</td> </tr> </table> </body> </html> |
| First row first column | First row second column |
| Second row First column | Second row Second column |
One more thing you have remember when you'll not define the value of table by border attribute then table border will not show.
Creating Table Headings
If you want, you can create your heading in the first row of table. Heading is more bold than the other text of table. For example if you create a table which store the information of table, then you can create Name, Address, etc. for heading. <th> tag is used for creating heading. This is called table heading tag. In this tag whatever text you're using, it will show in the web page. This tag is used in the <tr> tag.
The example has been given below:
| <html> <head><title>Table Heading Tag</title> <.head> <body> <table border="1"> <tr> <th>Name</th> <th>Address</th> </tr> <tr> <td> Gaurav Rai </td> <td>India</td> </tr> </table> </body> </html> |
The code given above is generated the following output in the web page:
| Name | Address |
|---|---|
| Gaurav Rai | India |
Colspan Atttribute
You can divide any particular row of column in more than one column. For doing this you have to define colspan attribute. The column you define the colspan they will sorrounds as much space.
The has been given below:
| <html> <head><title>colspan attribute</title> </head> <body> <table border="1"> <tr> <th>Name</th> <th colspan="2"> Mobile No. </th> </tr> <tr> <td>Gaurav</td> <td>9540168751</td> <td>8506091548</td> </tr> <tr> <td>Prarreek</td> <td>8587078127</td> </tr> </table> </body> </html> |
It will give the following output:
| Name | Mobile No. | |
|---|---|---|
| Gaurav | 9540168751 | 8506091548 |
| Prarreek | 8587078127 | |
As you can see, Gaurav has two mobile number and Prateek has only one mobile number. If you normally create a table then you'll see the row of Prateek table got empty. So, the table will not looks good. This is a benefit of colspan attribute.
Rowspan Attribute
Rowspan is also like a colspan. you could define it in a <tr> or <td> tag. As much value you give in this attribute that row surrounds as it is value.
The example has been given below:
| <html> <head><title>Rowspan Attribute</title> </head> <body> <table border="1"> <tr> <th rowspan="2">Colors</th> <td>Red</td> <tr> <td>Lime</td> </tr> <tr> <th rowspan="2">Fruits</th> <td>Guava</td></tr> <tr> <td>Apple</td> </tr> </table> </body> </html> |
The output of the above has been given below:
| Colors | Red |
|---|---|
| Lime | |
| Fruits | Guava |
| Apple |
Naming The Table
You can give the name of table which is called caption. <caption> tag is used for this. It is defined after the <table> tag.
The example has been given below:
| <html> <head><title>Naming the Table</title> </head> <body> <table border="1"> <caption>Table Name</caption> <tr> <td>Gaurav Rai</td> <td>India</td> </tr> </table> </body> </html> |
The output of the above code is given below:
| Gaurav Rai | India |
