Nested table structure.

Ankit Virparia — Sun, 19 May 2013 18:21:27 +0000

When the layout is a bit complex, it becomes difficult to create the entire layout using just one table. To create a layout as given below we need to use more than one table tag.



Nested table structure


	
	
	
	
	
	 1 
 2 


	 3 
 4 





	 5 


	
	
	
	 6 
 7 
 8 





	
	
	
	 9 
 10 


	
	
	
	 11 
 12 


	 13 
 14 


	 15 








	 16

Output:

1	2
	3	4

11	12
	13	14
		15

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

Table based website structure

Ankit Virparia — Sun, 19 May 2013 04:09:43 +0000

As we have understood wireframing in the previous tutorial, now we are going to implement it it using

tag.
Consider the layouts given below.

Layout – 1

1	2
3
4	5
5

Output:

1	2
3
4	5
5

Above layout consist of four rows and two columns.

Layout – 2

Output:

1	2
3
4		5
5

Layout – 3

Output:

1	2
3
4		5	6
7				8
9

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 and

tags.

Height can be assigned to , and then browser will not allocate space for that cell.

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

What is website wireframing?

Ankit Virparia — Sun, 19 May 2013 03:47:36 +0000

Wireframing is a method by which we decide the position of various modules in our website design. Example of different modules in a general website are login , search, menu, logo, footer etc.. It is also known as website template or website structure.
Let us consider the below given template to understand: “What is website wireframing?” :

tags.

If we do not write some content in between

and

Logo Here	Search Bar Here
Menu Here
Main Text		News
Footer Here

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.

HTML table tag

Ankit Virparia — Tue, 14 May 2013 05:56:02 +0000

What is a table?

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:

– used to define the structure of the table

– used to define a row of the table.

– used to define the header of the table.

– 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.



Welcome




 1 
 2 


 3 
 4

Output:

1	2
3	4

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

tag.



Welcome

1	2
3	4

Output:

1	2
3	4

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

Output:

1
2	3

Table – 2

Output:

1	2
3

Table – 3

Output:

1	2
3

Table – 4

Output:

1	2
	3

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

tag.

Characteristics of

tag.

Text written inside

tag is by default aligned to center.

Text is displayed in bold letters.

Sample program:



 ID 
 NAME 
 CONTACT 
 EMAIL 


 1 
 Ankit Virparia 
 9925720005 
 ankit@ankit.co 


 2 
 Sonali Virparia 
 9925720005
 sonali@ankit.co

Output:

ID	NAME	CONTACT	EMAIL
1	Ankit Virparia	9925720005	ankit@ankit.co
2	Sonali Virparia	9925720005	sonali@ankit.co

The post HTML table tag appeared first on Ankit Virparia.

Ankit Virparia » table

Nested table structure.

Table based website structure

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

What is website wireframing?

Deciding width of a website:

HTML table tag

What is a table?

Characteristics of tabular data

HTML table tag

Examples:

Creating table for storing records