Today’s topic is Creating Tables in HTML. Welcome to the third article in TheITStuff’s HTML tutorial series. We have covered the text-formatting tags in the previous article, if you haven’t read it, you can read it here. In this article, we will look at tables and lists that can be used with HTML.
Creating Tables in HTML
Tables and Lists are of extreme importance when it comes to representing information correctly on a web page.
Tables
Tables in HTML are very much like tables that we use in excel and word. They have rows and columns. So here is a code for defining a simple table in HTML.
<html><head></head><body><table><tr><th>RollNo</th><th>Name</th></tr><tr><td>03</td><td>Sahil</td></tr><tr><td>15</td><td>Rishabh</td></tr><tr><td>70</td><td>Tony</td></tr></table></body><html>
The output should be similar to this. You can see that we have 4 rows and 2 columns out of which the first row is the heading. So let us break the tags in the code down.
<table> – This tag defines that the content inside is a part of a table.
<tr> – The <tr> tag is used to define and create a new row in the table.
<th> – Mostly used in the first row of the table, the <th> tag is used to define the headings.
<td> – the <td> tag is used to represent data in a table cell.
This is a very primitive table design but I hope you get the picture of how tables work.
Lists
Lists are also very important in HTML. They are a linear representation of elements. See the following image of a list. The code you need to write would be this.
<html><head></head><body><ol><li>Bread</li><li>Eggs</li><li>Butter</li><li>Milk</li><li>Ketchup</li><ol></body><html>
Decoding this would give us just two tags.
<ol> – This is used to create an ordered list.
<li> – This tag is used to create and define a list item.
Try replacing the <ol> with <ul> and you would get an output like this.
The ol stands for the Ordered list and ul stands for unordered list. Let us add a few more things to our code. Here I have the same code but I have made a change.
<html><head></head><body><ol type="A"><li>Bread</li><li>Eggs</li><li>Butter</li><li>Milk</li><li>Ketchup</li><ol></body><html>
The output for the same would be this.
The only change I made was this <ol type=”A”>, I added a type=”A”. This is known as an attribute, we will study more about attributes in the next article.
For now, what’s important is that the type=”A” defines that the identifier should be Uppercase Alpha. You can try to replace that A with a(lowercase alpha), I (Uppercase Roman numbers), and I (Lowercase Roman Numbers),
Similarly, you could use a disc, circle, square, or none attribute for unordered lists.
Conclusion
Tables and lists are very important in representing data on a webpage. A table has rows defined by <tr> and column elements defined by <td>. Lists can be either ordered or unordered. Ordered lists are created with <ol> follow a pattern where each element is given an index. This index may be alphabetical, numeric, or roman. The default pattern is numeric, though if you wish to change it, you can add a type=” “ attribute. An unordered list <ul> is a list that isn’t in order. It also has several types including square, circle, and disc.
I hope you are clear with what lists and tables are and I have given you a slight example of attributes. We will learn more about attributes in the next article. If you have any doubts, feel free to comment them below.
