Lists & Tables

What you will learn

As we mentioned earlier in this course, Front-end web development involves many different technologies, and the landscape is constantly changing. In this section, we will dig deeper in HTML & CSS and all of the different aspects & frameworks of front-end web development, and how to hone and keep your skills up to date. Let’s start…

Learning Objectives

  • HTML lists elements:

    • The basic list syntax.
    • Types of HTML lists.
    • HTML list item attributes.
    • How we nest lists inside each other.
    • List Item Styling.

  • HTML Tables:

    • When we should use tables.
    • The structure of a table
    • The special tags that dictate certain parts of a table, e.g. headers or captions
    • How to combine cells in a table
    • Why we need to be careful about padding and borders in tables
    • How to align text within cells in a table

Introduction to Lists

Ordered and unordered lists are important elements for creating web pages. The most common use of these elements is for creating lists with bullet-points or numbers. However they are also used in various other cases, such as for creating navbars and long collection of objects.

In general most developers prefer the lists for displaying structured content than tables.

Study

  1. Read Shay Howe on Lists (including CSS)

  2. Browse HTMLGoodies’ rapid fire guide to different list types

  3. Check this link HTML docs on lists. It is very useful and you will probably see it again when you’re Googling for a problem!

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Introduction to Tables

Back in the old days, tables were very important elements in HTML, since they were the major elements to display any sort of data. In addition tables were used to wrangle the layout of your page into some semblance of order. Now, thanks to CSS, tables are not that often used, however they are still the go-to way to get structured data onto the page.

Study

  1. Get a quick look at HTML Tables through this short introductory article by Flavio Copes: Styling HTML Tables with CSS

  2. Follow these 2 interactive screencasts on tables at Scrimba:

  1. Take a 15 minutes break, grab yourself a cup of coffe, set your chair at a comfortable position, fire up VSCode and study this extensive chapter on HTML Tables by Shay Howe

MUST READ

  1. Take another short break and carefully study the following MDN article that talks about advanced table features as well as how to create web accessible tables: HTML table advanced features and accessibility

  2. Check this link HTML Docs on Tables, which you’ll no doubt see again.

Additional Resources

In this section you can find a lot of helpful links to other content. This is a supplemental material for you if you want to dive deeper into some concepts.

Back to Lesson