Manohar Code

Ordered List in html with Example

by manoharkakarla on 23:53 No comments

Ordered List:

Ordered List represented with <ol> tag.
Ordered List creates list of items in number series.
List of items represented with <li> tag.
<li> tag always inside <ol> tag.

Syntax: Ordered List

<ol>

</ol>
OUTPUT:

list item 1
list item 2
list item 3

Example :

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<center>

<h3>welcome to ordered list </h3>

<ol>

<li> list one </li>

<li> list two</li>

<li> list three</li>

<li> list four</li>

</ol>

</center>

</body>

</html>

OUTPUT:

Ordered List Attributes: Type

Most Commonly used attribute is "type" .
By using type we can change sequence number type.
Different types of type values are "a","A","i","I","1"

Example :

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<center>

<h3>Ordered list with default type</h3>

<ol>

<li> list one </li>

<li> list two</li>

<li> list three</li>

<li> list four</li>

</ol>

<h3>Ordered list with type=I</h3>

<ol type="I">

<li> list one </li>

<li> list two</li>

<li> list three</li>

<li> list four</li>

</ol>

<h3>Ordered list with type=a</h3>

<ol type="a">

<li> list one </li>

<li> list two</li>

<li> list three</li>

<li> list four</li>

</ol>

<h3>Ordered list with type=i</h3>

<ol type="i">

<li> list one </li>

<li> list two</li>

<li> list three</li>

<li> list four</li>

</ol>

<h3>Ordered list with type=A</h3>

<ol type="A">

<li> list one </li>

<li> list two</li>

<li> list three</li>

<li> list four</li>

</ol>

<center>

</body>

</html>

OUTPUT:

By default ordered list type = 1

if you see all the types in output screen it will come with next sequence from type value.

Attribute : start

START attribute indicates that, from which number sequence starts.

Example:

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<center>

<h3>welcome to ordered list </h3>

<ol type="1" start="3">

<li> list one </li>

<li> list two</li>

<li> list three</li>

<li> list four</li>

</ol>

</center>

</body>

</html>

OUTPUT:

If you see the output screen, the sequence start from 3.

List with Multiple types:

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<center>

<h3>welcome to ordered list </h3>

<ol>

<li type="1"> list one </li>

<li type="a"> list two</li>

<li type="A"> list three</li>

<li type="i"> list four</li>

</ol>

</center>

</body>

</html>

OUTPUT:

If you see the output, item sequence types are different from one another but the sequence follows.
Ordered List with Attribute : DIR

DIR attribute represents direction.
List contains two types of directions, one is ltr (left to right) and rtl (right to left).
Default direction is left to right (LTR)

Example:

<html>

<head>

<title>Ordered List</title>

</head>

<body>

<center>

<h3>welcome to ordered list </h3>

<ol dir="ltr">

<li> list one </li>

<li> list two</li>

<li> list three</li>

<li> list four</li>

</ol>

<ol dir="rtl">

<li> list one </li>

<li> list two</li>

<li> list three</li>

<li> list four</li>

</ol>

</center>

</body>

</html>

OUTPUT:

Continue

Lists in HTML || Different types of Lists in HTML with example

by manoharkakarla on 22:46 No comments

List Creation in HTML:

HTML contains three types of Lists.
Ordered List, represented with <ol> tag.
Un-Ordered List, represented with <ul> tag.
Each list contains list of items, represented with <li>.
Definition List, it's like word and it's abbreviation.
Definition list contains <dt> and <dd> tags.
dt - it represents the title
dd - it represents the title abbreviation.

Syntax: Ordered List <ol>

<ol>

</ol>

OUTPUT:

list item 1
list item 2
list item 3

For Example : Click Here

The syntax represents ordered list with three list items.

Every ordered list contains list items.

Syntax: Un-Ordered List <ul>

<ul>

</ul>

OUTPUT:

list item 1
list item 2
list item 3

For Example : Click Here

Difference between Ordered List and Un -Ordered List :

If see the two out puts, ordered list generates output with number format where as unordered list generates output with bullets.

Syntax: Definition List <dl>

<dl>

<dd>Hyper Text Markup Language</dd>

<dd>Data Base Management System</dd>

</dl>

OUTPUT:

HTML

Hyper Text Markup Language

DBMS

Data Base Management System

For Example : Click Here

Continue

table creation in html with examples

by manoharkakarla on 01:07 No comments

<table> - Creation:

Table means ordered representation of data as rows and columns.
By using <table> tag we creates the table.
<table> tag contains other tags to represent rows and columns.
<tr> used to create rows.
<td> used to create columns.
<th> used to create header in the table.
<caption> represents the title of the table.
<thead><tbody><tfoot> used to create different sections with in the table.

