Continuing from Part 1 of this tutorial where we covered very basics of HTML, in this part we move on to understand lists and tables in HTML.
Lists
Sometimes we need to list certain items either vertically or horizontally e.g. menu items. For that purpose, we have <ol></ol> and <ul></ul> tags in HTML. <ol></ol> represent Ordered List and <ul></ul> represent Unordered List. Each type of list would consist of Line Items which are represented by <li></li> tags.
Let’s create a fresh HTML file named second.html in the same folder as index.html. For that purpose you may copy paste the index.html file and rename the copied file as second.html. Now, amend the second.html file as follows;
<!DOCTYPE html>
<html>
<head>
<title>My Second Webpage</title>
</head>
<body>
<ol>
<li>Apple</li>
<li>Banana</li>
<li>Orange</li>
</ol>
<ul>
<li>Potato</li>
<li>Carrot</li>
<li>Corn</li>
</ul>
</body>
</html>
Save second.html and open the file in browser. You can see that the Ordered List is actually numbered and Unordered List is simply bulleted list. Lists can be nested by inserting the inner list into an <li></li> tag of the outer list, for example;
<ol>
<li>Apple
<ol>
<li>Red</li>
<li>Green</li>
</ol>
</li>
<li>Banana</li>
<li>Orange</li>
</ol>
By amending the second.html to incorporate the above nested ordered list, we get;
<!DOCTYPE html>
<html>
<head>
<title>My Second Webpage</title>
</head>
<body>
<ol>
<li>Apple
<ol>
<li>Red</li>
<li>Green</li>
</ol>
</li>
<li>Banana</li>
<li>Orange</li>
</ol>
<ul>
<li>Potato</li>
<li>Carrot</li>
<li>Corn</li>
</ul>
</body>
</html>
Save and reload the second.html file in browser. Notice the inner list gets numbered too because it’s also Ordered List. We can change the numeric as well as alphabetic sequence type by using ‘type’ attribute, so let’s change the inner <ol> as follows;
<ol type='a'>
And notice that the inner sequence is changed to ‘a’, ‘b’ and so on. You can change the sequence to Roman numerals by replacing ‘a’ with ‘i’.
Tables
Now we move on to a very crucial topic in HTML i.e. Tables. Needless to say, through tables we present the data in an organized form utilizing the power of rows and columns. So, let’s create a simple table in HTML;
<table border='1'>
<tr>
<th>Name</th>
<th>Profession</th>
</tr>
<tr>
<td>Tom Hanks</td>
<td>Actor</td>
</tr>
<tr>
<td>James Cameron</td>
<td>Filmmaker</td>
</tr>
</table>
The construction of above table is similar to the Lists as we’ve already seen. Here, <table></table> tags obviously represent the start and end of table. <tr></tr> tags represent a row in a table. <th></th> represent the heading cells. <td></td> represent the normal cell in a table. In fact, <th> is same as <td> except for two differences i.e. text inside <th> becomes bold and centrally aligned.
Moving on, let’s merge cells by using ‘colspan’ attribute in <td></td> tags. For that, we insert a new row into our table as follows;
<tr>
<td colspan='2'>Combined net worth: Over $1 billion</td>
</tr>
There remains a lot about presentation of tables but that’s enough for now; we are leaving decoration of tables for CSS tutorial.
But before concluding this part of tutorial, let’s rewind ourselves back to creating Hyperlinks <a></a> tags for one last time. Right after </table> close tag, insert the following HTML;
<br>
<a href='index.html'>Click here to go to Homepage!</a>
By inserting this simple link to jump to the index.html (make sure that index.html and second.html are in same folder), we’ve moved up our game from ‘creating single webpage’ to ‘creating whole website’.
Summing up things here, our second.html looks like this now;
<!DOCTYPE html>
<html>
<head>
<title>My Second Webpage</title>
</head>
<body>
<ol>
<li>Apple
<ol type='a'>
<li>Red</li>
<li>Green</li>
</ol>
</li>
<li>Banana</li>
<li>Orange</li>
</ol>
<ul>
<li>Potato</li>
<li>Carrot</li>
<li>Corn</li>
</ul>
<table border='1'>
<tr>
<th>Name</th>
<th>Profession</th>
</tr>
<tr>
<td>Tom Hanks</td>
<td>Actor</td>
</tr>
<tr>
<td>James Cameron</td>
<td>Filmmaker</td>
</tr>
<tr>
<td colspan='2'>Combined net worth: Over $1 billion</td>
</tr>
</table>
<br>
<a href='index.html'>Click here to go to Homepage!</a>
</body>
</html>
Next, in part 3 of this tutorial, we’ll look into HTML Forms…
2 thoughts on “Essential HTML Tutorial – Part 2”