3. Creating Lists & Tables in HTML Page

In this post, I'll be extending the page created in previous post and add functionalities of lists and tables.

List is a way of presenting data in some order or sequence. 
Similarly, as lists are one dimensional, tables on the other hand are two dimensional and used to represent data in tabular form.

This is how the HTML page will appear after using lists and tables:

Here is script for the same:

< HTML>
	< HEAD>
		< TITLE>My First Web Page< /TITLE>
	< /HEAD>
	
	< BODY>
		< H1>Sushant Sharma< /H1>
		< P>< B>B.TECH (CSE)< /B>< BR>
		< A HREF="http://sushantsharmaa.blogspot.in">My Home Page< /A>< BR>
		This is realted to java realted technologies.< BR>
		< A HREF="mailto:abc@gmail.com">contanct me< /A>< BR>< /P>
		< P>This page is about my personal information.< /P>
		< P>My subjects:< /P>
		< UL>
			< LI>Java< /LI>
			< LI>OOPS< /LI>
			< LI>DBMS< /LI>
		< /UL>
		< P>Yearly Courses:< /P>
		
		< TABLE border="1">
			< TR>
				< TH>Year< /TH>
				< TH>Subject< /TH>
			< /TR>
			< TR>
				< TD>1st< /TD>
				< TD>C++< /TD>
			< /TR>			
			< TR>
				< TD>2nd< /TD>
				< TD>DBMS< /TD>
			< /TR>
			< TR>
				< TD>3rd< /TD>
				< TD>Java< /TD>
			< /TR>						
		< /TABLE>
		
	< /BODY>
	
< /HTML>

Lists
=========

• <UL> tag is used to display unordered lists and by default "bullet" for these lists is "disc" (we can change this to "circle" or "square" with the help of "type" attribute).
• <OL> tag is used to display lists in some specific order and by default order for list is 1,2,3....
• We can change the order of lists using "type" attribute. For example: <OL type="a"> for order a,b,c.... ,<OL type="i"> for order in roman format or <OL start="25"> to display order from any number..
• Also we can create nested lists using <OL> or <UL> tag inside another list tag.

Tables
=========

• Tables are used to represent data in two dimensional format.
• <TABLE> tag: this tag includes set of all rows to be displayed inside the table.
• <TR> tag: inside TR tag, we specify set of cells; cells can either be of type heading or type data.
• <TH> used in only first row to display heading and it shows in bold. <TD> is tag for displaying the actual data.

Here, I have only shown text inside a table however we can display lists, images or even a form or a table inside a table as well. Some attributes of table are:

• border - thickness of table.
• cellpadding: distance between border of cell and content of cell.
• cellspacing: empty spacing between borders of 2 adjacent cells.

There are some attributes which are common in among all these tags: <TABLE>, <TR>, <TH>, <TD>:

• align: center, left, right
• bgcolor: ex: <TD bgcolor="red">
• width ex: <TR width="50%">
• height: <table height=200>

<caption> Tag: This tag can also be used to display some text information about the table. ex:

<TABLE border="1">

<caption>some text</caption>