{"id":34,"date":"2018-07-26T05:00:48","date_gmt":"2018-07-26T05:00:48","guid":{"rendered":"http:\/\/csp12.epgpbooks.inflibnet.ac.in\/?post_type=chapter&p=34"},"modified":"2018-08-02T04:31:42","modified_gmt":"2018-08-02T04:31:42","slug":"html","status":"publish","type":"chapter","link":"https:\/\/ebooks.inflibnet.ac.in\/csp12\/chapter\/html\/","title":{"rendered":"HTML"},"content":{"raw":"
\r\n\r\n\u00a0 \u00a0 \u00a0Introduction<\/strong>\r\n\r\n \r\n

Tables provide a means of organizing the layout of data. A table is divided into rows and columns and these specify the cells of the table. Cells can contain text, images, links, other tables etc. The HTML tables allow web developers to arrange data like text, images, links, other tables, etc. into rows and columns of cells. Tables can also be used for organizing the layout of the web page itself. These HTML tables can be created using the <table><\/strong> tag in which the <tr><\/strong> tag is used to create table rows and <td><\/strong> tag is used to create data cells. In simple, we can understand that the HTML Table Element <table> represents data in two dimensions or more.<\/p>\r\n \r\n\r\nHTML Tables<\/strong>\r\n\r\n \r\n\r\nThe <TABLE><\/TABLE> element has four sub-elements:\r\n\r\n \r\n\r\n1. Table Row<TR><\/TR>.\r\n\r\n2. Table Header <THEAD><\/THEAD> and Table Footer <TFOOT><\/TFOOT>.\r\n\r\n3. Table Data <TD><\/TD>.\r\n\r\n4. Caption <CAPTION><\/CAPTION>.\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n

The Table rows can be grouped into a head, foot, and body sections using the THEAD, <\/a>TFOOT <\/a>and TBODY <\/a>elements, respectively. Head section also called the header cell is defined with a <thead> element that contains the header information such as column names.<\/p>\r\n \r\n

The <thead> tag must be used as a child of a <table> element, after any <caption>, and <colgroup> elements, and before any <tbody>, <tfoot>, and <tr> elements.<\/p>\r\n \r\n

The Foot section is defined with a <tfoot> element are the footer rows that appears at the bottom of the table. The purpose of this <thead> and <tfoot> elements are that when long tables are printed, the head and foot information may be repeated on each page that contains table data.<\/p>\r\n \r\n

The Table body is defined with a <tbody> element. Otherwise they are called as data cells defined with <td> element.We can use at most one <thead> or <tfoot> but we can use multiple <tbody> elements in a table.The caption tag is the descriptive title and used to provide a short description about the table's purpose or it can be used to name the table.<\/p>\r\n \r\n\r\nExample:<\/strong>\r\n\r\n \r\n\r\nThe anatomy of how a table can be created in HTML is shown in the below code.\r\n\r\n \r\n\r\n<table border=\u201c1\u201d><\/strong>\r\n\r\n<tr>\r\n\r\n<th> Column 1 header <\/th>\r\n\r\n<th> Column 2 header <\/th>\r\n\r\n<\/tr>\r\n\r\n<tr>\r\n\r\n<td> Row1, Col1 <\/td>\r\n\r\n<td> Row1, Col2 <\/td>\r\n\r\n<\/tr>\r\n\r\n<tr>\r\n\r\n<td> Row2, Col1 <\/td>\r\n\r\n<td> Row2, Col2 <\/td>\r\n\r\n<\/tr>\r\n\r\n<\/table>\r\n\r\n \r\n

In the above example the table is defined with the <table><\/strong> tag. Tables are divided into table rows<\/strong> with the <tr><\/strong> tag. Table rows are divided into table data<\/strong> with the <td><\/strong> tag. A table row can also be divided\u00a0into <\/span>table headings<\/strong> with the <\/span><th><\/strong> tag. By default, all major browsers display table headings as bold and centered:<\/span>We can also use <th><\/th> as <\/span>row headings<\/strong> as well as <\/span>column headings<\/strong>. One of the basic differences between <thead> and <th> is that <thead> is a block level element, whereas <th> is an inline-block. <th> also has a special attribute, scope so we can designate what it is a heading of, the column or the row.<\/span><\/p>\r\n \r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0 Tables Attributes<\/strong>\r\n\r\n \r\n

Some of the table attributes that can be used with the <table> element is given below:<\/p>\r\n \r\n

BGColor: <\/strong>Some browsers support background colors in a table.<\/p>\r\n \r\n

Width: <\/strong>We can specify the table width as an absolute number of pixels or a percentage of the document width. We can set the width for the table cells as well.<\/p>\r\n \r\n

Border: <\/strong>We can choose a numerical value for the border width, which specifies the border in pixels.<\/p>\r\n \r\n

CellSpacing: <\/strong>Cell Spacing represents the space between cells and is specified in pixels.<\/p>\r\n \r\n

CellPadding: <\/strong>Cell Padding is the space between the cell border and the cell contents and is specified in pixels.<\/p>\r\n \r\n

Align: <\/strong>Tables can have left, right, or center alignment.<\/p>\r\n \r\n

Background: <\/strong>Background Image, will be titled in IE3.0 and above. BorderColor, BorderColorDark.<\/p>\r\n \r\n\r\nExample1: HTML Table: table1.html<\/strong>\r\n\r\n \r\n\r\n<table border = \"1\" width = \"40%\"\r\n\r\nsummary = \"This table provides information about the price of fruit\"> <caption><strong>Price of Fruit<\/strong><\/caption>\r\n\r\n<thead>\r\n\r\n<tr>\r\n\r\n<th>Fruit<\/th>\r\n\r\n<th>Price<\/th>\r\n\r\n<\/tr>\r\n\r\n<\/thead>\r\n\r\n<tfoot>\r\n\r\n<tr>\r\n\r\n<th>Total<\/th>\r\n\r\n<th>$3.75<\/th>\r\n\r\n<\/tr>\r\n\r\n<\/tfoot>\r\n\r\n<tbody><\/span>\r\n\r\n<tr><\/span>\r\n\r\n<td>Apple<\/td><\/span>\r\n\r\n<td>$0.25<\/td><\/span>\r\n\r\n<\/tr><\/span>\r\n\r\n<tr><\/span>\r\n\r\n<td>Orange<\/td><\/span>\r\n\r\n<td>$0.50<\/td><\/span>\r\n\r\n<\/tr><\/span>\r\n\r\n<tr><\/span>\r\n\r\n<td>Banana<\/td><\/span>\r\n\r\n<td>$1.00<\/td><\/span>\r\n\r\n<\/tr><\/span>\r\n\r\n<tr><\/span>\r\n\r\n<td>Pineapple<\/td><\/span>\r\n\r\n<td>$2.00<\/td><\/span>\r\n\r\n<\/tr><\/span>\r\n\r\n<\/tbody><\/span>\r\n\r\n<\/table><\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n

The above code displays the table with a caption as \"Price of Fruit\". The table has a <thead> element and a <tfoot> element. The table body starts with a <tbody> element which holds the content or data of the table. The table body has four rows. Table attributes such as <border>, <width> and <summary> has been used in the example. The attribute <summary> is new in HTML5. The output of the above code is shown in the below Figure 5.1.<\/p>\r\n

\"\"<\/p>\r\n

Figure 5.1<\/strong><\/p>\r\n \r\n\r\nExample 2: HTML Table: table2.html<\/strong>\r\n\r\n \r\n\r\n<html>\r\n\r\n<head><title>Table Cells<\/title><\/head><\/span>\r\n\r\n<body><\/span>\r\n\r\n<table cellspacing=\"15\" cellpadding=\"0\"><\/span>\r\n\r\n<tr><td>First<\/td><\/span>\r\n\r\n<td>Second<\/td><\/tr><\/span>\r\n\r\n<\/table><\/span>\r\n\r\n<br\/><\/span>\r\n\r\n<table cellspacing=\"0\" cellpadding=\"10\"><\/span>\r\n\r\n<tr><td>First<\/td><td>Second<\/td><\/tr><\/span>\r\n\r\n<\/table><\/span>\r\n\r\n<\/body><\/span>\r\n\r\n<\/html><\/span>\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n

Example 2 explains about the table attributes cellspacing and cellpadding. The example specifies that there are two tables to differentiate and understand about cell spacing and cell padding. The first table has a cell spacing of 15 pixels that represents the space between cells. The second table has a cellpadding of 10 pixels which is the space between the cell border and the cell contents. The output of this HTML table is shown in the below Figure 5.2.<\/p>\r\n \r\n

\"\"<\/p>\r\n

Figure 5.2<\/strong><\/p>\r\n \r\n\r\nRows and Columns<\/strong>\r\n\r\n \r\n

Cells can span multiple columns and multiple rows with the colspan<\/strong> and rowspan<\/strong> attributes. In order to make a cell span more than one column we can use the colspan<\/strong> attribute and to make a cell span more than one row we can use the rowspan<\/strong> attribute.<\/p>\r\n \r\n

An example to show that how we use the colspan and rowspan attributes. The table is defined with three rows. The first row specifies the heading where the heading cell 'name' spans over two columns. In the second row, the data cell 'Fishing' spans over two rows. The output of the below code is shown in FIgure 5.3.<\/span><\/p>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 <\/strong>\r\n\r\nExample 3:<\/strong>\r\n\r\n \r\n\r\n<table border=\"1\">\r\n\r\n<tr>\r\n\r\n<th colspan=\"2\">Name<\/th><\/strong>\r\n\r\n<th>Course<\/th>\r\n\r\n<th>Year<\/th>\r\n\r\n<\/tr>\r\n\r\n<tr>\r\n\r\n<td>A B<\/td>\r\n\r\n<td>Morgan<\/td>\r\n\r\n<td rowspan=\"2\">Fishing<\/td><\/strong>\r\n\r\n<td>5<\/td>\r\n\r\n<\/tr>\r\n\r\n<tr>\r\n\r\n<td>D J<\/td>\r\n\r\n<td>Jones<\/td>\r\n\r\n<td>Sailing<\/td>\r\n\r\n<td>8<\/td> <\/tr> <tr> <\/table>\r\n\r\n \r\n

\"\"<\/p>\r\n

Figure 5.3<\/strong><\/p>\r\n \r\n\r\nExample 4:<\/strong>\r\n\r\n \r\n

The table is defined with four rows. In the first row, the heading cell 'name' spans over two columns and the heading cell 'course' and 'year' spans over two rows. The second row has the data cell 'last' and 'init'.The next two rows doesn't span over columns or rows. The output of the below code is shown in FIgure 5.4.<\/span><\/p>\r\n\r\n<\/div>\r\n

\r\n\r\n \r\n\r\n<table border=\"1\" align=\"center\">\r\n\r\n<tr>\r\n\r\n<th colspan=\"2\" width=\"60%\">Name<\/th>\r\n\r\n<th rowspan=\"2\">Course<\/th>\r\n\r\n<th rowspan=\"2\">Year<\/th>\r\n\r\n<\/tr>\r\n\r\n<tr>\r\n\r\n<th>Last<\/th>\r\n\r\n<th>Init.<\/th>\r\n\r\n<\/tr>\r\n\r\n<tr>\r\n\r\n<td>Morgan<\/td>\r\n\r\n<td>AB<\/td>\r\n\r\n<td>Fishing<\/td>\r\n\r\n<td align=\"center\">5<\/td>\r\n\r\n<\/tr>\r\n\r\n<!\u2013 etc -->\r\n

\"\"<\/p>\r\n

Figure 5.4<\/strong><\/p>\r\n \r\n\r\nIntroduction to Forms<\/strong>\r\n\r\n \r\n

An HTML form is an area of a document that contains normal content, markup, special elements called form elements or controls such as checkboxes, radio buttons, menus, text fields etc., and labels on those controls. Forms are used to create (rather primitive) GUIs on Web pages. Users generally use a form in a web page to send information to a web server or a mail server by entering text, selecting menu items, etc., for processing.<\/p>\r\n \r\n\r\n<form> is just another kind of HTML tag.The syntax to create a form is <form parameters<\/em><\/strong>> ...form elements...<\/em><\/strong> <\/form>\r\n\r\n \r\n

Form elements include: buttons, checkboxes, text fields, radio buttons, drop-down menus, etc. Other kinds of tags can be mixed in with the form elements.<\/span><\/p>\r\n \r\n

A form usually contains a <\/span>Submit button<\/strong> to send the information in the form elements to the server.<\/span>The form\u2019s parameters tell JavaScript how to send the information to the server. There are two different ways it could be sent to the server.<\/span><\/p>\r\n\r\n<\/div>\r\n

\r\n\r\n\u00a0 \u00a0Forms can also be used for other things, such as a GUI for simple programs\r\n\r\n \r\n

The <form> tag<\/strong><\/p>\r\n \r\n

The <form arguments<\/em><\/strong>> ... <\/form> tag encloses form elements and probably other elements as well.<\/p>\r\n

The arguments to form tell what to do with the user input. Below is the list of arguments that can be used with the <form> tag.<\/p>\r\n \r\n

\u2013 action=\"url<\/em><\/strong>\"(required)<\/p>\r\n

\u2022 Specifies where to send the data when the Submit button is clicked<\/p>\r\n

\u2013\u00a0 method=\"get\"\u00a0 (default)<\/p>\r\n

\u2022\u00a0 Form data is sent as a URL with ?form_data information appended to the end of the URL. This method can be used only if data is all ASCII and not more than 100 characters<\/p>\r\n

\u2013 method=\"post\"<\/p>\r\n

\u2022\u00a0 Form data is sent in the body of the URL request and cannot be bookmarked by most browsers<\/p>\r\n

\u2013\u00a0 target=\"target<\/em><\/strong>\"<\/p>\r\n

\u2022\u00a0 Specifies where to open the page sent as a result of the request. If<\/p>\r\n

'target<\/em>=<\/strong>_blank' means the page has to be opened in a new window. If 'target<\/em>=<\/strong> _top' means use the same window when the page is opened.<\/p>\r\n \r\n\r\nThe <input> tag<\/strong>\r\n\r\n \r\n\r\nMost, but not all, form elements use the input tag, with a type=\"...\" argument to tell which kind of element it is. The type can be text, checkbox, radio, password, hidden, submit, reset, button, file, or image.\r\n\r\n \r\n\r\nOther common input tag arguments include:\r\n