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