Mansoor Ahmed Bughio 1 Example of an unordered
Mansoor Ahmed Bughio 1
Example of an unordered list and an ordered list in HTML: Unordered List: Item Ordered List: First item Second item Third item Fourth item 2
Unordered HTML Lists An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets (small black circles): <html> <body> <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> 3
Unordered HTML Lists - The Style Attribute A style attribute can be added to an unordered list, to define the style of the marker: Style Description list-style-type: disc The list items will be marked with bullets (default) list-style-type: circle The list items will be marked with circles list-style-type: square The list items will be marked with squares list-style-type: none The list items will not be marked 4
<html> <body> <p> disk style</p> <ul style="list-style-type: disk"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> 5
<html> <body> <p> circle style</p> <ul style="list-style-type: circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> 6
<html> <body> <p> square</p> <ul style="list-style-type: square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> 7
Ordered HTML Lists An ordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers: <html> <body> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> 8
Ordered HTML Lists - The Type Attribute A type attribute can be added to an ordered list, to define the type of the marker: Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers 9
<html> <body> <ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> 10
<html> <body> <ol type="a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> 11
<html> <body> <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> 12
<html> <body> <ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> 13
<html> <body> <ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> 14
15
16
HTML tables 17
The HTML tables are created using the <table> tag in which the <tr> tag is used to create table rows and <td> tag is used to create data cells. Here, the border is an attribute of <table> tag and it is used to put a border across all the cells. If you do not need a border, then you can use border="0". 18
<html> <head> <title>HTML Tables</title> </head> <body> <table border="1"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr> </table> </body> </html> 19
This will produce the following result: Row 1, Column 1 Row 1, Column 2 Row 2, Column 1 Row 2, Column 2 20
Table Heading Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is used to represent actual data cell. Normally you will put your top row as table heading as shown below, otherwise you can use <th> element in any row. 21
<html> <head> <title>HTML Table Header</title> </head> <body> <table border="1"> <tr> <th>Name</th> <th>Salary</th> </tr> <td>Ramesh Raman</td> <td>5000</td> </tr> <td>Shabbir Hussein</td> <td>7000</td> </tr> </table> </body> </html> 22
- Slides: 22
