ADVANCED HTML
LISTS IN HTML
There are two types of lists in HTML – Ordered and Unordered Lists.
1. Ordered List
An ordered list is the list which has a specific order. It is typically a numbered list of
items. The tag used for ordered list is <ol> and each list item is represented by <li>
tag.
Syntax:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Attributes of <ol> tag
Start – used to specify the start value of first item in the list.
<ol start=3>
Reversed – specifies the numbering in descending order.
<ol reversed>
Type – used to specify the numbering type to mark the items.
<ol type=”value”>
Values can be I, i, A, a
2. Unordered List
An unordered list is the list which does not have a specific order. It is represented
using symbols. The tag used for unordered list is <ul> and each list item is
represented by <li> tag.
Syntax:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Attributes of <ul> tag
Type – used to specify the symbol to mark the items in the list.
<ul type=”value”>
Values can be disc, square and circle.
TABLES IN HTML:
An HTML table is defined with the <table>tag.
Each table row is defined with the <tr>tag. It contains one or more <th> or <td> elements.
An HTML table consists of two types of cells: Header cells and Standard cells.
Header Cells: Contains the header information and is defined with the <th>tag. The text in <th>
element will be bold and centered by default.
Standard Cells: Contains the data and is defined with the <td>tag. The text in <td> element will be
normal and left aligned by default.
All the tags used to create a table (<table>, <tr>, <th>, <td>) are container tags.
Example:
<html>
<body>
<h2>Basic HTML Table</h2>
<table border >
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Riya</td>
<td>Khan</td>
<td>25</td>
</tr>
</table>
</body>
</html>
Table Properties:
1. Border
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".
2. Width and Height
You can set a table width and height using width and height attributes. You can specify table
width or height in terms of pixels or in terms of percentage of available screen area.
3. bgcolor
It is used to set background color for the table. If you want to give color only for a particular row,
use it along with the specific <tr>. If you want to give color only for a particular cell, use it along
with the specific <th> or <td>.
Example:
<table border width=200 height=400 bgcolor=”red”>
........
</table>
Merging Rows and Columns in a Table:
The attributes used to merge rows and columns in a table are: Rowspan and colspan
Rowspan – Used to merge two or more rows in a table. It can be used with <td> or <th> only.
Syntax:
<tagname rowspan=”number”></tagname>
Example
<html>
<body>
<h1>HTML rowspan Attribute </h1>
<table border="2">
<tr>
<th>Name</th>
<th>Language</th>
</tr>
<tr>
<td>John</td>
<td>English</td>
</tr>
<tr>
<td rowspan="2">Elon</td>
<td>Germany</td>
</tr>
<tr>
<td>French</td>
</tr>
</table>
</body> </html>
Output:
Colspan – Used to merge two or more columns in a table. It can be used with <td> or <th> tags.
Syntax
<tagname colspan=”number”></tagname>
Example:
<html>
<body>
<h2>Colspan</h2>
<table border>
<tr>
<th>Domains</th>
<th>Cost</th>
</tr>
<tr>
<td>Product Development</td>
<td>500000</td>
</tr>
<tr>
<td>Marketing</td>
<td>500000</td>
</tr>
<tr>
<td>Maintenance</td>
<td>100000</td>
</tr>
<tr>
<td colspan="2">Total Budget = INR 1300000</td>
</tr>
</table>
</body>
</html>
Output