How to create table in web page or in websites using html(full explained-post 4) - by enggfact.blogspot.com

 HTML

BASICS OF HTML - FOR BEGINNERS  

HOW TO CREATE TABLE IN HTML

Hello geeks,

                    Welcome to the forth part of this series of HTML where we are learning basics of web development through HTML , CSS and JAVASCRIPT . As you know currently we are learning the basic tags of HTML and already learned about most of the basic tags if you don't learned till now go checkout our previous three posts on it then come here to learn it .

                                                                                                        Today , we are going to learn about the important tag of HTML which is a table tag . Here we covered whole important points of table tag by which you are able to design your web page more beautifully .

#WHAT IS TABLE TAG ?

Table tag is one of the most important tag in HTML due to it's usage in designing webpage and websites .Table is used when we have to show a large amount of objects in a simple manner without creating any mess in the webpage which can create a bad impact on the reader .

#FORMAT OF TABLE TAG ?

The format for the table is <table> ... </table> for creating any table . in between <table> and </table> we have to give the data which we have to show to the users .

                                                                                                                For showing data we have to use <tr> .... </tr> , now you will have a question what it is ? This is know as Table Row means this attribute is used to create horizontal/table row of the table.

                                                                                    For putting data in the rows we have to use <td> ... </td> attribute , this is know as table data tag for putting data in the table row .

                                                                                                                                 So after learning all these attributes lets learn about pure format of table tag -

<table>                                                     // table tag
<tr>                                                  // table row tag
<td>                                         // table data putting tag
</td>
</tr>
</table> 

Now lets write our first program to create table .

*In this screen shot you can able to see that we use border tag and write it like this(border=1) this is used to give structure to our table you can also use another number in place of 1 because this number is used to give the width of the lines which is gonna visible in your table.

 *here you can see that how our table is shown in the browser . If you want to set your table in the center of the screen then you have to use center tag in your html code.

*Here you can see that we use bgcolor tag in this code . This is used to put colour in your table to make it more attractive for the readers .
                                                              The syntax for the bgcolor tag is like bgcolor="color name" .

*Here we also used align tag . This tag is used to give alignment to our table like - center , left or right .

*This is how our table is visible after applying align and bgcolor tags .

*Here you can see that here we used bgcolor in tr tag(horizontal/table row) . By using this we can specify the color for any row and easily able to make it different from another rows of our table . This tag is used here to create attraction among the readers for our data .

*Here you can after applying bgcolor tag in first tr tag , the first row is in red color while the other rows are in yellow color .

*Here you can see we applied bgcolor tag in td tag (table data tag) also hence this shows we can apply bgcolor tag in different data or specific data which is different in our table and you also want to display it differently among the readers .

*Here you can see first block of second row is in green color because we applied bgcolor tag in this data and it it visible differently among all the data in the table .

*Here you can we applied width and height tags in table tag . These tags are used to change the size of our table if we set width and height as 100% . We have to keep in mind that we have to use numbers here in % form . If you use 100 in place of 100% then your code will not work in the browser .
              In the above screen shot you can see we have set width=100% and height=100% this will change the size of the table and now our table will spread in all over the screen.You can also use different percentages to show your table .

*Here you easily able to see that now our table is spread in all over the screen but not looking good so while using table tag you have to be aware of percentages which you gonna use in your html code .

*Here we use width=30% and height=30% to make it attractive .

*This is how our table will look like when we used width=30% and height=30% .

*You can see in the above screen shot that the data written in the blocks is not the center of the block of the table to make it in the center we have to use align tag in the tr tag .

*Here we used align tag is tr tag .

*Here you can see that our data written in the blocks of the table is now in the center position of the blocks .

So,This is more than enough for you to create table in web page . You know that table is mostly used in survey websites where we have to show large number of data in a simple manner . We think you are able to understand table tag if you understood it then feel free to follow our blog for more such informative blogs on computer science related topics .

If you have any query related to this post you can comment below or email me on - adv1491714@gmail.com .

Stay tuned for the next blog post where we will learn how to create form using html .

Thankyou!
keep learning .










subcribe this blog for more such interesting blogs.