CodeDragon circular icon

CodeDragon might not work properly for you...

CodeDragon is designed to work with Google Chrome and Firefox, and a few features of CodeDragon have been found not to work properly with other web browsers. To make sure you get the best experience when using CodeDragon, please download the latest version of Google Chrome or Firefox and try again. You can install Google Chrome for free here, and Firefox here.

Or, you can continue anyway.

Introduction: Tables, lists, and summaries

Introduction/4

A few neat tricks for organising data in HTML - they look cool, make your website appear neater, and are really easy to use.

Written by Pal Kerecsenyi

Introduction: Tables, lists, and summaries

Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 
Ad Ethical + impactful advertising with tiny prices  Advertise on CodeDragon 

Tables

Tables can be a little tricky to set up in HTML. In real life, they are a simple but extremely useful way to organise data.

Firstly, let's look at what a table is made up of:

This makes a table, that looks something like this:

FruitAmount
Apple15
Grapefruit8

There's the <table> tag, firstly. This is probably quite obvious - it just tells the browser that we want to create a table.

Inside the table, there's a couple of abbreviated tags, which are a lot simpler than they look:

Your turn

One quick thing to remember: the table you create here won't be styled as prettily as the example above - it won't have borders or proper spacing. These can be added using something called CSS, which you'll learn about later.

  1. Drag the big blue basic structure block into the workspace. Change the title to anything you want. You're probably used to doing this by now!
  2. Drag the dark orange table block into the body.
  3. Drag the table row block into the table block, and experiment with adding table data and table heading blocks inside the table row, as well as adding more table rows below each other.

Lists

Lists are much simpler than tables. A list can be used to represent data in a visually clearer way to the user. A list can be either 'ordered' or 'unordered'.

Unordered lists

The term 'unordered' is just a fancier way of saying 'bullet points'. Here's an example:

This makes an unordered list, that looks like this:

Hopefully, you may have figured out how the code works. It's actually extremely simple:

Ordered lists

Ordered lists are basically exactly the same as unordered lists, except they use numbers instead of bullet points. The code is the same, except for a single letter:

This creates an ordered list:

  1. Item 1
  2. Item 2
  3. Item 3

Your turn

This doesn't really need too much explanation, so here you go: try playing with unordered/ordered lists and list items, and see what you can make. Again, remember that the styling might not be the same as in the examples above.


Summary and details

This is one of the most directly interactive HTML components you'll use. It can be used to summarise something, and then give more details about it when the user clicks on the text. Here's an example:

Even though the code is relatively simple, you get a powerful element for your website (try clicking on it):

Earth is the third planet from the Sun and the only astronomical object known to harbor life. According to radiometric dating and other sources of evidence, Earth formed over 4.5 billion years ago.

Planet Earth

To be fair, it's easy peasy to figure out what the code is doing. In fact, we won't even explain. The only important thing to note is that the summary can go anywhere inside the details block - the order doesn't actually make a difference.

Your turn

Give it a go to make sure you understand:

End of tutorial