HTML Fundamentals: Tables And Lists [Part 2]

Hello Again, in the last blog, we covered a lot of basics in HTML and today’s blog will be short and sweet where we will be looking at how we can arrange the content on the web page. We can arrange data in an organized way by putting them in different tables or you can simply put it in a list that can be ordered or unordered. We will also see how we can arrange them in columns and certain layouts within the webpage.

We'll go through each of them step by step.

Let’s start with tables.

Tables are nothing but a collection of data that is organized into columns and rows. A fundamental table contains columns, rows, headers etc.

If we want to define a table within our HTML page, we use the tag <table>

Simple. Isn't it?

Let’s look at an example.

<table>
  <tr>
    <th>Name</th>
    <th>Place</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Akhil </td>
    <td>Chennai</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Aiswarya</td>
    <td>Bangalore</td>
    <td>25</td>
  </tr>
</table>

Don’t be confused. Let’s break it down further.

<tr> is used to define rows.

<th> is used to define the headers.

<td> is used to define each cell.

Remember all of them should end with respective closing tags.

Time to open your editor and try running the code above. You can change the details and make your own type of table.

Awesome!!!

Now let’s say we don’t want to put our data into tables instead we like it to be in a simple list format. Let us do that.

<ul>
  <li>Apple</li>
  <li>Mango</li>
  <li>Dog</li>
  <li>Maggi</li>
</ul>

You define an unordered list using the <ul> tag and each element is put within <li> tags like above. That was an example of an unordered list.
Now let us see how to make an ordered list.

<h2> Class Toppers </h2>
<ol>
  <li>Akhil</li>
  <li>Aiswarya</li>
  <li>Arya</li>
</ol>

It was simple.

Let's look at something called descriptive tables. The <dl> tag defines the description list, the <dt> tag defines the name of the element, and the <dd> tag describes the element.

<h2> Descriptive list </h2>
<dl>
  <dt>Dogs</dt>
  <dd> > Most beautiful creatures in the world</dd>
  <dt>Snakes </dt>
  <dd> > They are scary</dd>
</dl>

Alright!

We covered most of the basics. Now let's take one more step ahead. Let us see how we can further customize and beautify our tables. Although, we will look into it deeper in our CSS sessions. For now we will go through some basics.

We will now try to do some basic modification such as changing the colour of the border and the style of border. Here we are going to make the border red in colour.

<style> tags like shown below.

<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  border-color:red;
}
</style>
</head>
<body>
<table>
  <tr>
    <th>Name</th>
    <th>Place</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Akhil </td>
    <td>Chennai</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Aiswarya</td>
    <td>Bangalore</td>
    <td>25</td>
  </tr>
</table>
</body>
</html>

This is how it look like:

It does look a bit congested isn't it?

Let us make it look elegant.

Let us add the below style attribute within the table tag.

<table style="width:100%"> </table>

And let us modify the style tag as the following and try again.

<style>
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  border-color:red;
  padding: 8px;
}
</style>

Now look at the table. Isn’t it better than the earlier one?

Check what happens when you remove the border-collapse option within the style tag.

Let's explore further.

What if I want a table where one of my cells spans more than one row as shown below?

Let us just change the content within the <body> tag and let everything else remain the same. Observe the <caption> tag which is included within the <table>.

Also, to define cells with multiple rows, we will use an attribute called rowspan.

<body>
<table style="width:100%">
  <caption> Monthly savings </caption>
  <tr>
    <th>Name:</th>
    <td>Ash</td>
  </tr>
  <tr>
    <th rowspan="2">Educational Qualifications:</th>
    <td>M.Sc.Human Disease Genetics (2018-20)</td>
  </tr>
  <tr>
    <td>B.Sc.Medical Genetics (2015-20)</td>
  </tr>
</table>
</body>

Now, similarly let us say that I would like to merge two columns together like shown below.

I will be using the attribute called colspan.

Here is an example.

<table style="width:100%">
<caption> Cells that span two columns </caption>
  <tr>
    <th>Name</th>
    <th colspan="2">Phone no.</th>
  </tr>
  <tr>
    <td>Akhil</td>
    <td>123456</td>
    <td>6789012</td>
  </tr>
</table>

Earlier, we saw how we can change the way a table looks entirely. Now let us look at how we can style each element or specific component in a table.

For example, let us say I want to have every alternate row coloured blue like shown below.

What I am going to do is add a small chunk of code (shown below) to the style tag.

<style>
tr:nth-child(even) {
  background-color: #eee;
}
</style>

Let me describe what it is:

tr here stands for the row
nth-child(even) defines every even numbered row
The styling is defined within the curly bracket

So together it says apply whatever is within the curly bracket to every even row in the table.

Cool?

You could also try replacing even with odd and see how it changes.

There are several techniques by which you can customize and style your HTML tables.

So, that is all for today.

In the coming blogs we will be exploring CSS further and we will also look at how to format and make our web page colourful.