Learn HTML Tutorial 3

How To Create Table in HTML


Now we see how we create table in HTML.Table consist of opening and ending tags.Different attributes used in table and different element used between the tables.

<table></table> = This is the opening and ending tag of the table.
<table border = "1" height = "40%" width = "40%">

These are the attributes used in table height is used for vertical length and width is used for horiziantal lenght.
<tr></tr> = This element is used for creating rows in table.

rowspan = rowspan is a attribute used in <tr> for expand the row.

<th></th> = th element is used for column heading in table.

<td></td> = td is also used for column but these create normal column.

colspan = this is an attribute used for expand the column.

Now we see how we write he the code for making the table.

<table border = "1" width = "40px" height = "40px">

<tr>

<th>Frist Name</th>

<th>Last Name</th>

<td>Age</th>

</tr>

<tr>

<td>Aatif</td>

<td>Riaz</td>

<td>30</td>

</tr>

<tr>

<td>Kashif</td>

<td>Majeed</td>

<td>27</td>

</tr>

<tr>

<td>Mujahid</td>

<td>Nawas</td>

<td>24</td>

</tr>

</table>
Output
Frist Name Last Name Age
Aatif Riaz 30
Kashif Majeed 27
Mujahid Nawas 24
Now we see how use rowspan in table:

<table border = "1" >

<tr rowspan = "2">

<th>Frist Name</th>

<th>Last Name</th>

<th>Age</th>

</tr>



<tr>

<td>Aatif</td>

<td>Riaz</td>

<td rowspan = "3">30</td>

</tr>

<tr>

<td>Kashif</td>

<td>Majeed</td>

</tr>

<tr>

<td>Mujahid</td>

<td>Nawas</td>

</tr>

</table>
Output
Frist Name Last Name Age
Aatif Riaz 30
Kashif Majeed
Mujahid Nawas
Now we see how use colspan:

<table border = "1" >

<tr rowspan = "2">

<th>Frist Name</th>

<th>Last Name</th>

<th>Age</th>

</tr>



<tr>

<td>Aatif</td>

<td>Riaz</td>

<td>30</td>

</tr>

<tr>

<td>Kashif</td>

<td>Majeed</td>

<td>23</td>

</tr>

<tr>

<td colspan = "3">Mujahid</td>

</tr>

</table>

Output
Frist Name Last Name Age
Aatif Riaz 30
Kashif Majeed 23
Mujahid


Nest Lesson 
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment