You would possibly not care that I can inform you’re logged into GMail, but as a developer you will take this seriously as you can find out whether your website user uses GMail account or not? I will explain – Why!
Being a website programmer, you might love to know if your visitors are logged into GMail; with that knowledge you can offer them a email field in a “html form” automatically with “@gmail.com” as postfix. Perhaps you might want to make your current Facebook “like” buttons more prominent if you’re able to tell your current visitor is logged into Facebook at the moment?

Your login status!

Interesting?

Want to learn how this can be done? I am publishing a video very soon on this. Come back tomorrow.

Thanks!

The post Login detector! appeared first on Ankit Virparia.

Features:

– Subway Surfer Miami cracked and unlocked
– Unlimited Money
– Unlimited Save Me Keys
– Save Me Keys ALWAYS enabled in case you messed up
– Set save me key cost to 1
– All boards available – ALL as in every one known to exist
– All characters available

Installation Procedure(Phone must be rooted):

1. Download and install the Titanium backup app in your Android phone
2. Download the “Subway Surfer Miami cracked and unlocked” compressed file by clicking above “Download” button.
3. Import/Install the downloaded file using titanium backup import wizard.
4. Enjoy!

Overview:

DASH as fast as you can! DODGE the oncoming trains! Help Jake, Tricky & Fresh escape from the grumpy Inspector and his dog.

★ Grind trains with your cool crew!
★ Colorful and vivid HD graphics!
★ Hoverboard Surfing!
★ Paint powered jetpack!
★ Lightning fast swipe acrobatics!
★ Challenge and help your friends!

Join the most daring chase!

A Universal App with HD optimized graphics.

1.10.2
★ Follow the Subway Surfers World Tour to Miami
★ Grind trains in the neon lit Subway and beneath blooming cherry trees
★ Join the thrilling Weekly Hunt in Miami and compete for weekly prizes
★ Get charming Harumi for your character collection
★ Put your skills to the test with new challenging Missions

The post Subway Surfer Miami cracked and unlocked appeared first on Ankit Virparia.

• Explain the following HTTP command
  GET /index.html HTTP/1.0 (4 Marks)
• Write HTML tags to generate the following output. (3 Marks)
  

  Position	Name	CIty
  Sales Manager	I. Hawthron Shield II. Green Sheild	A. UK B. Netherland

• How can a browser be stopped from caching a page? (2 Marks)
• How Divide and Pound symbol can be put on HTML document? (2 Marks)
• Show the use of inline frame in XHTML document. (3 Marks)
• Explain the following HTML tags. (4 Marks)
  a. <dl> </dl>
  b. <input type=”file”/>
• Answer the following with respect to web design. (7 Marks)
  1. Bowser compatibility issue and its possible solution.
  2. What is navigation? Discuss the characteristics of effective navigation.
• What is an HTML form? Discuss the different form attributes and design
  a simple form to register for new semester. (7 Marks)
• Explain following terms with example. (4 Marks)
  <optgroup>, <span>

CSS

• Write the following styles in separate CSS file and also show how to link this CSS file in HTML file and show use of styles. (7 Marks)
  (i) The headings should have normal font style and font’s size should be 120%
  (ii) Define a class arial for paragraph which defines font family
  arial and font style bold.
  (iii) Apply a background color yellow and apply a
  background image “browntile.jpg”
• What is the difference between class and id? How can a style rule be defined with an id redheading that gives red color to heading h1
  with text of heading right aligned?What would be the output of
  the following code in relation tostyle defined in this problem? (7 Marks)
  <h2 id=”redheading”> This is red heading</h2>
  <p id=”redheading”> This is red heading</p>
  <h1 id=”redheading”> This is red heading</h1>
• What is CSS? Explain different ways to write the CSS and show the
  importance of “id” and “class” in CSS. (7 Marks)
