What is HTML?
HTML, commonly known as Hypertext Markup Language is a scripting language which is used to create webpages in simple text. Like many other programming languages, HTML is not complex language. It is easy to understand and implement. Every webpage you make using the HTML is actually a HTML file with “.html” extension, which is made up of various HTML tags and content of the website. HTML tags are nothing but hidden keywords embedded within a webpage that define browsers how will the content and display of the webpage looks like. These keywords are so easy to understand and implement that you can easily grab a hold of them. You can experiment with various tags to get desired results. There is also a term “Attribute” associated with the tags. These tags allow you to define and customize the tags as per your needs. You could give those tags various attributes like- length, width, cell spacing, padding etc.
HTML is a formal recommendation by the World Wide Web Consortium (W3C) and is for the most part held fast to by the real programs, Microsoft's Internet Explorer and Netscape's Navigator, which likewise give some extra non-standard codes. The present rendition of HTML will be HTML 4.0. On the other hand, both Internet Explorer and Netscape actualize a few elements contrastingly and give non-standard enhancements. Web engineers utilizing the more propelled elements of HTML 4 may need to plan pages for both programs and convey the proper rendition to a client. Huge elements in HTML 4 are once in a while portrayed as a rule as dynamic HTML. What is now and again alluded to as HTML 5 is an extensible type of HTML called Extensible Hypertext Markup Language (XHTML).
When you compose a normal document utilizing a word processor like Microsoft Word/Office, your content is spared in a document with an exceptional arrangement. It has not just been spared as the series of words you wrote following the archive needs to save things like the textual style you picked, the extent of the content, which words are in striking, which italics, et cetera. The uncommon organization incorporates your words, as well as all these additional data so that whenever Word opens your report, it can show the archive with the accurate appearance you have made before.
In the same way, website pages are just series of words put in an uncommon arrangement that web programs have the capacity to show. While the arrangement of Word archives is basically called "Word configuration" (or "doc group"), freely talking, one may say that website pages are organized utilizing "HTML".
Importance of Tables
There are various purposes for which tables are used for in the HTML. The most obvious purpose is to arrange the information in an arranged format i.e table. It not only gives you an opportunity to create a page layout with the use of hidden tables. It is also a powerful tool using which you can divide the page into various sections. Almost all major sites on the web are using invisible tables to layout the pages.
- Powerful tool to arrange information
- It is used to divide webpage into sections
- Tables are also used to create menus
- Creating fast loading headers for the page.
- Adding interactive form fields.
Creating Tables in HTML
If you are just a beginner and planning to learn the nuances of HTML, then it is advisable to start with the basics. Once you get a hold of the basics, you can move on to undertake advanced complexities. In this tutorial, we will start with creating tables in HTML. There are many times, when you require creating tables in your webpage just to look it an improved look. By embedding this simple code into your, you can create table in your webpage.
<html>
<body>
<table style="width:100%">
<tr>
<td>Jack</td>
<td>James</td>
<td>50</td>
</tr>
<tr>
<td>Mitchell </td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>80</td>
</tr>
</table>
</body>
</html>
The output of the above code can be seen as:
Now, this was a simple table, in which we have not defined its borders, and table attributes. Let us consider another example, in which we will give this table borders.
<html>
<body>
<table border="1" style="width:100%">
<tr>
<td>Beans</td>
<td>Radish</td>
<td>Cabbage</td>
</tr>
<tr>
<td>Green</td>
<td>Blue</td>
<td>Red</td
</tr>
<tr>
<td>Banana</td>
<td>Orange</td>
<td>Apple</td>
</tr>
</table>
</body>
</html>
The output of the above HTML could be seen as:
How to Give Cell Spacing and Cell Padding
Cell Spacing is nothing, but the space within the cells. It gives table more organized and structured look. You can easily create spacing between the cells using this simple code:
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table cellspacing="10">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>Row 1</td>
<td>Row 2</td>
</tr>
</table>
</body>
</html>
The output of the above code could be seen as:
The cell padding attribute defines the space between the cell content and the cell wall.
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table cellpadding="20">
<tr>
<th> Column 1 </th>
<th> Column 2 </th>
</tr>
<tr>
<td> Row 1 </td>
<td> Row 2 </td>
</tr>
</table>
</body>
</html>
The output of the above code can be seen as:
Cell Alignment
The cell alignment attribute, aligns the content of the cell horizontally. There are various attributes available like-left, right, center, justify and char. You can choose the one, that perfectly meet your needs.
<html>
<head>
<style>
table, th, td { border: 1px solid black; }
</style>
</head>
<body>
<table style="width:100%">
<tr>
<th> Column 1 </th>
<th> What is </th>
</tr>
<tr>
<td> What is Your Age? </td>
<td align="center"> $100 </td>
</tr>
<tr>
<td> I am 5 Years Old </td>
<td align="center">Ok</td>
</tr>
</body>
</html>
The Output of the above code can be seen as:
How to Give Background Color to the Table?
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="yellow" bgcolor="pink">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">New York</td><td>London</td><td>Spain</td></tr>
<tr><td>Dubai</td></td><td>Vancover</td></tr>
<tr><td colspan="3">Russia</td></tr>
</table>
</body>
</html>
The output of the above code can be seen as:
Table Summary
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<table summary="Semester Marks ">
<tr>
<th>Semester</th>
<th>Marks</th>
</tr>
<tr>
<td>First</td>
<td>87</td>
</tr>
<tr>
<td>Second</td>
<td>80</td>
</tr>
</table>
</body>
</html>
The output of the above code can be seen as:
Images In Cells
You could also insert images inside the cells of the table by putting this simple code. You need to put this code in the cell where you want to insert a image. Using the align ta, you can specify the alignment of the image. And using “imgsrc”, specify the link and name of the name from where it is to be taken.
<td align = "center">
<imgsrc ="abc.jpg">
</td>
Framing Images
By using the table border tag, you can give frame to your images. Just embed this simple code to give frames to your images.
<table border="10" > <tr><td align="center"><img src="abc.jpg"></td></tr> </table>
Row or Coulmn Sum in HTML Table
Suppose we have the below code:
<table id= "OtherCosts" border= "1">
<tr>
<th> Receipt </th>
<th> Amount </th>
<th> Amount </th>
<th> Amount </th>
</tr>
<tr>
<td>Travel costs</td>
<td>272.97</td>
<td> 242.91</td>
<td> 379.02</td>
</tr>
<tr>
<td>Phone</td>
<td>164.60</td>
<td>4.40</td>
<td>45.45</td></tr>
<tr>
<td>Office costs</td>
<td>50.53</td>
<td>90.48</td>
<td>150.53</td>
</tr>
<tr>
<td>Insurances</td>
<td>100.66</td>
<td>190.66</td><td>500.26</td>
</tr>
<tr>
<td>Bank costs</td>
<td>28.00</td>
<td>872.10</td>
<td>28.00</td>
</tr>
<tr>
<td>Other cost</td>
<td>2864.72</td>
<td>28.00</td>
<td>600.00</td>
</tr>
</table>
And its output is:
And we have some two fields and a checkbox, which will be used for calculation in the table using the javascript. In this example we sum rows and coulms with the help of javascript and shown the result in the table.
The checkbox and the fields should shown like this:
If we are proving the values in the fields like Rows or columns to summed = 4 and excluded rows = 2 and when we press compute button then it will calculate the result like the below screenshot.
Comments
No comments have been made yet.
Please login to leave a comment. Login now