Apnapedia – اپنا پیڈیا Share Your Stories & Urdu News With The World!
Sometimes we need to put data in rows and column, so we create table using table tags for it. We can also put images, links and table with in the table by using table tags in html.
Table are also used to create the basic structure for website, people design very beautiful home pages of their website by using table and pictures, links with in rows and column.
Before creating table you should aware about these table tags that are basic part of each table
<table>:
It declares a table for your webpage
<tr>:
It determines row of your table
<th>:
It determines table heading with in cell
<td>:
It define the data within table cell
Let us start creation of table form basic using above tags
|
Name |
|
||||||
| 1343-343405
|
|
|
Code for this example:
<html> <head> <title> Tables in Hml</title> </head> <body> <table border="1px"> <tr> <th>Reg.No</th> <th>Name</th> <th>Smester</th> </tr> <tr> <td> 1343-343405</td> <td>Asghar Ali Khan</td> <td>Spring 2017 </td> </tr> </body> </html>
Now we expand this table by adding more data, it has three rows and column respectively
|
Name |
|
||||||
| 1343-343405
|
|
|
||||||
| 1343-343406
|
Laura Godin |
|
||||||
| 1343-343407
|
Stephan Hall |
|
Code this Example:
<html> <head> <title> Tables in Hml</title> </head> <body> <table border="1px"> <tr> <th>Reg.No</th> <th>Name</th> <th>Semester’</th> </tr> <tr> <td> 1343-343405</td> <td>Asghar Ali Khan</td> <td>Spring 2017 </td> </tr> <tr> <td> 1343-343406</td> <td>Laura Godin</td> <td>Spring 2017 </td> </tr> <tr> <td> 1343-343407</td> <td>Stephen Hall</td> <td>Spring 2017 </td> </tr> </table> </html
Table Attributes:
Table has many attributes that are used for different purposes such has, border, height, width, rowspan, colspan etc.
Lest discuss some important attribute that are used most of the time
Cellspacing=” ” :
This attribute used to set the space between cells.
Cellpadding= ” ” :
This attribute used to set the padding in cells
Height=” ” :
It defines the height of an table
Width= ” ” :
It define the width of your table.
Border: ” ” :
It define the border of a table , in table border is necessary to show lines.
Rowspan: ” ” :
Making a cell span to your defined rows, means you can merge two or more than rows.
Colspan: ” ” :
Making a cell span to your defined column, means you can merge two or more than two column.
Using Colspan & Rowspan:
We use colspan attribute if we want to merge two or more columns into a single column. Similary, we will use rowspan if we want to merge two or more rows in a single row.
| Column 1 | Column 2 | Column 3 |
| Row 1 Cell 1 | Row 1 Cell2 | Row 1 Cell 3 |
| Row 2 Cell2 | Row 2 Cell 3 | |
| Row 3 Cell 1 | ||
In above table you can see in column 1 we merged two rows similarly we merged three columns in Row3.
Code Example of above table:
<html> <head> <title>Rows and Colspan</title> </head> <body><h2> <u>My tables With Rows & Column Span!</u> </h2> <table border="1"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td rowspan="2">Row 1 Cell 1</td> <td>Row 1 Cell 2</td> <td>Row 1 Cell 3</td> </tr> <tr> <td>Row 2 Cell 2</td> <td>Row 2 Cell 3</td> </tr> <tr> <td colspan="3">Row 3 Cell 1</td> </tr> </table> </body> </html>
Nested Table in Html:
Nested table are use to create front page of website and structure, nested means table with in the table. Not only tables you can use almost all the tags inside table data tag <td>.
Code Example:
<html> <head> <title>HTML Nested Table</title> </head> <body> <b> Nested Table </b> <table border="1" width="100%"height="100%"> <tr> <td> <table border="1" width="100%" height="30%"> <tr> <th>Name</th> <th>Age</th> </tr> <tr> <td>Irfan Ali</td> <td>30</td> </tr> <tr> <td>Imran Ahmed</td> <td>24</td> </tr> <tr> <td>Khurram Khan</td> <td>26</td> </tr> </table> </td> </tr> </table> </body> </html>
If you have any question related to this post put in under comment section