Scribd
Upload
10 views19 pages

M2 Part2

Uploaded by

Aman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
10 views19 pages

M2 Part2

Uploaded by

Aman
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 19

HTML5

List and Tables


2

List tags – OL & UL

Ordered List
Ordered List
<ol>
<li> One </li> 1. One
<li> Two </li> 2. Two
</ol
Unordered List
Unordered List  One
<ul>  Two
<li> One </li>
<li> Two </li>
</ul
3

OL - List Attributes
Attribute Value Description
reversed reversed Specifies that the list order should be reversed (9,8,7...)

start number Specifies the start value of an ordered list


type 1 Specifies the kind of marker to use in the list
A
a
I
i
4

Example – start
attribute
<ol start="10">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
5

With CSS
<ol style="list-style-type:upper-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>

<ol style="list-style-type:lower-roman">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
6

UL – List
Attributes

Attribute Value
compact compact
disc
type square
circle
7

Example
<ul type = “circle”>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ul type= “disc”>


<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
8

Definition List
 Definition List
Example:
<dl>
<dt>veg</dt>
<dd>good for health</dd>
</dl>
Where, dt is term
dd is data
9

Table Tags
<caption> - Table Caption
<table>
<thead> - Table head
<tbody> - Table body
<colgroup> - Column group
<th> - Table header
<td> - Table data
<tr> - Table row
10

Example
<table>
<thead>
<tr>
<th>Name</th>
<th>Instrument</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Instrument</th>
</tr>
</tfoot>
</table>
11

<tbody>
<tr>
<td>George Harrison</td>
<td>Lead Guitar</td>
</tr>
<tr>
<td>Ringo Starr</td>
<td>Drums</td>
</tr>
</tbody>
12

Table and its


Attributes
<table border="1" align="center"
width="400" bgcolor="#CCCCCC" >
<tr>
<th>Enter your first name</th>
<td> Magi</td>
</tr>
</table>
Example Program To Execute:
Ex6_Table.html
13

Table Properties - With


CSS
<html>
<head>
<title>Title of the document</title>
<style>
table, th, td { border: 1px solid #666; }
</style> </head>
<body>
<table style="width:80%;">
<tr> <th colspan="2">Month and Date</th> </tr>
<tr> <td>January</td> <td>10.01.2014</td> </tr>
<tr> <td>February</td> <td>10.01.2014</td> </tr> </table>
</body>
</html>
14

Screen Shots
15
16

Examples
<table class="egt">
<colgroup>
<colgroup span="2" style="background: rgba(128, 255, 0, 0.3); border: 1px solid rgba(100, 200, 0, 0.3);">
</colgroup>
<colgroup span="2" style="background: rgba(255, 128, 0, 0.3); border: 1px solid rgba(200, 100, 0, 0.3);">
</colgroup>
<tr>
<th>
</th>
<th colspan="2">Mike</th>
<th colspan="2">Tara</th>
</tr>
<tr>
<th>
</th>
<th>First test</th>
<th>Second test</th>
<th>First test</th>
<th>Second test</th>
</tr>
17

<tr>
<th>Day 1</th>
<td>25 km</td>
<td>38 km</td>
<td>28 km</td>
<td>37 km</td>
</tr>
<tr>
<th>Day 2</th>
<td>22 km</td>
<td>35 km</td>
<td>30 km</td>
<td>35 km</td>
</tr>
</table>
18

More Attributes
Cellpadding and cellspacing
<table cellpadding=“7" cellspacing=“7" border=“2">

Colspan and rowspan


<tr>
<td>Row 2 - Col 1</td>
<td colspan="2" rowspan="3">Row 2, 3 & 4 - Col 2 & 3</td>
</tr>
19

THANK YOU

You might also like