Saturday, 17 March 2018

practicing table formatting in html with coding and example

Practicing table formatting in html with coding and example

We are now revise what we learnt about HTML5. It would be a little confusing for the beginner, but we are trying not make it confusing. Here you would meet some new terms like table bgcolor, colspan, height and width of image etc. 

table bgcolor is the same as we earlier put in <body bgcolor="">. Here we are trying to do all in table that's why we are emphasizing <table bgcolor=""> etc.
  • You are now getting familiar to colspan attribute in table. colspan="whatever number" means you are merging all columns into one column i.e. here we are using three columns in the table. We need only one column for writing text, so we merged all the three columns in one column. If we don't merge it, both the columns would go outside from the rest of the table and the symmetry of the table would be dis-balanced. You can try without colspan and see the result in your web browser.
  • Next terms is align, you know there are left, center, right, top or bottom alignment are used. Just try to use right alignment in this table. You can change in your HTML5 Coding and see the result of alignment in your web browser.
  • Next term is used here is the height and width of the image, see HTML5 Coding written below and its result too. You are free to change increase or decrease the size of width and height of the image in your coding while practicing and see the result in your web browser.



table in HTML
table in HTML


<html>
<head>
<title>My Website</title>
</head>
<body>
<table bgcolor="pink">
<tr>
<td colspan="2" align="right">My Website</td>
<td><img src="girl_clip.png" width="50" height="20" /></td>
</tr>
<tr>
<td><a href="index.html">Home </a></td>
<td><a href="desc.html">Description</a></td>
<td><a href="otherlink.html">Other Link</a></td>
</tr>
<tr>
<td colspan="3">This is about our website.
We sell fruits and flower.</td>
</tr>
<tr>
<td><img src="app.png" width="150" height="100" /></td>
<td><img src="lotus.png" width="150" height="100"/></td>
<td><img src="plant.png" width="150" height="100"/></td>
</tr>
<tr align="center">
<td colspan="3">Your web address is www.jaangla.com Tel.:0000000 etc. etc.</td>
</tr>
<table>
</body>
</html>
  • Again remember, from where the tags are started and where these are closed should rightly be followed. 
  • Try to study previous chapter if you are not properly understand this chapter.
Please comment if any problem regarding HTML Programming till now.

No comments:

Post a Comment