• Define CSS. Enlist and explain methods of using CSS in web page.
  Specify the CSS to provide; link: after visited blue color and before
  visited red color, table with odd rows white and even rows blue color. (7 Marks)
• Explain CSS with all types. Explain BOX MODEL. (7 Marks)
• Write down HTML/CSS code to create table with 5 rows and 3 columns. Even no. of rows display in green color and odd no.of rows display in
  yellow color. (7 Marks)

JavaScript

• Write a JAVAScript to print characters of a string at odd positions.(for example for the string India, I, d and a should get printed). (4 Marks)
• Write a JAVAScript to take2 digit number and then separate these 2 digits, then multiply first digit by itself for second digit times.( for example, 23 should be separated as 2 and 3. 2 should multiply with itself 3 times). (3 Marks)
• Explain document object in JavaScript. (3 Marks)
• How user defined objects are created in JAVAScript? How a
  constructor can be used to populate data in the object? (7 Marks)
• Show the use of events to change background color with DHTML. If mouse button is pressed, background color
  should be red. If mouse button is released up, background color should be yellow (3 Marks)
• Design an login form using HTML and JavaScript with following
  validations on password field : minimum length 8 characters, it should
  have some special character (7 Marks)
• Why do you need validation? Show the use of regular expression in
  JavaScript to validate the email address with example. (7 Marks)
• What are JavaScript objects? List the important built-in objects. How can
  you write your own object? (7 Marks)
• Explain the event handling in JavaScript with simple example. (3 Marks)
• Differentiate between HTML and XHTML. Write XHTML to generate table having following structure: (3 Marks)
  

  First	Second	Third
  Computer	Civil
  Result		:

• Explain DOM structure of HTML. Write using JavaScript: how to know which mouse button was clicked, number of elements in form, and write
  hello world. (7 Marks)
• Define DHTML. Explain onLoad, onBlur, image preloading, change
  image size, mouse curser position (7 Marks)
• Differentiate between server side and client side scripting languages.
  Write HTML and JavaScript to take input for loginname, password,
  birthdate, email address, phone no. and validate them. (7 Marks)
• What are differences between client side and server side scripting
  language? Write down java script code to check mobile number ( mobile
  number should start with 9 or 8) and mail id(check @ and .). (7 Marks)
• Write down java script code to validate user name and password
  (password length must in between 6 to 12 characters. User name should
  not start with _, @, or any number, both are not blank). (7 Marks)

XML, XSLT, XSL, XHTML

• Explain the document structure of XHTML document (4 Marks)
• Explain the use of XSL Elements value-of, for-each, sort with example. (7 Marks)
• Explain the two ways in which XML parser checks whether a
  document follows the expected order and structure. (7 Marks)
• Give the document structure for the XHML document and give the
  characteristics which differentiate it from HTML (7 Marks)
• What is DTD? Give and explain the sample DTD. (4 Marks)
• XSL transformation (7 Marks)
• Compare and contrast between HTML and XML. Write any XML
  document and DTD to describe itsstructure including elements,
  attributes and entities. (7 Marks)
• Explain XSL and XSLT using example. (7 Marks)
• Explain importance of DOCUMENT_ROOT and specify the same for
  apache web server. Specify the name and path for configuration file,
  error log file, access log file of apache. How to change the default file
  type being responded by web server. Define dynamic IP. Consider all in
  the question w.r.to Unix/Linux. (7 Marks)