Syntax:
<table>
<tr><td>row1 - column1</td><td>row1 -column2</td></tr>
<tr><td>row2 - column1</td><td>row2 -column2</td></tr>
<table>
Note: Row contains any number of columns but vise-verse not possible.
Example1: Simple Table Creation
<html>
<head>
<title>Simple Table</title>
</head>
<body>
<table align="center">
<tr>
<td>Name</td>
<td>Age</td>
<td>RollNo:</td>
</tr>
<tr>
<td>kumar</td>
<td>27</td>
<td>233</td>
</tr>
<tr>
<td>srinivas</td>
<td>24</td>
<td>234</td>
</tr>
<tr>
<td>ravi</td>
<td>23</td>
<td>295</td>
</tr>
<tr>
<td>surya</td>
<td>22</td>
<td>236</td>
</tr>
</table>
</body>
</html>
OUTPUT:

Simple table contains five rows and each row contain three columns.

Create table with title using <caption> tag:

<caption> tag creates title.

Example2:
<html>
<head>
<title>Simple Table</title>
</head>
<body>
<table align="center">
<caption>Student Details</caption>
<tr><td>Name</td><td>Age</td><td>College</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
</table>
</body>
</html>
OUTPUT:

It creates table title as "Student Details".
Table creation with attributes:
Simple Attributes of table
align="left" or "center"or "right"
border="number"
width="%number" or "number pixels"
cellpadding="number"
cellspacing="number"
align : it indicates alignment of table.
border: it indicates border width ,by default border width "0".
width: it indicates table width.
cellpadding: It add's space with in the cell.
cellspacing: It indicates space between cells.
Example3: WIDTH attribute

<html>
<head>
<title>Table with attribute</title>
</head>
<body>
<table align="center" width="50%">
<caption>Student Details</caption>
<tr><td>Name</td><td>Age</td><td>College</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
</table>
</body>
</html>
OUTPUT:

In Above example we given width as 50% .
When compare to the previous image width get increased.

Now width in pixels:

<html>
<head>
<title>Table with attribute</title>
</head>
<body>
<table align="center" width="300px">
<caption>Student Details</caption>
<tr><td>Name</td><td>Age</td><td>College</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
</table>
</body>
</html>
OUTPUT:

Here the table generated with width of 300px.
The table width varies with reference to width tag.

Example4: BORDER attribute:
By using border attribute we change the thickness of border.
<html>
<head>
<title>Table with attribute</title>
</head>
<body>
<table align="center" width="300px" border="1">
<caption>Student Details</caption>
<tr><td>Name</td><td>Age</td><td>College</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
</table>
</body>
</html>
OUTPUT:

Compare with the above diagram border size varies.

Click here for more Examples with border=2 and border=4

Example4: CELLPADDING attribute:

It create equal space in all cell's in the table
"cellpadding" attribute is used in table tag.

<html>
<head>
<title>Table with attribute</title>
</head>
<body>
<table align="center" width="300px" border="1" cellpadding="10">
<caption>Student Details</caption>
<tr><td>Name</td><td>Age</td><td>College</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
</table>
</body>
</html>
OUTPUT: before cell padding output screen

After cellpadding output screen

In above screen cellpadding create equal space in all cells
Example5: CELLSPACING attribute

CELLSPACING is used to create space between cell's

<html>
<head>
<title>Table with attribute</title>
</head>
<body>
<table align="center" width="300px" border="1" cellspacing="10" bgColor="gray" borderColor="black">
<caption>Student Details</caption>
<tr><td>Name</td><td>Age</td><td>College</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
<tr><td>Manohar</td><td>26</td><td>smm</td></tr>
</table>
</body>
</html>
OUTPUT:

Above output clearly shows that every cell separated by equal space.

Continue

Create Nested tables in html with example

by manoharkakarla on 00:21 No comments

Nested Tables:
Creating table with in another table is called Nested Table.
Example:
Here we are creating table with in another table.
The following example shows how to create nested tables

<html>
<head>
<title>Table with attribute</title>
</head>
<body>
<table align="center" width="400px" height="150px" border="1" cellpadding="0" cellspacing="0">
<caption>Student Details</caption>
<tr bgColor="gray"><th>Name</th><th>Age</th><th>College</th></tr>
<tr><td>Jadav</td><td>26</td><td>SMM college</td></tr>
<tr><td>Maharoop</td><td>26</td><td>SMM college</td></tr>
<tr><td>prasad</td><td>26</td>
<td>
<table width="313" height="76" cellpadding="5"
bgcolor="#CCCCCC" cellspacing="0" border="1">
<tr><td>First Year</td><td>Second Year</td></tr>
<tr><td>VMS College</td><td>GMS College</td></tr>
</table>
</td>
</tr>
</table>
</body>

</html>

OUTPUT:

In above example we created nested table in 3rd row 3rd column.
Nested table contains two rows and two columns.

For Demo : Click Here

Continue

Manohar Code

Friday, 9 August 2013

Ordered List in html with Example

Lists in HTML || Different types of Lists in HTML with example

table creation in html with examples

Create Nested tables in html with example

Music Player

Popular Posts

Blog Archive