how to create table in html

 

In this HTML Tutorials series ,  today we  are going to learn how to create table in html.

 

Check Previous Tutorials :

Basic HTML Tags 

how to create list in HTML

 

 

how to create table in html

how to create table in html

how to create table in html

So let start

A table represent information on web in grid format.  Example of table include student data , result and report . when we represent information in table.

table tag in html

opening <table> tag  and closing  </table> tag defines table structure . in this way we create table in html.

syntax:

<table> </table>

 

html tr  (table row )

html opening  <tr> tag and closing </tr> tag is used to create row in table ,

 in each row of table , you can create one or more than one <td> elements .

Syntax:

<table>

<tr> </tr>

</table>

 

html td (table data)

html td element is used to represent each cell of table , you can create html td element by opening <td> tag and closing </td> tag. You must use <td> element in table to represent presence of table , otherwise table will not render correctly in browser.

Syntax :

<table>

<tr> <td>Table Data</td></tr>

</table>

 

Html th (table heading)

Html th  <th>  tag  is used to represent heading for either row or column . th tag can be create by opening <th> tag and closing </th> tag.

<table>

<tr> <th>Heading </th></tr>

</table>

 

Table caption

You can also add caption in table by using caption <caption > opening tag and closing tag </caption>

Syntax:

<table>

<caption>Caption text</table>

<tr><th></th></tr>

<tr><td></td></tr>

</table>

 

Complete table code

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<table>
<caption> Student Table </table>
<tr>
 <th> Name </th>
 <th >Email</th>
<th >RollNo;</th>
</tr>
<tr>
<td>Ali</td>
 <td>[email protected]</td>
<td>1</td>
</tr> 
<tr>
<td>Asad</td>
<td>[email protected]</td>
<td>2</td>
 </tr>
</table>

</body>

</html>

when you will run this code you will see output like this

 

how to create table in html

how to create table in html

 

When you will run this code you will see output like this.

 

Table colspan

Span column attribute is used to span a column’s cell in more than in one column.

Span column attribute can be used to in <th> and <td> tag to make a cell span in more than one column .

Syntax:

<th colspan="2"> Name & Email</th>

<td colspan="2">Ali & [email protected]</td>

 

how to create table in html

how to create table in html

If you add this code in above example code , now you will see that result

Now notice that in table first two column in heading are span (merge )

And in below two column of td are span (merge ).

 

table rowspan

In similar fashion you can span rows in table like column , by using table rowspan attribute in <th> or <td> tag.  When you will use rowspan attribute in <th> or <td> tag , that particular rows will be span  (merges ).

Syntax :

<table border="1" width="400">
<caption>Student Table</caption>
 <tr>
 <th>Name:</th>
 <td>Sufyan Ali</td>
</tr>
 <tr>
<th rowspan="2">Email & Address</th>

 <td>[email protected]</td>
 </tr>
<tr>
<td>Punjab Pakistan</td>
 </tr>

</table>

 

how to create table in html

how to create table in html

See output and notice 2nd row in table (Name & Email ) is merge and  indicating  two row in table .

html table border:

Border attribute is use in opening <table>  tag to indicate the width of border in pixels.

Syntax:

<table border=”3”>

</table>

 

Width and Spacing in Table

The width attribute also use in opening <table> tag  and opening <th> & <td> tag to define width of table . however these are  old method  replaced by CSS, you should not use them in new website. We will learn them in CSS tutorials.

 

Summary :

In this tutorial you have learned about table

<table> tag is used to create table in website.

<tr> tag is used to create table row.

<th> and <td> tag are used to represent table cell.

You can span row and column in table by using rowpsan & colspan attribute.

 

check next Tutorial :

List in HTML

 

Leave a Reply

Your email address will not be published. Required fields are marked *