• Generate XML file from below code: (4 Marks)
  <!DOCTYPE NEWSPAPER [
  <!ELEMENT NEWS(ARTICLE+)>
  <!ELEMENT ARTICLE(HEADLINE, BODY, NOTES)>
  <!ELEMENT HEADLINE(#PCDATA)>
  <!ELEMENT BODY(#PCDATA)>
  <!ELEMENT NOTES(#PCDATA)>
  <!ATTLIST ARTICLE AUTHOR CDATA #REQUIRED>
  <!ATTLIST ARTICLE EDITOR CDATA #IMPLIED>
• Explain following terms: <xs: sequence>, <value-of>, <for-each> (3 Marks)
• What is XML ELEMENT and XML Schema? Explain CDATA and PCDATA with example. (7 Marks)

PHP

• Write modules using HTML and PHP to store information of employee (employee id, job title, years of experience) in an array.
  And output the data to a web page by arranging the employees in
  ascending order of experience. (7 Marks)
• Create a database called country and create table called city having fields (cityname, area, population)using PHP commands. Create an HTML form to get the city data and write a script to insert that data into the table. (7 Marks)
• Write PHP programs to (7 Marks)
  1. To print whether current year is leap year or not.
  2. To print whether given number is odd or even.
• Write PHP program to print first 10 Fibonacci numbers.
• What are the different types of arrays in PHP? Explain with example to
  process the arrays in PHP. (7 Marks)
• What are cookies? Explain the cookies handling in PHP with proper example. (7 Marks)
• Explain the following with respect to PHP. (7 Marks)
  1. Sending an email
  2. String processing
• How can you connect to database in PHP? Show the simple database
  operation using PHP with proper example. (7 Marks)
• Explain different ways to pass information from one web page to other(s). Write a PHP program to explain any two ways. (7 Marks)
• Write a note on server side include. Write a PHP program to
  demonstrate the same. (7 Marks)
• Write a PHP program to parse and validate XML file using DTD (7 Marks)
• Write a PHP program to create MySQL database and table; insert,
  retrieve data from table, alter the table to add a column and add data in
  that new column (7 Marks)
• Explain need of URL redirection. Write the same in PHP, HTML and JavaScript. (7 Marks)
• Explain variable function and magic methods using PHP program. (7 Marks)
• How do you create cookie in PHP? Give difference between session and cookie with example. (7 Marks)
• What’s myadmin and database bug. What’s function in PHP? Explain types of function with example. (7 Marks)
• What’s PHP? Write down source code to create database and retrieve data with connection of PHP. (7 Marks)
• How do you connect to server with PHP? Explain withexample. (7 Marks)
• What are basic commands of PHP? Explain with example. (7 Marks)

Other

• Explain the architecture of the browser. (3 Marks)
• What role does the following parameter play in web site design issues? (4 Marks)
  a. Bandwidth and cache
  b. sitemap
• Explain RSS <item> elements with example. (7 Marks)
• What is a blog? (4 Marks)
• What are Web feeds? (3 Marks)
• Explain elements of SOAP with XML (7 Marks)
• What is stored in Content-Type header for a SOAP request and response? (4 Marks)
• What is the need for web service? (3 Marks)
• What do you mean by planning a website? Discuss about the objectives
  and goals, and target audience in detail with proper example. (7 Marks)
• How do you identify the contents for your website? How do you organize
  them for easy and quick access? Discuss with some real example. (7 Marks)
• Web feeds (3 Marks)
• Enlist and explain the website design principles. (7 Marks)
• Specify port numbers for httpd and mysqld services. (1 Mark)
• Explain need and working of web services with diagram. (7 Marks)
• Explain web feed and blogs with their importance and in specific
  situation where they should be used. (7 Marks)
• Explain the settings required for apache web server and PHP to run PHP programs. Mention how to do the following: consider all the questions
  w.r.to Unix/Linux. (7 Marks)
  – Start mysqld and apache services and how to check status.
  – Take backup of mysql database tables and how to restore them.
  – How logging of web server users.
• Explain following terms: URI, Web browser, HTTP (3 Marks)
• Give the answer of following question. (7 Marks)
  i) Justify it:” HTTP is called as stateless protocol”.
  ii) How can you open a link in a new browser window?
  iii) What’s the correct syntax for referring to an external script called
  “abs.js”?
  1) <script href=”abc.js”>
  2) <script src=”abc.js”>
  3) <script target=”abc.js”>
  iv) What is difference between Java script and JAVA?
  v) Give difference between DTD and XML schema.
  vi) Justify it: “Java script is used in validation techniques”.
  vii) Which file can be configured for Apache Web Server?
