Tutorial-5 (Tables in HTML)

Welcome in Tutorial-5

HELLO Guys,as you know my purpose is to guide you from beginner to expert in html , CSS and JavaScript so keep learning with me you will find out all that you need in your Front-end web development career.

In previous Tutorail-4 (Navigation)we had learn about navigation that what is navigation,how can we add menu in our HTML website using nav bar,unordered lists, list items etc.In this tutorail I will tell you about Tables in HTML, that how can we create them using simple tags, As we know guys that tables are very important part of any program , in order to save our budget record, for showing results of our selling, and a lot more things , we can easily save this records in a simple way but when we save them in an order(table) it's easy for us to manage.
Let's read in details about Tables.

Section 1: Part 5

HTML Tables

Tables are basically a way to arrange our data in rows and columns, we commonly used tables to represent tabular form of data like lists of products etc. But here our question is that 

How can we arrange the data of our web in tabular form using HTML?

It's really very simple to make HTML Tables  Following are some tags that are required for making a table.

HTML Table Tags

• <table>        
• <th>
• <tr>
• <td>

The First <table> tag defines a table that means data will be formatted as a table and <tr> tag is used for rows and <td> tag for data we can add multiple rows and columns for our data representation by giving them size . The <td> tag defines a cell and with these cells we can create columns in our table row.Let's look into the image that how can we implement these tags in an HTML code.

In the above image we just created rows not cells, In <tr> tag I just wrote This is row one,two for your guidance ,that doesn't meant that we write anything between  <tr> tag for data writing we need <td> tag, means for cells we must need a <td> tag which is used for creation of columns in these rows, we will implement this <td> tag in <tr> tag, in following image, this code give a complete format of table with rows and columns.

In above code, you have seen that there are two rows <tr> elements, in which three cells <td> elements of each rows contain some data.The output of the above code is as follows.

Output:


This is a simple format of an HTML table ,there's no boundaries of table, remember in HTML we just create a structure not styling, these things(boundaries Styling) are related to CSS section of this tutorial.

Table Header <th>

Once we have created a row and columns , we noticed that there's a need of header ,means table header, for table heading we used a <th> tag which designate the headings of row and columns of cells,there is another tag which is known as <caption> tag used for Table Heading and we must write this after <table> tag.

But Guys be attentive in difference of these two tags , just remember the <th> tag is for rows and columns heading and <caption> is for whole table heading.

Just look into the code you can easily understand.

Output:
                        

Now from above code with output , I' m sure you can easily understand , in my point of view I think it's not difficult to build table in HTML , as compared to previous tags , table tags are max , but if you will practice for this, you not need to search on Google. For Today I think It's enough for you, go home and practice hard.

See you in the next tutorial!.

Tutorail-6(HTML Forms)