The lists are used for specifying a set of items. They can be ordered, unordered or definition.
For an ordered list is used <ol> tag and each item in this list will be preceded by a regular number, while for unordered list is used <ul> tag. Each item in any of these two types of lists should be placed within the <li> tag. For definition lists is used <dl> tag. These lists, in addition to citing the general items, contain a description of each item, to be placed within the <dd> tag, and the item is placed within the <dt> tag.
For example, ordered and unordered list.
<!DOCTYPE html>
<html>
<head>
<title>HTML elements - lists and tables</title>
<meta charset="UTF-8"/>
<meta name="description" content="This page is about HTML elements - lists and tables" />
<meta name="keywords" content="HTML elements, lists, tables, html lists, html tables" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
<!-- JavaScript that is inserted directly on the page -->
<script type="text/javascript">
</script>
<noscript>Your browser does not support JavaScript</noscript>
</head>
<body>
<h2>Lists</h2>
<h3>Ordered and Unordered Lists</h3>
<ol>
<li>Suzuki</li>
<li>KTM</li>
<li>Honda</li>
</ol>
<ul>
<li>Ducati</li>
<li>Kawasaki</li>
<li>Yamaha</li>
</ul>
<h3>Definition Lists</h3>
<dl>
<dt>HTML</dt>
<dd>Language for defining the structure of a web page.</dd>
<dt>CSS</dt>
<dd>Language for defining the layout of web page.</dd>
<dt>JavaScript</dt>
<dd>Language for implementation functionality of web page.</dd>
</dl>
</body>
</html>
Save this code as lists.html.
Next code save as style.css.
body {
background-color: #A1D490;
}
h1 {
color: orange;
text-align: left;
}
h2 {
color: green;
text-align: left;
}
h3 {
color: black;
}
To select a color, you can use the color picker.
Result:
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>HTML elements - tables</title>
<meta charset="UTF-8"/>
<meta name="description" content="This page is about HTML element - tables" />
<meta name="keywords" content="HTML elements, html tables" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
<!-- JavaScript that is inserted directly on the page -->
<script type="text/javascript">
</script>
<noscript>Your browser does not support JavaScript</noscript>
</head>
<body>
<table style="width:20%">
<thead>
<tr>
<th>#</th>
<th>Month</th>
<th>Day</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>January</td>
<td>31</td>
</tr>
<tr>
<td>2</td>
<td>February</td>
<td>28</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Total</td>
<td>59</td>
</tr>
</tfoot>
</table>
</body>
</html>
Save this code as table.html.
Add next code in style.css.
table, th, td {
border: 1px solid black;
text-align: left;
}
Result:
Note: the table should contain only tabular data, and not to be used for the organization of content inside the web page.
Complete code used in examples.
For an ordered list is used <ol> tag and each item in this list will be preceded by a regular number, while for unordered list is used <ul> tag. Each item in any of these two types of lists should be placed within the <li> tag. For definition lists is used <dl> tag. These lists, in addition to citing the general items, contain a description of each item, to be placed within the <dd> tag, and the item is placed within the <dt> tag.
For example, ordered and unordered list.
<!DOCTYPE html>
<html>
<head>
<title>HTML elements - lists and tables</title>
<meta charset="UTF-8"/>
<meta name="description" content="This page is about HTML elements - lists and tables" />
<meta name="keywords" content="HTML elements, lists, tables, html lists, html tables" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
<!-- JavaScript that is inserted directly on the page -->
<script type="text/javascript">
</script>
<noscript>Your browser does not support JavaScript</noscript>
</head>
<body>
<h2>Lists</h2>
<h3>Ordered and Unordered Lists</h3>
<ol>
<li>Suzuki</li>
<li>KTM</li>
<li>Honda</li>
</ol>
<ul>
<li>Ducati</li>
<li>Kawasaki</li>
<li>Yamaha</li>
</ul>
<h3>Definition Lists</h3>
<dl>
<dt>HTML</dt>
<dd>Language for defining the structure of a web page.</dd>
<dt>CSS</dt>
<dd>Language for defining the layout of web page.</dd>
<dt>JavaScript</dt>
<dd>Language for implementation functionality of web page.</dd>
</dl>
</body>
</html>
Save this code as lists.html.
Next code save as style.css.
body {
background-color: #A1D490;
}
h1 {
color: orange;
text-align: left;
}
h2 {
color: green;
text-align: left;
}
h3 {
color: black;
}
To select a color, you can use the color picker.
Result:
Tables
The table is represented with the <table> tag, which can contain any number of table rows, ie. <tr> tags. Each row contains the cells that contain data and which are marked with <td> tags. Each table has three main sections:- table header (<thead> </ thead>) where there is, usually, a single row of cells that represent titles with columns <th>.
- table body (<tbody> </ tbody>) that contains rows that contain cells with data.
- table footer (<tfoot> </ tfoot>), which is used to summarize the data. Footer if it is not necessary very often is omitted.
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>HTML elements - tables</title>
<meta charset="UTF-8"/>
<meta name="description" content="This page is about HTML element - tables" />
<meta name="keywords" content="HTML elements, html tables" />
<meta name="author" content="Marija Rikic">
<link rel="icon" type="image/png" href="images/favicon.jpg">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/script.js"></script>
<!-- JavaScript that is inserted directly on the page -->
<script type="text/javascript">
</script>
<noscript>Your browser does not support JavaScript</noscript>
</head>
<body>
<table style="width:20%">
<thead>
<tr>
<th>#</th>
<th>Month</th>
<th>Day</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>January</td>
<td>31</td>
</tr>
<tr>
<td>2</td>
<td>February</td>
<td>28</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>Total</td>
<td>59</td>
</tr>
</tfoot>
</table>
</body>
</html>
Save this code as table.html.
Add next code in style.css.
table, th, td {
border: 1px solid black;
text-align: left;
}
Result:
Note: the table should contain only tabular data, and not to be used for the organization of content inside the web page.
Complete code used in examples.
No comments:
Post a Comment
Note: Only a member of this blog may post a comment.