• What’s contribution of SOAP, Web feeds and BLOGS toweb services? What is aggregation in web services? (7 Marks)
• What’s SOAP? Explain structure of SOAP. (7 Marks)
• Explain Web server. Give difference between IIS and Apache Web Server? Write down only steps of UNIX/LINUX web server. (7 Marks)
  What is the relation ship among SOAP, XML, and HTTP? Explain with example (7 Marks)

The post GTU Question Papers – Web Application Development appeared first on Ankit Virparia.

<html >
<head>
<title>Nested table structure</title>
</head>
<body>
	<table align="center" border="1px" width="900px">
	<tr height="150px">
	<td>
	<table border="1px" width="100%" height="100%">
	<tr>
	<td rowspan="2" width="100px"> 1 </td>
<td colspan="2"> 2 </td>
</tr>
<tr>
	<td> 3 </td>
<td> 4 </td>
</tr>
</table>
</td>
</tr>
<tr height="100px">
	<td> 5 </td>
</tr>
<tr height="150px">
	<td>
	<table border="1px" width="100%" height="100%">
	<tr>
	<td width="300px"> 6 </td>
<td width="300px"> 7 </td>
<td width="300px"> 8 </td>
</tr>
</table>
</td>
</tr>
<tr height="450px">
	<td>
	<table border="1px" width="100%" height="100%">
	<tr>
	<td width="800px" height="200px"> 9 </td>
<td width="100px" rowspan="2"> 10 </td>
</tr>
<tr>
	<td>
	<table width="100%" height="100%" border="1px">
	<tr>
	<td width="50%" rowspan="3"> 11 </td>
<td colspan="2"> 12 </td>
</tr>
<tr>
	<td rowspan="2"> 13 </td>
<td> 14 </td>
</tr>
<tr>
	<td> 15 </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr height="50px">
	<td> 16 </td>
</tr>
</table>
</body>
</html>

Output:

The post Nested table structure. appeared first on Ankit Virparia.

<html>
<head>
<title>Div based layout example</title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:100px; height:100px; background-color:red; float:left;">
	Layer 1
</div>
<div style="width:800px; height:100px; background-color:green; float:left;">
	Layer 2
</div>
<div style="width:900px; height:200px; background-color:yellow; clear:left;">
	Layer 3
</div>
<div style="width:700px; height:500px; background-color:blue; float:left;">
	Layer 4
</div>
<div style="width:200px; height:500px; background-color:#9900CC; float:left;">
	Layer 5
</div>
<div style="width:900px; height:200px; background-color:#39C; clear:left;">
	Layer 6
</div>
</div>
</body>
</html>

Output:

<html>
<head>
<title>Div based layout< example/title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:100px; height:150px; background-color:red; float:left;">
	Layer 1
</div>
<div style="width:800px; height:150px; background-color:green; float:left;">
	Layer 2
</div>
<div style="width:900px; height:100px; background-color:yellow; clear:left;">
	Layer 3
</div>
<div style="width:300px; height:200px; background-color:blue; float:left;">
	Layer 4
</div>
<div style="width:300px; height:200px; background-color:#666666; float:left;">
	Layer 5
</div>
<div style="width:300px; height:200px; background-color:#CC99CC; float:left;">
	Layer 6
</div>
<div style="width:700px; height:500px; background-color:#00FF99; float:left;">
	Layer 7
</div>
<div style="width:200px; height:500px; background-color:olive; float:left;">
	Layer 8
</div>
<div style="width:900px; height:100px; background-color:#39C; clear:left;">
	Layer 9
</div>
</div>
</body>
</html>

Output:

The post Div based layout example appeared first on Ankit Virparia.

