Creating Tables and Lists in HTML
HTML

Creating Tables and Lists 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.

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. 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

list in html

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

create ordered list in html

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.

unordered list html

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 in numeric, though if you wish to change it, you can add a type=” “ attribute. An unordered list <ul> is a list which 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.

Creating Tables and Lists in HTML
Comments
To Top