Lists:
There are two types of Lists:
- Ordered Lists
- Unordered Lists
Ordered Lists:
An ordered list starts with the <ol> tag, and each list items is defined by the <li> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ol>
<li>Red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>Indigo</li>
<li>Violet</li>
</ol>
</body>
</html>
The list items will be automatically marked with numbers.
Unordered Lists:
An ordered list starts with the <ul> tag, and each list items is defined by the <li> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>Red</li>
<li>orange</li>
<li>yellow</li>
<li>green</li>
<li>blue</li>
<li>Indigo</li>
<li>Violet</li>
</ul>
</body>
</html>
The list items will automatically marked with bullets.
In lists not only numbers and bullets, there are many more, we will learn in CSS.
HTML Tables:
Tables are defined by using the <table> tag. Tables are divided into table columns (table data) with the <tr> tag. Table rows are divided into table columns (table data) with the <td> tag.
Here is an example of a table:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td>Red</td>
<td>Green</td>
<td>Blue</td>
</tr>
<tr>
<td>yellow</td>
<td>Orange</td>
<td>Pink</td>
</tr>
<tr>
<td>Brown</td>
<td>Violet</td>
<td>Indigo</td>
</tr>
</table>
</body>
</html>
A border can be added using the border attribute.
<tr> => Table row
<td> => Table data
Rowspan attribute:
It is used to expand a cell vertically.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td rowspan="3">Red</td>
<td>Green</td>
<td>Blue</td>
</tr>
<tr>
<td>yellow</td>
<td>Orange</td>
</tr>
<tr>
<td>Violet</td>
<td>Indigo</td>
</tr>
</table>
</body>
</html>
Colspan attribute:
It is used to expand a cell horizontal.
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td colspan="3">Red</td>
</tr>
<tr>
<td>yellow</td>
<td>Orange</td>
</tr>
<tr>
<td>Violet</td>
<td>Indigo</td>
</tr>
</table>
</body>
</html>
Practice in this HTML code editor
//Practice your code here