Exercise
Follow the steps above to create the same table structure in your index.html file. Then experiment with adding a new table within your created table. This method of nesting tables within other tables is the principle on which HTML emails are written. Whenever you see a pretty email reach your inbox, what you are effectively seeing is a bunch of columns and rows nested within each other to create what typically appears to be a seamless image. The reason we build emails using tables is because email clients tend to use old versions of popular internet browsers to render their emails, and often don’t support more modern features, which forces us to use tables, as they have been supported from the early foundations of the internet. This challenge is reminiscent of many other challenges a web developer faces when building a website. Compatibility among the array of devices available is a constantly evolving challenge that keeps a web developer on his toes and forces him to keep up to date with the latest technological advances.
Who doesn’t love a good old list? Lists are actually used a lot in web design. Surprisingly, the majority of navigation bars you see are actually created as lists in HTML. Their uses extend much further than that, though. We often also use lists for image slideshows among other things, not to mention, whenever we want to create, you know, a list. There are a few different types of list we can create depending upon our needs. Let’s check them out below.
The three types of lists that are available to us are as follows:
Unordered lists are initiated with the <ul> element, with the opening and closing tags wrapping around our list in its entirety. Each ‘list item’ is then initiated with the <li> element, wrapping the opening (<li>) and closing (</li>) tags around the list item’s text, as can be seen below: