HTML
HTML Tables and Lists
HTML Tables:
The data in a web page can be shown in a tabular format having rows and columns using html tables. The data can be text, images etc. The tags used to create html tables are <table> and </table>
Table header and table row:
The <th> tag is used to create table headers and the <tr> tag creates table rows.
Example1:
<html>
<head>
<title>Table Header</title>
</head>
<body>
<table border=”1”>
<tr>
<th>EmpNo</th>
<th>EmpName</th>
</tr>
</table>
</body>
</html>
The <td> tag creates cells.
Example2:
<html>
<head>
<title>Table Description</title>
</head>
<body>
<table border=”1”>
<tr>
<th>EmpNo</th>
<th>EmpName</th>
</tr>
<tr>
<td>1</td>
<td>Peter</td>
</tr>
<tr>
<td>2</td>
<td>Roger</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Tables</title>
</head>
<body>
<table border=”1″>
<tr>
<th>Student</th>
<th>Marks</th>
</tr>
<tr>
<td>A</td>
<td>90</td>
</tr>
<tr>
<td>B</td>
<td>80</td>
</tr>
</table>
<table border=”1″ bgcolor:”cyan” bordercolor=”green” width=700 height=500 background=”Logo.png”>
<!–<table border=”1″ cellpadding=”50″ cellspacing=”50″>–>
<thead>
<tr>
<td colspan=”2″ align=”center”>Student Details</td>
</tr>
</thead>
<tr>
<th>Student ID</th>
<th>Subject</th>
</tr>
<tr>
<td>1</td>
<td>HTML</td>
</tr>
<tr>
<td>2</td>
<td>Java Script</td>
</tr>
<tfoot>
<tr>
<td colspan=”2″ align=”right”>Footer</td>
</tr>
</tfoot>
</table><br>
<table border=”1″>
<tr>
<th rowspan=”2″>Semester</th>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>
</body>
</html>
HTML Lists:
Related information can be grouped together into lists. The 3 types of lists are ordered lists, unordered lists and definition lists.
Unordered lists:
It is a collection of related items having no specific order. It is represented by <ul> tag. it is a bulleted list. The shape of bullet can be changed by the “type” attribute of <ul> tag. The type can be circle, square etc. e.g., type=” circle”
Example:
<html>
<head>
<title>Unordered list</title>
</head>
<body>
<ul type=”circle”>
<li>Apples<li>
<li>Oranges<li>
<li>Grapes<li>
</ul>
</body>
</html>
Ordered lists:
It is a collection of related items having numbered list. It is represented by <ol> tag.
Example:
<html>
<head>
<title>Ordered list</title>
</head>
<body>
<ol>
<li>Apples<li>
<li>Oranges<li>
<li>Grapes<li>
</ol>
</body>
</html>
Definition lists:
In a definition list the items are listed as in dictionary. . It is represented by <dl> tag. The definition term is given inside the <dt> tag. The definition description is given inside the <dd> tag. This list can be used when definitions of certain terms to be listed.
Example:
<html>
<head>
<title>Definition list</title>
</head>
<body>
<dl>
<dt>US</dt>
<dd>US is United States</dd>
<dt>UK</dt>
<dd>UK is United Kingdom</dd>
</dl>
</body>
</html>
Other examples:
<!DOCTYPE html>
<html>
<head>
<title>Lists</title>
</head>
<body>
<!–unordered list type–>
<ul type=”circle”>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
<!–ordered list type–>
<ol type=”1″ start=”3″>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ol>
<!–description list–>
<dl>
<dt>C</dt>
<dd>C for cat</dd>
<dt>B</dt>
<dd>B for ball</dd>
<dt>A</dt>
<dd>A for Apple</dd>
</dl>
</body>
</html>