Creating Tables in HTML | Video Tutorial

By | January 12, 2013
HTML tables
We are learning HTML on this blog and we’ve already talked about the basics and some tags of HTML. Now in today’s tutorial I’d like to teach you about HTML tables and its syntax. Tables are the core part of HTML programming and they are used mostly in web pages for tabler data such as displaying sheets, displaying downloading links and images galleries etc.
Using tables in HTML is a good practice for some sort of information which will look better if you use tables for them, but creating Website layouts using tables is not recommended by me, because that is old technique and now the web designing trend has changed.

Creating Tables in HTML is very easy and a separate tag is there for creating tables like below example:

<table></table>

The above tag is the starting and ending tag for a table in html. However, there are many sub-tags are used inside tables such as: <tr></tr> and inside <tr> we use <td></td> for entering records or data. Also <th></th> tag is used to define a header for a column. All elements for table tag are following:
  • <table></table>  main tag
  • <tbody></tbody> defines the body of the table
  • <tr></tr> defines a row in a table
  • <th></th> specially used for the header row and the text becomes bold in a column
  • <td></td> creates a column in a row
  • <caption></caption> is used for writing some text inside table
You can not write any other HTML tag inside table expect <td></td> tag. So be careful when adding other tags, only insert other tags inside <td></td> tag.
Now let’s have an example for a table:

<table width=’400′ align=’center’ border=’3′ cellpadding=’2′ cellspacing=’2′>
<tbody>
<tr>
<th>Name</th><th>Father</th><th>School</th><th>Address</th>
<tr>
<tr>
<td>Tommy</td><td>Jackson</td><td>Bright Future</td><td>H 3, 33, 22</td>
</tr>
</tbody>
</table>

Example above includes all attributes which are used in a table. The table tag has many attributes like for giving borders you add a border=” attribute, for width or height you use width=” and height=” attributes and cellspacing is for creating some space between cells. Also cellpadding is used for making some space between the corner of the cell and the data inside a cell.
in example above the <tr></tr> has used twice for creating a row inside a table and the <th></th> tag was used for giving the headings to the first row. So our actual data started from the second <tr></tr> where we inserted <td></td> tags inside the <tr></tr> tag. You can use many <td>s as you want inside a <tr> tag. And now the above coding will produce this result:
Name Father School Address
Tommy Jackson Bright Future H 3, 33, 22

That is a very simple which you can create by using simple HTML tags. However, if you want to go advance and want to create a fancy table only in HTML then you must watch video tutorial below to learn things more deeply about tables.

Video Tutorial for creating tables

Having watched the video, I hope you have understood all about HTML tables. And in our next tutorial about HTML we’ll be talking about Forms.
Stay tuned and take care of yourself and your family. 

One thought on “Creating Tables in HTML | Video Tutorial

Speak Your Mind