Lists and tables

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 Paths

Ed is an Outstanding Trainer in Software Development, with a passion for technology and its uses and holding more than 10 years’ experience.

Previous roles have included being a Delivery Manager, Trainer, ICT teacher, and Head of Department. Ed continues to develop existing and new courses, primarily in web design using: PHP, JavaScript, HTML, CSS, SQL, and OOP (Java), Programming Foundations (Python), and DevOps (Git, CI/CD, etc). Ed describes himself as practically minded, a quick learner, and a problem solver who pays great attention to detail. 

Ed’s specialist area is training in Emerging Technologies, within Web Development. Ed mainly delivers courses in JavaScript covering vanilla JS, ES2015+, TypeScript, Angular, and React (the latter is authored by Ed) and has delivered on behalf of Google for PWAs. Ed has also developed a new suite of PHP courses and has extensive experience with HTML/CSS and MySQL. 

Ed is responsible for delivering QA’s Programming Foundations course using the Eclipse IDE. His skillset extends into the DevOps sphere, where he is able to deliver courses based around Agile/Scrum practices, version control, and CI/CD.

Covered Topics