<html>
<head>
<title>DIV based website structure</title>
</head>
<body>
<div style="width:900px; background-color:black; "> 
<div style="width:900px; height:100px; background-color:red;">
Layer 1
</div>
<div style="width:100px; height:700px; background-color:green;">
Layer 2
</div>
<div style="width:800px; height:700px; background-color:yellow;">
Layer 3
</div>
<div style="width:900px; height:100px; background-color:blue;">
Layer 4
</div>
</div>
</body>
</html>

Output of above code is given below.

Unlike table there are no rows and no columns. So each block created by <div> tag will be displayed one below the other. To create the desired layout we need to use two properties of CSS know as float and clear.
Floating creates layers. When we are considering relative positioning of layers then there are 3 layers : base, float:left and float:right. When we give float:left to a layer the base layer will be overlapped by the contents of the left floating layer. In the above code we will now give float:left to Layer 2 and Layer 3.

<html>
<head>
<title>DIV based website structure</title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:900px; height:100px; background-color:red;">
	Layer 1
</div>
<div style="width:100px; height:700px; background-color:green;float:left;">
	Layer 2
</div>
<div style="width:800px; height:700px; background-color:yellow;float:left;">
	Layer 3
</div>
<div style="width:900px; height:100px; background-color:blue;">
	Layer 4
</div>
</div>
</body>
</html>

Output:

But now Layer 4 is not visible. Layer 4 is displayed below Layer 2 and Layer 3 as it will not wait till floating is over. If we want Layer 4 to wait till floating of previous layers to complete and then display, we need to use clear property of CSS. It has three values : left, right and both. Clear:left will wait for floating to get over and then display.

<html>
<head>
<title>DIV based website structure</title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:900px; height:100px; background-color:red;">
	Layer 1
</div>
<div style="width:100px; height:700px; background-color:green;float:left;">
	Layer 2
</div>
<div style="width:800px; height:700px; background-color:yellow;float:left;">
	Layer 3
</div>
<div style="width:900px; height:100px; background-color:blue; clear:left;">
	Layer 4
</div>
</div>
</body>
</html>

Output:

Let us consider a variation in the above code. We now change the width of Layer 3 from 800px to 600px.

<html>
<head>
<title>DIV based website structure</title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:900px; height:100px; background-color:red;">
	Layer 1
</div>
<div style="width:100px; height:700px; background-color:green;float:left;">
	Layer 2
</div>
<div style="width:600px; height:700px; background-color:yellow;float:left;">
	Layer 3
</div>
<div style="width:900px; height:100px; background-color:blue; clear:left;">
	Layer 4
</div>
</div>
</body>
</html>

As we have reduced the width of Layer 3 now base layer is visible. We now give float:right to Layer 3. As a result Layer 3 will be floated to the right.

<html>
<head>
<title>DIV based website structure</title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:900px; height:100px; background-color:red;">
	Layer 1
</div>
<div style="width:100px; height:700px; background-color:green;float:left;">
	Layer 2
</div>
<div style="width:600px; height:700px; background-color:yellow;float:right;">
	Layer 3
</div>
<div style="width:900px; height:100px; background-color:blue; clear:left;">
	Layer 4
</div>
</div>
</body>
</html>

Output:

The base layer is now visible in between Layer 2 and Layer 3. Another variation is to decrease height of Layer 2 from 700px to 500px.

<html>
<head>
<title>DIV based website structure</title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:900px; height:100px; background-color:red;">
	Layer 1
</div>
<div style="width:100px; height:500px; background-color:green;float:left;">
	Layer 2
</div>
<div style="width:600px; height:700px; background-color:yellow;float:right;">
	Layer 3
</div>
<div style="width:900px; height:100px; background-color:blue; clear:left;">
	Layer 4
</div>
</div>
</body>
</html>

Output:

As Layer 4 will only wait for left floating therefore once left floating of Layer 2 is over immediately Layer 4 is attached below it. Layer 4 will not wait for Layer 3 as it is floated right. We have to set clear:both so that Layer 4 will wait till both the layers have completed floating.

<html>
<head>
<title>DIV based website structure</title>
</head>
<body>
	<div style="width:900px; background-color:black; ">	
<div style="width:900px; height:100px; background-color:red;">
	Layer 1
</div>
<div style="width:100px; height:500px; background-color:green;float:left;">
	Layer 2
</div>
<div style="width:600px; height:700px; background-color:yellow;float:right;">
	Layer 3
</div>
<div style="width:900px; height:100px; background-color:blue; clear:both;">
	Layer 4
</div>
</div>
</body>
</html>

Output:

The post DIV based website structure appeared first on Ankit Virparia.

Difference between <div> and <table> based layout

By default when we write a div tag it will not have any border which can separate one block from the other. Also the browser will allocate space according to the content of div.

In order to create a layout using html div tag we need to make use of CSS (Cascading Style Sheet) to assign width and height. We will make use of an inline CSS for controlling div alignments. For further reference on CSS refer article – How to write a CSS?

Consider the below given program to create a div having the following CSS properties : width, height, margin, background-color.

 <div style="width:450px; margin:0px auto; height:100px; background-color:red;">
This is a div.
</div>

Output:

The post HTML div tag appeared first on Ankit Virparia.

Layout – 1

<table border="1px" align="center" width="900px">
<tr height="100px">
<td width="200px"> 1 </td>
<td> 2 </td>
</tr>
<tr height="50px">
<td colspan="2">3</td>
</tr>
<tr height="400px">
<td width="200px">4</td>
<td>5</td>
</tr>
<tr height="100px">
<td colspan="2">5</td>
</tr>
</table>

Output:

• Above layout consist of four rows and two columns.

Layout – 2

<table border="1px" align="center" width="900px">
<tr height="100px">
<td width="200px"> 1 </td>
<td colspan="2"> 2 </td>
</tr>
<tr height="50px">
<td colspan="3">3</td>
</tr>
<tr height="400px">
<td colspan="2">4</td>
<td width="200px">5</td>
</tr>
<tr height="100px">
<td colspan="3">5</td>
</tr>
</table>

Output:

Layout – 3

<table border="1px" align="center" width="900px">
<tr height="100px">
<td width="200px"> 1 </td>
<td colspan="4"> 2 </td>
</tr>
<tr height="50px">
<td colspan="5"> 3 </td>
</tr>
<tr height="200px">
<td colspan="2"> 4 </td>
<td width="300px"> 5 </td>
<td colspan="2"> 6 </td>
</tr>
<tr height="400px">
<td colspan="4"> 7 </td>
<td width="200px"> 8 </td>
</tr>
<tr>
<td colspan="5"> 9 </td>
</tr>
</table>

Output:

Above layout consist of 5 columns and 5 rows. We can assign width attribute to cell 1, cell 5 and cell 8 as these are the only cells which do not merge more than one cell.

Rules to follow while designing Table based website structure having multi browser compatibility

• We should not assign width to a cell whose colspan attribute is assigned
• We should not assign height to a cell whose rowspan attribute is assigned
• Width can be assigned to <table> and <td> tags.
• Height can be assigned to <table> , <tr> and <td> tags.
• If we do not write some content in between <td> and </td> then browser will not allocate space for that cell.

The post Table based website structure appeared first on Ankit Virparia.

In the above layout we allocate space for displaying logo of a company, space for search module, space for displaying menu, space for displaying events and also place for footer.

Deciding width of a website:

