Lists and tables

Developed with



The course is part of this learning path

Developing Web Applications with HTML and CSS


Often, you’ll need to present information to users in the form of a table or a list. In this short course, you’ll learn how to do both.


- So, have you ever watched a video called something like, "Top ten ways to do whatever?" Well, of course, you have. Everyone loves a list because they're simple to understand, easy to consume, and quick to get through. In this video, I'll show you how to create ordered, unordered, and descriptive lists in your pages. Let's start with a little bit of theory first. So, ordered lists are either numerical or alphabetical, so they will probably look something like one, two, three, et cetera, or maybe a, b, c. Creating an ordered list is pretty simple. You'll be using the ordered list tag with the start attribute and the list item tag. In practice, this looks something like this. First, I'll open the ordered list tag then add a start attribute. For now, I'll make the start attribute equal to one, but we'll play around with this in a moment. Next, I'll add some list items using the list item tags. This follows normal practice. First, I'll open a list item tag, then add the text I want to be displayed, which will be listed item 1 for now, then I'll close the tag. I can repeat this as many times as I need to, but, for now, I'll just add one more in. Once I'm done, I can close the ordered list tag, and my ordered list is ready to go. Before we move on, I want to show you what the start attribute does. So, if I change it to, say, equal to five. This will mean that the first item on the list will be, you guessed it, five. If you want to do an alphabetical list, the list will run from a to z, so setting your start point at, say, g will mean that the list will always also start at g. Alternatively, the type attribute can be used to set the way the list will be ordered. Setting type to one means numeric list, upper or lowercase a, an alphabetic list, and the upper or lowercase roman numeral I will give you that kind of list. Great, let's move on to an unordered list now. Unordered lists are lists where all the items in the list aren't ranked, but are of equally important value. And these are basically just bullet point lists. To create them, you'll follow the same process as you did with ordered lists, but you'll use the unordered list tag instead. You also actually won't need a start attribute because all the bullets are equal. In practice, this looks like this. First, I'll open an unordered list, then add the list items just like I did with the ordered list. Once I've added all the items I want to include, I can close the list. If you want to change the default circle to something else, you can set the style attribute to list-style-type and providing either disc for default, circle, square, or none as a value after a colon. Last up for this video, let's talk about description lists. You'll want to use these if you have a list of terms that you want to define, so maybe in a glossary or just for a quick definition in a larger body of content. Description lists use the description list tag, the definition tag, and the definition description tag. The code for these looks like this. First, I'll open the description list with a dl tag, next I'll add a definition tag, dt, and some text, say, Summer. Then, I'll close the dt tag and move onto the definition description tag, dd. I'll open it then add in some text, for now, that'll be, The warmest season of the year, and then I'll close it. I can then repeat this process as many times as I need. So, I'll quickly add in Winter like this. And, once I'm done, I can close the description list tag, and it's ready to go. And that's it for this video. Being able to add ordered, unordered, and description list tags to your pages will help you to present information to your users in a simple and easy to consume way, so make sure that you take the time to master all of these tags.

About the Author
Learning paths6

An outstanding trainer in software development with more than 15 years experience as a Corporate and Apprentice Trainer, ICT Teacher and Head of Department, with a passion for technology and its uses. Continuing to develop existing and new skills and courses, primarily in web design using PHP, JavaScript, HTML, CSS and SQL but also OOP (Java), programming foundations (Using Python), DevOps (Git, CI/CD, etc) and Agile/Scrum. Practically minded, a quick learner and a problem solver with an attention to detail to ensure high quality outcomes.

Covered Topics