knowledgediarybd.com

Your Virtual Knowledge Campus







HTML Table Generation Tutorial and Example

HTML Table Generation Tutorial and Example

 

 

 

http://www.knowledgediarybd.comHTML Table is an another important element in web developing.HTML Table is a most easiest and interactive way to represent information or statistics of a specific subject.

HTML Tables  are defined with <table> & </table> tag.

Generally  A table is divided into headers (with the <th> tag) rows (with the <tr> tag),

and each row is divided into data cells (with the <td> tag). td means  “table data

and holds the content of a data cell.

A <td> tag can contain other tables,text, forms,links, images, lists etc.

Simple Table Example Code

<table border=”1″>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>

The result of the above Code is:

HTML Table With Headers Code

Header are defined with the <th> tag.

Most of the  browsers display the text between  <th> & </th > as centered and  bold .

HTML Table Code with header:

<table border=”1″>

<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>

<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>

<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>

</table>

The result of the above Code look like below:

Live Example of HTML Table:

<html>

<head>
<title> www.knowledgediarybd.com</title>
</head>

<body bgcolor=”#9966FF” style=”text-align:center”>

<table border=”1″>

<tr>
<th>SL</th>
<th>Bus</th>
<th>Car</th>
<th>Train</th>
</tr>

<tr>
<td>01</td>
<td>140</td>
<td>200</td>
<td>120</td>
</tr>

<tr>
<td>02</td>
<td>200</td>
<td>500</td>
<td>140</td>
</tr>

<tr>
<td>03</td>
<td>400</td>
<td>900</td>
<td>365</td>
</tr>

</table>

</body>
</html>

To see the live output of this above HTML Table Program. just copy and past on the HTML Editors

and save as it as “table .html “on your desktop and finally  click double click on the  table.html file.

Then the output look likes below:

HTML Table


Code Analysis:

In above code   we use <<table border=”1″>  here by border=”1″ a single line is used around table.We can also use border 2,3,4 etc.

<th></th> are used for creating table header and also used to do bold and center  of

the header text/content.

<tr></tr>  are used for creating each row and  <td></td> are used for creating each Cell.

<td></td> are used for writing table cell  data.

Even we can use table for creating navigation bar of a site.

Like:   <td> <a href=”www.knowledgediarybd.com”> knowledgediarybd</a> </td> or

          <th><a href=”www.knowledgediarybd.com””> knowledgediarybd</a>

</th>

Related Post:

1. List of Best HTML Editors

2. Introduction of HTML 5 and HTML.

3.HTML Basic or Heading paragraph Link and images

4.HTML Forms Design Or Building

5.HTML Elements Properties And Attributes

knowledgediarybd.com © 2017
shares