An important question while designing a website is that what must be its resolution. As a standard practice we should decide the width of our website in the range of 900px to 1200px.
Why so?
The standard resolution of a monitor is 1024×768 pixels. If we develop a website which is larger than 1024px width and even if any user opens that website in a full screen browser then also browser will generate horizontal scroll bar at the bottom. As we don’t have horizontal scroll button on our mouse device, it will be inconvenient for the users to access such site. That is why we extend our webpage in terms of height and not in terms of width.
Now-a-days we are familiar with HD monitors having resolution of 1440px and above. Taking into consideration the target audience it is recommendable to have the width of our website between 900px to 1200px.

Note :- Another approach to develop a website is by occupying 100% of width available with the browser resolution eg. Google, Gmail.

The post What is website wireframing? appeared first on Ankit Virparia.

• Table is a structure which is used to store two dimensional information (eg. Excel)
• It is a combination of rows and columns.

Characteristics of tabular data

• Width of all columns will be same.
• Height of all rows will be same.
• Number of columns in each row should be same.
• When we store any tabular information, generally the first row represents name of the column.

HTML table tag

• For creating a table in html mainly four tags are used. The tags are as follows:
• <table> – used to define the structure of the table
• <th> – used to define the header of the table.
• <tr> – used to define a row of the table.
• <td> – used to define individual cells of the table.
• Suppose we want to create a table of size 2×2 i.e. to create a table having 2 rows and two columns.

<html>
<head>
<title>Welcome</title>
</head>
<body>
<table>
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
</tr>
</table>
</body>
</html>  

Output:

Note: When we create a table, by default it will have following characteristics:

• no border
• aligned left
• occupy width and height which is required to accommodate the text.

If we want to set these values, we need to use three attributes of <table> tag.

<html>
<head>
<title>Welcome</title>
</head>
<body>
<table border="1px" align="center" width="300px" height="300px">
<tr>
<td> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
<td> 4 </td>
</tr>
</table>
</body>
</html>

Output:

• Merging of cells
  • Many times it is required to merge columns or merge rows together. To achieve this we have to attributes : rowspan and colspan.
  • Rowspan : this attribute is used to merge rows together into one row. If we want to merge three rows then we need to assign the value 3 to this attribute.
  • Colspan : this attribute is used to merge columns together. If we want to merge two columns then we need to assign the value 2 to this attribute.

Examples:

Table – 1

<table border="1px" align="center" width="300px" height="200px">
<tr>
<td colspan="2"> 1 </td>
</tr>
<tr>
<td> 2</td>
<td> 3</td>
</tr>
</table>

Output:

Table – 2

<table border="1px" align="center" width="300px" height="200px">
<tr>
<td >1 </td>
<td> 2</td>
</tr>
<tr>
<td colspan="2"> 3 </td>
</tr>
</table>

Output:

Table – 3

<table border="1px" align="center" width="300px" height="200px">
<tr>
<td> 1 </td>
<td rowspan="2"> 2 </td>
</tr>
<tr>
<td> 3 </td>
</tr>
</table>

Output:

Table – 4

<tabl eborder="1px" align="center" width="300px" height="200px">
<tr>
<td rowspan="2"> 1 </td>
<td> 2 </td>
</tr>
<tr>
<td> 3 </td>
</tr>
</table>

Output:

Creating table for storing records

Generally when we store any data in a table, each cell of first row describes the name of that particular column. That data is considered to be table header and the tag used for it is <th> tag.

• Characteristics of <th> tag.
• Text written inside <th> tag is by default aligned to center.
• Text is displayed in bold letters.

Sample program:

<table border="1px" align="center" width="400px">
<tr>
<th> ID </th>
<th> NAME </th>
<th> CONTACT </th>
<th> EMAIL </th>
</tr>
<tr>
<td> 1 </td>
<td> Ankit Virparia </td>
<td> 9925720005 </td>
<td> ankit@ankit.co </td>
</tr>
<tr>
<td> 2 </td>
<td> Sonali Virparia </td>
<td> 9925720005</td>
<td> sonali@ankit.co</td>
</tr>
</table>

Output:

The post HTML table tag appeared first on Ankit Virparia.