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. Name Place Age Akhil Chennai 25 Aiswarya Bangalore 25 < > table < > tr < > th </ > th < > th </ > th < > th </ > th </ > tr < > tr < > td </ > td < > td </ > td < > td </ > td </ > tr < > tr < > td </ > td < > td </ > td < > td </ > td </ > tr </ > table Don’t be confused. Let’s break it down further. is used to define rows. <tr> is used to define the headers. <th> is used to define each cell. <td> 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>Mango< li> < Apple < > li </ > li /li>
  <li>Dog</ Maggi < > li </ > li /ul> You define an unordered list using the <ul> tag and each element is put within tags like above. That was an example of an unordered list. Now let us see how to make an ordered list. <li> <h2> Class Toppers < li> <li>Arya< ol> /h2>
<ol>
  <li>Akhil</ Aiswarya < > li </ > li /li>
</ It was simple. Let's look at something called descriptive tables. The tag defines the description list, the tag defines the name of the element, and the tag describes the element. <dl> <dt> <dd> Descriptive list Dogs > Most beautiful creatures in the world Snakes > They are scary < > h2 </ > h2 < > dl < > dt </ > dt < > dd </ > dd < > dt </ > dt < > dd </ > 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. tags like shown below. <style> Name Place Age Akhil Chennai 25 Aiswarya Bangalore 25 <!DOCTYPE html> < > html < > head < > style , , { : solid black; : collapse; :red;
} table th td border 1px border-collapse border-color </ > style </ > head < > body < > table < > tr < > th </ > th < > th </ > th < > th </ > th </ > tr < > tr < > td </ > td < > td </ > td < > td </ > td </ > tr < > tr < > td </ > td < > td </ > td < > td </ > 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 , , { : solid black; : collapse; :red; : ;
} table th td border 1px border-collapse border-color 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 tag and let everything else remain the same. Observe the tag which is included within the . <body> <caption> <table> Also, to define cells with multiple rows, we will use an attribute called rowspan. Monthly savings Name: Ash Educational Qualifications: M.Sc.Human Disease Genetics (2018-20) B.Sc.Medical Genetics (2015-20) < > body < = > table style "width:100%" < > caption </ > caption < > tr < > th </ > th < > td </ > td </ > tr < > tr < = > th rowspan "2" </ > th < > td </ > td </ > tr < > tr < > td </ > 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. Cells that span two columns Name Phone no. Akhil 123456 6789012 < = > table style "width:100%" < > caption </ > caption < > tr < > th </ > th < = > th colspan "2" </ > th </ > tr < > tr < > td </ > td < > td </ > td < > td </ > 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.

HTML Fundamentals: Tables And Lists [Part 2]

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

HTML Fundamentals: How To Get Started [Part 1]

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

HTML Fundamentals: How To Get Started [Part 1]

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps